WPF DataGrid 需要在网格行中垂直滚动条

Question

我的客户正在开发一种属性编辑器，其中包含多个属性部分，这些部分显示为 WPF 扩展器，其中包含数据网格。我们将所有内容都布置在 WPF 网格中，当前具有自动调整大小的行。

我们要解决的问题是当屏幕高度发生变化时，每个属性部分的大小按比例调整。当扩展器打开时，它们应该占用一定比例的空间，并在需要时自动弹出垂直滚动条。当它们关闭时，它们应该折叠并将剩余空间留给剩余部分。

在现实生活中，我们有 4 个带有内容的扩展器。第一个是固定高度，其余三个是列表和数据网格，它们需要按比例调整大小，最后一个获得剩余空间的最大部分。请记住，用户可能会调整屏幕大小，或者用户可能会在不同的屏幕分辨率下运行，因此我们需要它做出相应的 react 。

我们试过弄乱 DataGrid RowDefinition Height(固定、比例和自动)和 MaxHeight，以及每个数据网格的 MaxHeight，但我似乎找不到导致整个区域被消耗的组合需要。我们正在研究基于代码的解决方案，但我们很好奇其他人可能会提出什么建议。

这是一个简单的代码示例，可以为您提供我们想要的布局。我们只需要它像上面描述的那样工作。

这是代码(这将是现实世界中的 View 模型)

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        datagrid1.DataContext = GetCustomerVM();
        datagrid2.DataContext = GetCustomerVM();
        datagrid3.DataContext = GetCustomerVM();
    }

    private List<Customer> GetCustomerVM()
    {
        var CustomerList = new List<Customer>();
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });
        CustomerList.Add(new Customer() { FirstName = "A" });

        return CustomerList;
    }
}

public class Customer
{
    public string FirstName { get; set; }
}

XAML

<Window x:Class="StackOverflow_SidePanelGridScrolling.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:StackOverflow_SidePanelGridScrolling"
        mc:Ignorable="d"
        Loaded="Window_Loaded"
        Title="MainWindow" Height="500" Width="300">

    <Window.Resources>

        <DataTemplate x:Key="ExpanderHeaderTemplate">
            <DockPanel Height="30">
                <TextBlock Margin="4,0,0,0"
                               VerticalAlignment="Center"
                               DockPanel.Dock="Left"
                               FontSize="16"
                               Text="{Binding}" />

            </DockPanel>
        </DataTemplate>

        <Style TargetType="Expander">
            <Setter Property="HeaderTemplate" 
                    Value="{StaticResource ExpanderHeaderTemplate}" />
        </Style>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Expander x:Name="expander1" Grid.Row="0" Header="Area 1">

            <DataGrid Name="datagrid1" 
                      ItemsSource="{Binding}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="First Name" 
                                        Binding="{Binding FirstName}"
                                        Width="100*" />
                </DataGrid.Columns>
            </DataGrid>

        </Expander>

        <Expander x:Name="expander2" Grid.Row="1" Header="Area 2">

            <DataGrid Name="datagrid2" 
                      ItemsSource="{Binding}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="First Name" 
                                        Binding="{Binding FirstName}"
                                        Width="100*" />
                </DataGrid.Columns>
            </DataGrid>

        </Expander>

        <Expander x:Name="expander3" Grid.Row="3" Header="Area 3">

            <DataGrid Name="datagrid2" 
                      ItemsSource="{Binding}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="First Name" 
                                        Binding="{Binding FirstName}"
                                        Width="100*" />
                </DataGrid.Columns>
            </DataGrid>

        </Expander>

    </Grid>
</Window>

Answer 1

就我能够理解您的要求而言，我认为这可以满足您的需求:

• 每个展开器在未展开时都会占用其所需的最小空间。
• 顶行在展开时会根据其内容调整大小。
• 第二、三和四行划分了剩余的空间。展开时，它们会拉伸(stretch)。二人获得一份可用空间，三人获得两份，四人获得三份。如果二和三打开，则二获得四份中的一份，三获得另外三份。

这些股份由 the * Height values 分发在触发器中的 setter 中。这是第四行的触发器:

<DataTrigger
    Binding="{Binding Children[3].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
    Value="True"
    >
    <Setter Property="Height" Value="3*" />
</DataTrigger>

在 XAML 中执行此操作的好处在于，它永远不会给您带来任何丑陋的惊喜。

所以这是 XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger
                            Binding="{Binding Children[1].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
                            Value="True"
                            >
                            <Setter Property="Height" Value="1*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger
                            Binding="{Binding Children[2].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
                            Value="True"
                            >
                            <Setter Property="Height" Value="2*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger
                            Binding="{Binding Children[3].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
                            Value="True"
                            >
                            <Setter Property="Height" Value="3*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
    </Grid.RowDefinitions>
    <Expander
        Grid.Row="0"
        VerticalAlignment="Stretch"
        Header="One" Background="LightGreen">
        <StackPanel>
            <Label>Content One</Label>
            <Label>Content One</Label>
            <Label>Content One</Label>
        </StackPanel>
    </Expander>
    <Expander
        Grid.Row="1"
        VerticalAlignment="Stretch"
        Header="Two" Background="LightSkyBlue">
        <StackPanel>
            <Label>Content Two</Label>
            <Label>Content Two</Label>
            <Label>Content Two</Label>
        </StackPanel>
    </Expander>
    <Expander
        Grid.Row="2"
        VerticalAlignment="Stretch"
        Header="Three" Background="LightGoldenrodYellow">
        <StackPanel>
            <Label>Content Three</Label>
            <Label>Content Three</Label>
            <Label>Content Three</Label>
        </StackPanel>
    </Expander>
    <Expander
        Grid.Row="3"
        VerticalAlignment="Stretch"
        Header="Four" Background="Khaki">
        <StackPanel>
            <Label>Content Four</Label>
            <Label>Content Four</Label>
            <Label>Content Four</Label>
        </StackPanel>
    </Expander>
</Grid>

这些不显示滚动条，因为我没有花时间创建可以滚动的内容。