wpf 是否可以有一个可调整大小的水平扩展器？

wpf is it possible to have a resizable horizontal expander?

提问by OsakaHQ

I'm new to WPF. I was able to found out how to do a resizable vertical expander from here: Combine expander and grid (resizable expander)

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

So I thought making a horizontal would be easy, I have tried different ways with no success.

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

Can it be done without complex code? To have a glidsplitter between 2 grid rows which one of them has an expander

不用复杂的代码能做到吗？在 2 个网格行之间有一个滑翔机，其中一个有扩展器

---

---

The layout looks like this:

布局如下所示：

Left expander/gridsplitter works fine. But the expander/gridsplitter at the bottom does not. It works fine without a gridsplitter though.

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

My XAML:

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

If you remove the middle row and the gridsplitter, it works fine but it's not resizable.

如果删除中间行和网格分割器，它可以正常工作，但不能调整大小。

Any help is appreciated.

任何帮助表示赞赏。

回答by Anand Murali

The 3rd rows height should also be proportional. Specify MinHeightfor the first and bottom rows so that they don't completely shrink.

第三行的高度也应该成比例。指定MinHeight第一行和底部行，使它们不会完全缩小。

Edited XAML:

编辑的 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>

回答by pvoosten

The following works for me. The GridSplitteris shown when expanded and hidden when collapsed.

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

I use ellipses that fill the panes in the example, because that makes it easy to see how much space is taken by each panel.

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

Xaml

xml

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

Code behind

背后的代码

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