如何用Expander和ScrollBar实现指定XAML界面？

我帮你梳理下如何完善你的XAML代码，结合Expander和滚动功能来实现目标界面。首先看你的现有代码，已经搭好了基础框架，只需要补全细节并添加滚动支持即可。

核心改进点 #

1. 补全Expander内的用户详情表单
2. 为详情区域添加自动滚动功能
3. 优化布局细节提升体验

修改后的完整XAML代码 #

<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="Gestion des Utilisateurs" Height="450" Width="600">
    <Window.DataContext>
        <local:FicheUtilisateurViewModel></local:FicheUtilisateurViewModel>
    </Window.DataContext>
    <Grid>
        <Grid.Resources>
            <Style TargetType="Label">
                <Setter Property="HorizontalAlignment" Value="Right"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Margin" Value="0 0 5 5"/>
            </Style>
            <Style TargetType="TextBox">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Margin" Value="0 0 0 5"/>
            </Style>
            <Style TargetType="Button">
                <Setter Property="Margin" Value="5 5 5 0"/>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>

        <!-- 操作按钮栏 -->
        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
            <Button Content="Ajout d'un utilisateur" 
                    Command="{Binding AjouterUneFicheUtilisateur}"/>
            <Button Content="Supprimer l'utilisateur" 
                    Command="{Binding SupprimerUneFicheUtilisateur}"
                    CommandParameter="{Binding ElementName=listeDeFichesUtilisateurs, Path=SelectedItem}"/>
            <Button Content="Remise à zéro de l'utilisateur" 
                    Command="{Binding RemiseAZeroDeLaFicheSelectionnee}"
                    CommandParameter="{Binding FicheSelectionnee}"/>
        </StackPanel>

        <!-- 用户列表区域 -->
        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
            <Label Content="Liste des utilisateurs" FontWeight="Bold" Margin="0 0 0 5" HorizontalAlignment="Left"/>
            <ListBox x:Name="listeDeFichesUtilisateurs" 
                     ItemsSource="{Binding Fiches}" 
                     SelectedItem="{Binding FicheSelectionnee}"
                     VerticalAlignment="Stretch">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="2">
                            <Label Content="- "/>
                            <Label Content="{Binding Nom}" FontWeight="SemiBold"/>
                            <Label Content=" " />
                            <Label Content="{Binding Prenom}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>

        <!-- 展开式用户详情区域（带滚动） -->
        <Expander Header="Détail de l'utilisateur" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  ExpandDirection="Left" 
                  Grid.Column="2" 
                  Grid.Row="1"
                  Margin="5 5 5 5">
            <!-- ScrollViewer自动处理滚动，内容超出时显示滚动条 -->
            <ScrollViewer VerticalScrollBarVisibility="Auto"
                          HorizontalScrollBarVisibility="Disabled">
                <StackPanel Margin="10">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Label Content="Nom" Grid.Row="0" Grid.Column="0"/>
                        <TextBox Text="{Binding FicheSelectionnee.Nom}" Grid.Row="0" Grid.Column="1"/>

                        <Label Content="Prénom" Grid.Row="1" Grid.Column="0"/>
                        <TextBox Text="{Binding FicheSelectionnee.Prenom}" Grid.Row="1" Grid.Column="1"/>

                        <Label Content="Email" Grid.Row="2" Grid.Column="0"/>
                        <TextBox Text="{Binding FicheSelectionnee.Email}" Grid.Row="2" Grid.Column="1"/>

                        <Label Content="Téléphone" Grid.Row="3" Grid.Column="0"/>
                        <TextBox Text="{Binding FicheSelectionnee.Telephone}" Grid.Row="3" Grid.Column="1"/>

                        <Label Content="Adresse" Grid.Row="4" Grid.Column="0"/>
                        <TextBox Text="{Binding FicheSelectionnee.Adresse}" Grid.Row="4" Grid.Column="1" Height="60" AcceptsReturn="True"/>

                        <Label Content="Date de naissance" Grid.Row="5" Grid.Column="0"/>
                        <DatePicker SelectedDate="{Binding FicheSelectionnee.DateNaissance}" Grid.Row="5" Grid.Column="1"/>

                        <Label Content="Statut" Grid.Row="6" Grid.Column="0"/>
                        <ComboBox ItemsSource="{Binding StatutOptions}" 
                                  SelectedItem="{Binding FicheSelectionnee.Statut}"
                                  Grid.Row="6" Grid.Column="1"/>
                    </Grid>
                </StackPanel>
            </ScrollViewer>
        </Expander>
    </Grid>
</Window>

关键细节说明 #

• ScrollViewer的使用：我用ScrollViewer包裹了Expander内的内容，设置VerticalScrollBarVisibility="Auto"意味着只有当内容高度超过Expander的可用空间时，才会显示垂直滚动条；HorizontalScrollBarVisibility="Disabled"避免出现不必要的水平滚动。
• Expander优化：给Expander添加了Header明确功能，调整了ExpandDirection和对齐方式，让展开/折叠的交互更符合直觉。
• 布局与样式调整：
  • 按钮栏改用StackPanel横向排列，更紧凑
  • 调整了Label和TextBox的样式，统一了间距，提升界面整洁度
  • ListBox设置VerticalAlignment="Stretch"，让它和Expander高度匹配
• 完整的详情字段：补充了邮箱、电话、地址、出生日期、状态等常见用户字段，绑定到ViewModel的FicheSelectionnee属性，实现选中用户后自动填充详情。

这样修改后，你的界面就能实现初始折叠、展开后带滚动的效果，完全匹配目标需求。

内容的提问来源于stack exchange，提问作者Alexandre D aka OptimusPrim