WPF - 根据显示哪个可展开项来使两个可展开项填充可用空间

Question

我有两个展开器，一个应该在控件的顶部，一个应该在控件的底部。

当我点击顶部的展开器时，底部应该折叠，顶部应向下扩展并占用所有可用空间，而不会将底部从页面中移除或推出。反之，当我点击底部展开器时，顶部的要折叠，底部的应向上扩展并占据控件上的所有可用空间。

我遇到的问题是视觉问题，我知道如何在ViewModel中绑定展开器的IsExpanded并相应地更新它们。我不知道要使用哪些控件以及如何正确设置它们。

我尝试使用网格(Grid)，但是如果我将行高设置为*，无论我做什么，它们的高度(当然)都保持不变，内容仅扩展到行允许的高度。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>

    <Expander
        Grid.Row="0"
        Margin="5"
        Header="Server Connections"
        IsExpanded="{Binding IsTopExpanded}">

    *** ListBox With Content ***
    </Expander>

    <Expander
        Grid.Row="1"
        Margin="5"
        Header="Server Browser"
        IsExpanded="{Binding IsBottomExpanded}">

    *** Some Content ***
    </Expander>
</Grid>

我尝试使用StackPanel，但是上面的可扩展内容不会出现垂直滚动条，因此如果我有很多项，我无法向下滚动。

希望我说得清楚，如果不清楚，请告诉我。:)

- Desomph

Answer 1

您需要在RowDefinition的Height属性之间设置开关，可以使用两个Style实现：*和Auto。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="*" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="Auto" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
    </Grid.RowDefinitions>

    <Expander
        Grid.Row="0"
        Margin="5"
        Header="Server Connections"
        IsExpanded="{Binding IsTopExpanded}">
        <TextBlock>*** ListBox With Content ***</TextBlock>
    </Expander>

    <Expander
        Grid.Row="1"
        Margin="5"
        Header="Server Browser"
        IsExpanded="{Binding IsBottomExpanded}">
        <TextBlock>*** Some Content ***</TextBlock>
    </Expander>
</Grid>

- mm8

---

像往常一样，MM8来解救了。 再次感谢！ - TheITDejan

如果使用超过2个扩展器会发生什么？ - Vidar

非常棒的答案，我已经成功地借鉴并调整为适用于我的扩展问题。 - AndyUK