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

Question

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

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

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

---

布局如下：

左扩展器/ 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>

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

感谢任何帮助。

Answer 1

第3行高度也应该成比例。为第一行和底行指定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;
    }