c# - 如何用 Expanders 和 Scroolbar 实现这个 XAML 接口？

Question

我想在 XAML 中实现这个接口：

初始窗口：https ://static.oc-static.com/prod/courses/files/creez-votre-premiere-application-connectee-en-c-net/acti4_image1.png

开发窗口：https ://static.oc-static.com/prod/courses/files/creez-votre-premiere-application-connectee-en-c-net/acti4_image7.png

这是我尝试过的：

       <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>

                    <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>

我遇到的问题是，当未打开扩展器时，右列的宽度不会减小。然后，我不确定是否可以在网格内放置网格以在扩展器中的堆栈面板内排列标签和文本框。

你对我有什么建议？

标签： c#xaml