Informations sur ce type de form

**Nixeus** · 27/01/2011, 17h24

Bonjour à tous,

Je voudrais réaliser une Form en WPF dans ce style :

Ce qui m'intéresse c'est le fait de pouvoir avoir une form avec des angles arrondis, et que cette form possède les bouton réduire et fermer en gris ( comme présent sur la capture).

J'ai déjà forcé la propriété WindowStyle à None.

Il me reste à afficher le petit bouton agrandir, réduire, et a ce que les bords soit arrondis.

Avez vous des infos à ce sujet ?

Merci beaucoup

Cordialement,

Nixeus

**Cecile5** · 27/01/2011, 17h46

Salut,

Au préalable, il te faut deux images :
- une pour le bouton de réduction (reduce.png)
- une pour le bouton de fermeture (close.png)

Côté xaml :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        Height="350" Width="525">
    <Border CornerRadius="10" Background="White">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
 
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5">
                <Button x:Name="btReduce" Click="btReduce_Click" Margin="0,0,5,0">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="reduce.png" Width="16" Height="17" />
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Button x:Name="btClose" Click="btClose_Click">
                    <Button.Template>
                        <ControlTemplate>
                            <Image Source="close.png" Width="16" Height="17" />
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </StackPanel>
        </Grid>
    </Border>
</Window>

Code behind :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
private void btClose_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
 
        private void btReduce_Click(object sender, RoutedEventArgs e)
        {
            WindowState = System.Windows.WindowState.Minimized;
        }

Bon code.

**Nixeus** · 27/01/2011, 17h52

Humm

Merci beaucoup de ta rapide aide, je vais tester cela dés que je rentre chez moi !

En revanche, je ne comprend pas pourquoi on passe en mode transparence, je pensais qu'un windowstyle à None suffisait !

En tout cas, WPF à l'air sacrémment puissant ! Je galère un peu pour le moment, mais j'ai hate de sortir la tête de l'eau et faire de belles IHM

**Cecile5** · 27/01/2011, 17h57

Si tu ne mets pas Background="Transparent" sur ta fenêtre, celle-ci a un fond blanc par défaut.
Du coup ton border blanc ne se voit plus et il n'y a pas de bords arrondis.
Pour mieux comprendre teste en mettant Background="Red" sur ta fenêtre et tu verras

**Nixeus** · 27/01/2011, 19h51

Me reste a faire des boutons y ressemblant et en 17px par 16px alors.

**Nixeus** · 27/01/2011, 20h41

Je viens de faire ma form grâce à ton aide

Je vais faire des boutons un peu plus petit par contre.

Deux petites questions :

* J'ai bien mes angles arrondis mais je vois légerement l'effet de transparence, est-ce normal ?

* Comment autorisé le déplacement de ma fenêtre quand je clique dans le haut de ma form ?

Merci encore

Edit : Si je met la couleur de ma grid à blanc, je ne vois plus aucun arrondis, j'ai du mal à comprendre.

**binoo** · 27/01/2011, 23h54

Envoyé par Nixeus

* Comment autorisé le déplacement de ma fenêtre quand je clique dans le haut de ma form ?

Tu peux t'abonner à l'évènement LeftMouseDown sur la partie qui t'intéresse et faire un DragMove :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 private void LeftMouseDown_Event(object sender, EventArgs e) {
  this.DragMove();
}

Envoyé par Nixeus

Edit : Si je met la couleur de ma grid à blanc, je ne vois plus aucun arrondis, j'ai du mal à comprendre.

C'est le comportement oui

. Mettre le background sur le Border ne convient pas, quel est ton besoin ?

**Cecile5** · 28/01/2011, 09h03

Salut,

Edit : Si je met la couleur de ma grid à blanc, je ne vois plus aucun arrondis, j'ai du mal à comprendre.

Une grid, si on ne lui spécifie pas de largeur ou de hauteur, prend automatiquement les mêmes dimensions que son conteneur, ici le border.

Mais une grid n'a pas de bords arrondis comme le border. Du coup, si tu spécifies une couleur au grid, celui-ci masque le border et ses bords arrondis.

**Nixeus** · 28/01/2011, 09h22

Bonjour et merci pur vos spécifications

Je suis resté sur ma Form jusque 00:20 :\ lol

Je me suis finalement dit qu'il serait peux être mieux dans mon cas de faire un PNG de background avec les angles arrondis ( car je veux garder le motif jaune).

J'ai donc recrée ce png :

Comme vous le constatez il a les bords déja arrondis.
j'ai donc voulu l'utiliser en image de background.

Mon gros problème est que quoi que je fasse, mon image est toujours redimensionnée, et au final, ce que je vois dans Visual Studio est correct, mais quand le programme est exécuté, ma Form n'as pas les même dimensions.

J'ai pourtant veillé à ne pas mettre de dimensions en pixels afin que tout soit automatique.

Selon vous, quel est la meilleur façon de faire avec ce png sachant que je l'ai créer au dimensions voulues.

Encore merci à tous de prendre votre temps pour m'expliquer

Cordialement,

Nixeus

**Cecile5** · 28/01/2011, 09h52

Si tu ne spécifies pas de width et de height à une Window, celle-ci prend des dimensions arbitraires par défaut.

Si tu places une image dans cette Window, l'image (comme la grid) se redimensionne à la taille de son conteneur, c'est-à-dire à la taille de la Window.

Du coup, cela déforme l'image.

Une solution possible :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        AllowsTransparency="True"
        Width="200" Height="200">
 
    <Window.Background>
        <ImageBrush ImageSource="monImage.png" />
    </Window.Background>
 
</Window>

Et tu renseignes les width et height de ta Window avec les dimensions de ton image.

**Nixeus** · 28/01/2011, 10h17

