扩展器与GridSplitter结合 [英] Expander combined with GridSplitter

问题描述

我正在尝试将WPF窗口分为顶部和底部两个区域".

I’m trying to split my WPF window into two "areas", top and bottom.

• 顶部区域包含一个网格.
• 底部包含一个扩展器.

两个区域之间应该是一个GridSplitter，用户可以使用它来调整区域的大小.
每个区域的内容应使用该区域的全部上限.

Between the two areas should be a GridSplitter which the user can use to resize the areas.
The content of each area should use the full high of the area.

默认情况下，扩展器被扩展.
当用户关闭扩展器时，底部区域的高度应减小到折叠的扩展器的高度.

By default, the expander is expanded.
When the user closes the expander, the bottom area should reduce its height to the height of the collapsed expander.

这是我的代码:

<Window
    x:Class="App.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Shell" Height="800" Width="1200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Name="MainContentGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <!-- Top area -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Row="0" Grid.Column="0">1</Button>
                <Button Grid.Row="1" Grid.Column="0">2</Button>
                <Button Grid.Row="0" Grid.Column="1">3</Button>
                <Button Grid.Row="1" Grid.Column="1">4</Button>
            </Grid>
            <GridSplitter Grid.Row="1" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"></GridSplitter>
            <!-- Bottom area -->
            <Expander Grid.Row="1" Margin="0,5,0,0" IsExpanded="True" Height="Auto" VerticalAlignment="Stretch">
                <Border Background="Red" Height="Auto" MinHeight="100" VerticalAlignment="Stretch"></Border>
            </Expander>
        </Grid>
        <!-- Application Status Region -->
        <ContentControl prism:RegionManager.RegionName="{x:Static local:RegionNames.StatusRegion}" Grid.Row="1" />
    </Grid>
</Window>

两件事不起作用:

• 扩展器并不会占用所有可用空间(不会更改其高度)

• The expander does not all available space (does not change its height)

当我关闭扩展器时，GridSplitter不允许顶部区域使用所有可用空间.

When I close the expander, the GridSplitter does not allow the top area to use all the space available.

我该如何进行这项工作?

How can I make this work?

推荐答案

与GridSplitters交互后，它们会在网格行/列定义中设置具体的相对或绝对Height/Width值.因此，一旦折叠Expander，则应将其行的Height设置为GridLength.Auto.

Once you interact with GridSplitters they set concrete relative or absolute Height/Width values on the grid row/column definitions. So once you collapse the Expander you should set its row's Height to GridLength.Auto.

这篇关于扩展器与GridSplitter结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！