c# - wpf 是否有可能有一个可调整大小的水平扩展器？

Question

我是 WPF 的新手。我能够从这里找到如何做一个可调整大小的垂直扩展器：组合扩展器和网格（可调整大小的扩展器）

所以我认为制作水平会很容易，我尝试了不同的方法但没有成功。

没有复杂的代码可以完成吗？在 2 个网格行之间有一个 glidsplitter，其中一个网格行有一个扩展器

---

布局如下所示：

左扩展器/网格分割器工作正常。但底部的扩展器/网格分离器没有。不过，它可以在没有网格分割器的情况下正常工作。

我的 XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="10" />
        <RowDefinition Height="Auto"  />
    </Grid.RowDefinitions>

    <DockPanel Grid.Row="0">
        <Expander ExpandDirection="Left" Header="">
            <Expander.Content>
                <Grid>
                    <!-- this works -->
                </Grid>
            </Expander.Content>
        </Expander>
        <TextBox AcceptsReturn="True" />
    </DockPanel>

    <GridSplitter Grid.Row="1" Height="10" HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"/>

    <DockPanel Grid.Row="2">
        <Expander ExpandDirection="Down" Header="Summary">
            <Expander.Content>
                <TextBox AcceptsReturn="True" />
            </Expander.Content>
        </Expander>
    </DockPanel>
</Grid>

如果删除中间行和 gridsplitter，它可以正常工作，但无法调整大小。

任何帮助表示赞赏。

Answer 1

第三行高度也应该成比例。指定MinHeight第一行和最后一行，以免它们完全收缩。

编辑的 XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="6*" MinHeight="100"/>
        <RowDefinition Height="10" />
        <RowDefinition Height="*"  MinHeight="50"/>
    </Grid.RowDefinitions>

    <DockPanel Grid.Row="0">
        <Expander ExpandDirection="Left" Header="">
            <Expander.Content>
                <Grid>
                    <!-- this works -->
                </Grid>
            </Expander.Content>
        </Expander>
        <TextBox AcceptsReturn="True" />
    </DockPanel>

    <GridSplitter Grid.Row="1" Height="2" HorizontalAlignment="Stretch"/>

    <DockPanel Grid.Row="2">
        <Expander ExpandDirection="Down" Header="Summary">
            <Expander.Content>
                <TextBox AcceptsReturn="True" />
            </Expander.Content>
        </Expander>
    </DockPanel>
</Grid>

Answer 2

以下对我有用。展开时显示GridSplitter，折叠时隐藏。

我在示例中使用填充窗格的椭圆，因为这样可以很容易地查看每个面板占用了多少空间。

Xaml

<Grid Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" Name="expanderRow"/>
    </Grid.RowDefinitions>
    <Ellipse Grid.Row="0" Fill="Black"></Ellipse>
    <Expander Grid.Row="2" ExpandDirection="Up" IsExpanded="False" Background="Yellow"
              Expanded="Expander_Expanded"
              Collapsed="Expander_Collapsed">
        <Ellipse Fill="Red"/>
    </Expander>
    <GridSplitter Grid.Row="1" Height="15" HorizontalAlignment="Stretch" Name="expander" Visibility="Collapsed"></GridSplitter>
</Grid>

背后的代码

    private GridLength expandedHeight = new GridLength(0.5, GridUnitType.Star);

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Expander_Expanded(object sender, RoutedEventArgs e)
    {
        expanderRow.Height = expandedHeight;
        expander.Visibility = Visibility.Visible;
    }

    private void Expander_Collapsed(object sender, RoutedEventArgs e)
    {
        expandedHeight = expanderRow.Height;
        expanderRow.Height = GridLength.Auto;
        expander.Visibility = Visibility.Collapsed;
    }