WPF

Question

所以，我有 2 个扩展器。一个应该在控件的顶部，一个应该在控件的底部。

当我单击顶部展开器时，底部应该折叠，顶部应该向下展开并占用所有可用空间 space，而无需移除底部或将底部推出页。相反，当我单击底部扩展器时，顶部扩展器应该折叠，底部扩展器应该向上扩展并占用控件上所有可用的 space。

我遇到的问题是视觉上的，我知道如何在我的 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，但顶部的 Expander 内容没有垂直滚动条，因此如果我有很多项目 - 我无法向下滚动。

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

Answer 1

您需要为 RowDefinition 的 Height 设置 * 和 Auto 之间的切换。您可以使用两个 Styles:

<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>

WPF - 使两个扩展器填充可用 space 取决于显示的是哪一个

WPF - Making Two Expanders fill available space depending on which one is shown

xaml

mahapps.metro