WPF能否实现可调整大小的水平Expander？

Question

我是WPF的新手。我从这里找到了如何做一个可调整大小的垂直expander：Combine expander and grid (resizable expander)

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

有没有不需要复杂代码的方法？在两个网格行之间有一个glidsplitter，其中一个有expander

---

布局如下：

左侧的expander/gridsplitter工作正常。但底部的expander/gridsplitter却不行。如果没有gridsplitter，它就可以正常工作。

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

如果您移除中间行和网格分隔符，它可以正常运行，但无法调整大小。感谢您的任何帮助。

- Jonwd

---

你如何期望分割器影响底部固定高度？ - paparazzo

@Blam 这不是问题。一个可调整大小的水平扩展器（位于底部）。另一个问题，但未解决：https://dev59.com/AHDYa4cB1Zd3GeqPFN9J - Jonwd

@Blam 我删除了它，因为那不是问题所在。我已经尝试了几种方法。我认为扩展器并不是为了调整大小而设计的。 - Jonwd

Answer 1

下面的方法对我来说很有效。当展开时显示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;
    }

- pvoosten

Answer 2

第三行的高度也应当成比例变化。为第一行和底部行指定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>

- Anand Murali

---

谢谢您的回复。但也许我在寻求一些无法实现的东西？扩展器的工作方式与垂直扩展器不同。 - Jonwd