wpf - 如何在 MVVM 中的一个 StackPanel 中动态设置 Extenders 内的 3 个 DataGrids 的高度？

Question

每个 DataGrid 的高度应该取决于:

1. 是否扩展了其他 Extender
2. DataGrid 有多少行
3. 如果扩展其他Extender，其他DataGrids有多少行。
4. Extender 所在的 StackPanel 的高度

所有扩展器都应该始终可见。

如果例如只打开最上面的扩展器，它的 DataGrid 有 100 行，DataGrid 的高度应该几乎是 StackPanel 的高度，但在底部，其他两个扩展器应该是可见的，并且最上面的 DataGrid 可以滚动。

当打开 2 或 3 个扩展器时，如果 DataGrids 中有足够的数据，StackPanel 应该“已满”。

我尝试绑定(bind)高度属性(用于最底层的扩展对象信息)

    <Expander Header="Object information" IsExpanded="{Binding ObjectInformationExpanded}">
        <DataGrid Name="ObjectInformationGrid" CanUserAddRows="False" CanUserResizeColumns="True" CanUserSortColumns="True" IsReadOnly="True" 
               ItemsSource="{Binding SelectedObjectAttributes}" AutoGenerateColumns="False" 
                  Height="{Binding ObjectInformationHeight, Mode=TwoWay}"
                  ScrollViewer.CanContentScroll="True"
                  ScrollViewer.VerticalScrollBarVisibility="Visible">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Field" Binding="{Binding Item1}" />
                <DataGridTextColumn Header="Value" Binding="{Binding Item2}" />
            </DataGrid.Columns>
        </DataGrid>
</Expander>

但是现在我的 ViewModel 有很多与展示(View)相关的代码，仍然没有将 StackPanel 的高度纳入计算。相反，我设置了硬编码的 double 值，这不是好的解决方案。

下面是一些简单的代码，用于在打开/关闭扩展器和更改 DataGrid 绑定(bind)集合时更新绑定(bind)高度属性(此处仅适用于最上面的 DataGrid):

   private void UpdateHeights()
   {
        if (SelectedObjectsExpanded == true)
        {
            if (_selectedObjects.Count == 0)
            {
                SelectedObjectsHeight = double.NaN;
            }
            else if (_selectedObjects.Count < 8)
            {
                SelectedObjectsHeight = 100;
            }
            else
            {
                if (ObjectInformationExpanded && SelectedSwitchesExpanded)
                    SelectedObjectsHeight = 100;
                else
                    SelectedObjectsHeight = 200;
            }
        }
        //...

谢谢!

Answer 1

会像 this工作？

基本思想是将所有 3 个 Expanders 放在一个包含 3 行的 Grid 中，并将每行的 RowDefinition.Height 绑定(bind)到 Expander.IsExpanded。如果展开器折叠(仅占用所需空间)，转换器用于将值设置为 Auto，如果扩展器展开(占用所有剩余空间)，则将值设置为 *。如果多行设置为 * 高度，则在它们之间平均分配空间)。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander1, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander2, Converter={x:Static MyBoolToGridSizeConverter}}" />
        <RowDefinition Height="{Binding IsExpanded, ElementName=Expander3, Converter={x:Static MyBoolToGridSizeConverter}}" />
    </Grid.RowDefinitions>

    <Expander Grid.Row="0" x:Name="Expander1">
        <DataGrid />
    </Expander>
    <Expander Grid.Row="1" x:Name="Expander2">
        <DataGrid />
    </Expander>
    <Expander Grid.Row="2" x:Name="Expander3">
        <DataGrid />
    </Expander>
</Grid>

public class BoolToGridSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        if (value is bool && (bool)value)
            return new GridLength(1, GridUnitType.Star);

        return GridLength.Auto;
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        // this is not needed
    }
}