Bonjour,

je débute en C# et XAML, et dans le cadre d'un exercice, je dois reproduire cette interface :

Fenêtre initiale :
Nom : inital_window.png Affichages : 178 Taille : 41,0 Ko

Fenêtre développée :
Nom : developped_window.png Affichages : 189 Taille : 70,5 Ko

Je pense être relativement proche du but recherché :

Nom : etat_actuel.PNG Affichages : 172 Taille : 20,1 Ko

avec le code XAML suivant :

Code : 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<Window x:Class="OC_GestionUtilisateurs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OC_GestionUtilisateurs"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:FicheUtilisateurViewModel></local:FicheUtilisateurViewModel>
    </Window.DataContext>
    <Grid>
        <Grid.Resources>
            <Style TargetType="Label">
                <Setter Property="HorizontalAlignment" Value="Center">
                </Setter>
                <Setter Property="VerticalAlignment" Value="Center">
                </Setter>
            </Style>
            <Style TargetType="TextBox">
                <Setter Property="HorizontalAlignment" Value="Stretch">
                </Setter>
                <Setter Property="VerticalAlignment" Value="Center">
                </Setter>
                <Setter Property="TextAlignment" Value="Center">
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!-- Pour éviter d'écrire du code métier dans le code de l'application, l'événement Button_Click du bouton est remplacé-->
        <Button Content="Ajout d'un utilisateur" Command="{Binding AjouterUneFicheUtilisateur}" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="0"/>
        <Button Content="Supprimer l'utilisateur" Command="{Binding SupprimerUneFicheUtilisateur}" CommandParameter="{Binding ElementName=listeDeFichesUtilisateurs, Path=SelectedItem}" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1"/>
        <Button Content="Remise à zéro de l'utilisateur" Command="{Binding RemiseAZeroDeLaFicheSelectionnee}" CommandParameter="{Binding FicheSelectionnee}" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="2"/>
 
        <!-- LISTE DES UTILISATEURS -->
        <!-- liaison de la propriété fiche de notre view model à notre source de données d'une listebox nous permettant d'afficher toutes les fiches utilisateurs -->
        <StackPanel x:Name="ListeUtilisateurs" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
            <Label Content="Liste des utilisateurs" HorizontalAlignment="Left"  VerticalAlignment="Top"/>
            <ListBox x:Name="listeDeFichesUtilisateurs" ItemsSource="{Binding Fiches}" SelectedItem="{Binding FicheSelectionnee}" Margin="0,0,30,0">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <!-- Présentation d'un utilisateur dans la liste -->
                        <StackPanel Orientation="Horizontal">
                            <Label Content="- "></Label>
                            <Label Content="{Binding Nom}"></Label>
                            <Label Content="{Binding Prenom}"></Label>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
        <Expander HorizontalAlignment="Right" VerticalAlignment="Stretch" FlowDirection="RightToLeft" ExpandDirection="Left" Grid.Column="2" Grid.Row="1">
            <StackPanel x:Name="DetailUtilisateur">
                <!-- DETAIL DE L'UTILISATEUR -->
                <Grid AutomationProperties.IsOffscreenBehavior="Offscreen">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
 
                    <Label Content="Détail de l'utilisateur" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"/>
 
                    <Label Content="Nom" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" />
                    <Label Content="Prénom"  HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" />
                    <Label Content="Age" HorizontalAlignment="Left" VerticalAlignment="Top"  Grid.Column="1" Grid.Row="3"  />
                    <Label Content="Genre"  HorizontalAlignment="Left" VerticalAlignment="Top"  Grid.Column="1" Grid.Row="4"  />
                    <Label Content="Profession" HorizontalAlignment="Left" VerticalAlignment="Top"  Grid.Column="1" Grid.Row="5" />
 
                    <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Nom, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1"></TextBox>
                    <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Prenom, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="2"></TextBox>
                    <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Age, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="3"></TextBox>
                    <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Genre, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="4"></TextBox>
                    <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Profession, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="5"></TextBox>
 
                    <Expander HorizontalAlignment="Right" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="6" VerticalAlignment="Bottom" ExpandDirection="Down">
                        <StackPanel x:Name="AdresseUtilisateur">
 
                            <Grid>
 
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
 
                                <!-- ADRESSE DE L'UTILISATEUR -->
                                <Label Content="Adresse de l'utilisateur" HorizontalAlignment="Left"  VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"/>
 
                                <Label Content="Numéro" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1"/>
                                <Label Content="Rue" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" />
                                <Label Content="Code postal" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="3"/>
                                <Label Content="Ville" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="4" />
                                <Label Content="Pays" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="1" Grid.Row="5"/>
 
                                <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.NumeroRue, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1"></TextBox>
                                <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Rue, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="0" Grid.Row="2"></TextBox>
                                <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.CodePostal, Mode=TwoWay}" VerticalAlignment="Top"  Grid.Column="0" Grid.Row="3"></TextBox>
                                <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Ville, Mode=TwoWay}" VerticalAlignment="Top"  Grid.Column="0" Grid.Row="4"></TextBox>
                                <TextBox HorizontalAlignment="Stretch" Height="23" TextWrapping="Wrap" Text="{Binding FicheSelectionnee.Pays, Mode=TwoWay}" VerticalAlignment="Top"  Grid.Column="0" Grid.Row="5"></TextBox>
                            </Grid>
 
                        </StackPanel>
                    </Expander>
 
                </Grid>
 
            </StackPanel>
 
        </Expander>
 
    </Grid>
 
</Window>
Cependant, il reste encore des points à améliorer et là je sèche :

- Il faudrait que la ListBox utilise toute la place disponible lorsque le contrôle Expander est replié
- L'apparence des Expander soit la même que dans les images ci-dessus
- Le texte des labels (Nom, prénom, etc...) soit aligné à gauche (HorizontalAlignment="Left" ne suffit apparemment pas)
- La ListBox doit occuper toute la hauteur, et si le contenu dépasse, un ascenseur doit s'afficher.
- La largeur de l'expander principal doit être fonction de la largeur du contenu des TextBox (L’application doit être robuste au changement de taille, les textes ne doivent pas être coupés dans la mesure du possible)

Pouvez-vous me donner des pistes et me conseiller sur ce que vous amélioreriez dans le code déjà écrit s'il vous plaît?