Expander 结合 GridSplitter
Expander combined with GridSplitter
我正在尝试将我的 WPF window 分成两个“区域”,顶部和底部。
- 顶部区域包含一个网格。
- 底部区域包含一个扩展器。
两个区域之间应该有一个 GridSplitter,用户可以使用它来调整区域大小。
每个区域的内容应该使用该区域的全高。
默认展开扩展器。
当用户关闭扩展器时,底部区域应将其高度降低到折叠扩展器的高度。
这是我的代码:
<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>
有两件事不起作用:
扩展器并非全部可用space(不改变其高度)
当我关闭扩展器时,GridSplitter 不允许顶部区域使用所有可用的 space。
我怎样才能使这个工作?
一旦您与 GridSplitters
互动,他们就会在网格 row/column 定义中设置具体的相对或绝对 Height
/Width
值。因此,一旦折叠 Expander
,您应该将其行的 Height
设置为 GridLength.Auto
。
我正在尝试将我的 WPF window 分成两个“区域”,顶部和底部。
- 顶部区域包含一个网格。
- 底部区域包含一个扩展器。
两个区域之间应该有一个 GridSplitter,用户可以使用它来调整区域大小。
每个区域的内容应该使用该区域的全高。
默认展开扩展器。
当用户关闭扩展器时,底部区域应将其高度降低到折叠扩展器的高度。
这是我的代码:
<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>
有两件事不起作用:
扩展器并非全部可用space(不改变其高度)
当我关闭扩展器时,GridSplitter 不允许顶部区域使用所有可用的 space。
我怎样才能使这个工作?
一旦您与 GridSplitters
互动,他们就会在网格 row/column 定义中设置具体的相对或绝对 Height
/Width
值。因此,一旦折叠 Expander
,您应该将其行的 Height
设置为 GridLength.Auto
。