Merci de ta réponse,

J'ai donc suivi tes conseils, jai toujours une différénce :

Voici ce que je vois dans VS2010 :

Et ce que je vois en éxécution :

Voici mon code XAML

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<Window x:Class="DailyReport.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DailyReport" Height="500" Width="689" WindowStyle="None" AllowsTransparency="true">
    <Grid>
        <Line X1="100" Y1="0" Margin="29,135,65,255" Stroke="Black" IsManipulationEnabled="False" Stretch="Fill" StrokeMiterLimit="10" />
        <Label Content="DailyReport" Height="45" HorizontalAlignment="Left" Margin="29,26,0,0" Name="label1" VerticalAlignment="Top" Width="158" FontSize="26" />
        <Label Content="Saisie d'activité journalière" FontSize="12" Height="28" HorizontalAlignment="Left" Margin="180,64,0,0" Name="label2" VerticalAlignment="Top" Width="298" />
        <Label Content="Nom d'utilisateur" Height="28" Margin="132,219,354,0" Name="label3" VerticalAlignment="Top" FontStretch="Normal" FontWeight="Bold" />
        <Label Content="Mot de passe" Height="28" HorizontalAlignment="Left" Margin="132,257,0,0" Name="label4" VerticalAlignment="Top" Width="181" FontStretch="Normal" FontWeight="Bold" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="257,221,0,0" Name="editUser" VerticalAlignment="Top" Width="131" />
        <PasswordBox Height="23" HorizontalAlignment="Left" Margin="257,259,0,0" Name="editPass" VerticalAlignment="Top" Width="132" />
        <Button Content="Se connecter" Height="24" HorizontalAlignment="Left" Margin="425,400,0,0" Name="button1" VerticalAlignment="Top" Width="93" Click="button1_Click" />
        <Label Content="Identification" FontSize="12" Height="24" HorizontalAlignment="Left" Margin="29,146,0,0" Name="label5" VerticalAlignment="Top" Width="98" />
        <Button Content="Annuler" Height="24" HorizontalAlignment="Left" Margin="545,400,0,0" Name="button2" VerticalAlignment="Top" Width="93" />
        <CheckBox Content="Mémoriser mon identifiant et mon mot de passe" Height="19" HorizontalAlignment="Left" Margin="290,317,0,0" Name="checkBox1" VerticalAlignment="Top" Width="298" />
        <CheckBox Content="Me connecter automatiquement" Height="19" HorizontalAlignment="Left" Margin="290,342,0,0" Name="checkBox3" VerticalAlignment="Top" Width="342" />
    </Grid>
    <Window.Background>
        <ImageBrush ImageSource="BackgroundWelcome.png" />
    </Window.Background>
</Window>

**Cecile5** · 28/01/2011, 10h24

Dans Visual Studio, tu n'as pas zoomé l'aperçu?

**Nixeus** · 28/01/2011, 10h31

Oui j'était en 110%, mais la position des boutons et des contrôles n'est pourtant pas au même endroit

**Nixeus** · 28/01/2011, 10h56

Cela ne viendrai pas des contrôles de ma grid ?

**Nixeus** · 28/01/2011, 11h19

Envoyé par binoo

Tu peux t'abonner à l'évènement LeftMouseDown sur la partie qui t'intéresse et faire un DragMove :

Code c# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 private void LeftMouseDown_Event(object sender, EventArgs e) {
  this.DragMove();
}

Je viens d’essayer et je n'ai aucune réponse. J'ai même tenté avec un messagebox, rien ne se passe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show("clik", "ok");
        }

Sinon as tu une idée sur le fait que mes contrôles ne soient pas au même endroit en éxécution que dans Visual Studio ? Encore merci

**binoo** · 28/01/2011, 11h52

Salut,

Tes contrôles sont au même endroit si tu prends comme référentiel le coin haut gauche de ta fenêtre. Après comme la taille de ta fenêtre à l'exécution est un peu différente (peut être du au fait que tu ne mets pas de bordure), tu as une différence.
Étant donné que tu as positionné tout tes contrôles avec un Margin, il sont figés par rapport à ce point haut gauche.

Plusieurs solutions pour avoir ce que tu veux :

garder les Margin, mais te baser sur le rendu à l'exécution et pas dans le designer (pas top)
ou essayer de mettre le tout dans un contrôle ViewBox (je te laisse chercher quelle est la spécificité de ce conteneur ). Peut-être que cette solution sera adaptée, j'ai pas testé.
Jouer avec autre chose que les Margin. Le conteneur Grid permet de définir des lignes et des colonnes avec des tailles en pourcentage d'occupation :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
 
      <Textblock Grid.Row="0" Grid.Column="1" Text="lalala" />
 
      ....
    </Grid>

Là une grille est définie avec

2 colonnes occupant chacune 50% de la fenêtre
et 2 lignes : une de taille fixe 50 et une autre occupant tout le reste.

Il est peut-être possible d'utiliser cette solution pour faire en sorte que ton interface s'adapte à un éventuel changement de taille.

**binoo** · 28/01/2011, 12h20

Pour le déplacement de la fenêtre, j'ai une question. Le fameux StackPanel sur lequel tu as ajouté l'évènement MouseLeftButtonDown est celui du premier code donné par Cecile5 ?

Si oui, ce conteneur StackPanel englobe juste les boutons Réduire et Fermer. Tu peux vérifier dans le designer. Peut-être que ce n'est pas ce conteneur qui t'inéresse.

**Nixeus** · 28/01/2011, 12h22

Merci de tes réponses, je penserai que ça serait plus simple pour le problème de positions des contrôles.

Sinon pour le stackPanel, oui il s'agit bien de celui de cécile5 que j'ai étendu, mais je ne passe jamais dans l’évènement.