WPF DataGrid 需要在网格行中垂直滚动条
WPF DataGrid Need Vertical Scrollbar in Grid Row
我的客户开发了一个 属性 编辑器，其中包含多个 属性 部分，这些部分显示为 WPF 扩展器，其中包含数据网格。我们在 WPF 网格中布置了所有内容，当前具有自动调整大小的行。
我们要解决的问题是当屏幕高度改变时每个 属性 部分的大小按比例调整。当扩展器打开时，它们应该占据一定比例的 space，并在需要时自动弹出垂直滚动条。当它们关闭时，它们应该折叠并将剩余的 space 分配给剩余的部分。
在现实生活中，我们有 4 个带有内容的扩展器。第一个是固定高度，其余三个是列表和数据网格，需要按比例调整大小，最后一个占剩余 space 的最大部分。请记住，用户可能会调整屏幕大小，或者用户可能 运行 使用不同的屏幕分辨率，因此我们需要它做出相应的反应。
我们试过弄乱 DataGrid RowDefinition Height（固定、比例和自动）和 MaxHeight，以及每个数据网格的 MaxHeight，但我似乎无法找到导致整个区域的组合需要时消耗。我们正在研究基于代码的解决方案，但我们很好奇其他人的建议。
这是一个简单的代码示例，可以为您提供我们想要的布局。我们只需要它像上面描述的那样工作。
这是代码（这将是现实世界中的视图模型）
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="Whosebug_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:Whosebug_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>
就我能够理解您的要求而言，我认为这符合您的要求：
- 每个扩展器在未扩展时都会占用其所需的最小值 space。
- 顶行在展开时会根据其内容调整大小。
- 第二、三和四行划分了 space 的剩余部分。展开时，它们会伸展。二人获得一份可用 space，三人获得两份，四人获得三份。如果二和三打开，则二获得四份中的一份，三获得另外三份。
这些份额由 the * Height values 在触发器中的设置器中分发。这是第四行的触发器：
<DataTrigger
Binding="{Binding Children[3].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
Value="True"
>
<Setter Property="Height" Value="3*" />
</DataTrigger>
在 XAML 中这样做的好处是它永远不会 spring 给您带来任何丑陋的惊喜。
所以这是 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>
这些不显示滚动条，因为我没有花时间创建可以滚动的内容。
我的客户开发了一个 属性 编辑器，其中包含多个 属性 部分，这些部分显示为 WPF 扩展器，其中包含数据网格。我们在 WPF 网格中布置了所有内容，当前具有自动调整大小的行。
我们要解决的问题是当屏幕高度改变时每个 属性 部分的大小按比例调整。当扩展器打开时，它们应该占据一定比例的 space，并在需要时自动弹出垂直滚动条。当它们关闭时，它们应该折叠并将剩余的 space 分配给剩余的部分。
在现实生活中，我们有 4 个带有内容的扩展器。第一个是固定高度，其余三个是列表和数据网格，需要按比例调整大小，最后一个占剩余 space 的最大部分。请记住，用户可能会调整屏幕大小，或者用户可能 运行 使用不同的屏幕分辨率，因此我们需要它做出相应的反应。
我们试过弄乱 DataGrid RowDefinition Height（固定、比例和自动）和 MaxHeight，以及每个数据网格的 MaxHeight，但我似乎无法找到导致整个区域的组合需要时消耗。我们正在研究基于代码的解决方案，但我们很好奇其他人的建议。
这是一个简单的代码示例，可以为您提供我们想要的布局。我们只需要它像上面描述的那样工作。
这是代码（这将是现实世界中的视图模型）
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="Whosebug_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:Whosebug_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>
就我能够理解您的要求而言，我认为这符合您的要求：
- 每个扩展器在未扩展时都会占用其所需的最小值 space。
- 顶行在展开时会根据其内容调整大小。
- 第二、三和四行划分了 space 的剩余部分。展开时，它们会伸展。二人获得一份可用 space，三人获得两份，四人获得三份。如果二和三打开，则二获得四份中的一份，三获得另外三份。
这些份额由 the * Height values 在触发器中的设置器中分发。这是第四行的触发器：
<DataTrigger
Binding="{Binding Children[3].IsExpanded, RelativeSource={RelativeSource AncestorType=Grid}}"
Value="True"
>
<Setter Property="Height" Value="3*" />
</DataTrigger>
在 XAML 中这样做的好处是它永远不会 spring 给您带来任何丑陋的惊喜。
所以这是 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>
这些不显示滚动条，因为我没有花时间创建可以滚动的内容。