我希望我的 Expander
列在展开时占据 30% 的宽度。我还希望 Expander
的列在折叠时缩小,而其他网格在保持比例的同时增加大小。
除了一些保证金,我希望第 1 列:30% 第 2 列和第 3 列各有 35%
我以为我需要一个 Expander
的自动列,但是没有告诉它应该有什么比例。如果我设置了一个比例,它要么不会缩小 Expander
,如果我更改对齐方式,我将无法获得正确的组合。
这是我当前的代码。矩形只是占位符。
<Grid>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Expander Background="Crimson" IsExpanded="False" ExpandDirection="Right" Grid.Row="1"
Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle Fill="Aquamarine" Width="Auto" HorizontalAlignment="Stretch"/>
</Expander>
<Rectangle Height="Auto" Fill="Coral" Width="Auto" Grid.Row="2" Grid.Column="3" />
<Rectangle Height="Auto" Fill="DarkOliveGreen" Width="Auto" Grid.Row="2" Grid.Column="2"/>
</Grid>
答案 0 :(得分:1)
您可以为相关的 ColumnDefinition
创建一个样式:
Width
展开时将 0.3*
设置为 Expander
Width
设置为 Auto
。为 x:Name
分配一个 Expander
并在将 DataTrigger
的 IsExpanded
属性与 Expander
语法绑定的样式中使用 ElementName
.对默认 Width
值使用 setter。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="{x:Type ColumnDefinition}">
<Setter Property="Width" Value="0.3*"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, ElementName=MyExpander}" Value="False">
<Setter Property="Width" Value="Auto"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Expander x:Name="MyExpander" Background="Crimson" IsExpanded="False" ExpandDirection="Right" Grid.Row="1"
Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle Fill="Aquamarine" Width="Auto" HorizontalAlignment="Stretch"/>
</Expander>
<Rectangle Height="Auto" Fill="Coral" Width="Auto" Grid.Row="2" Grid.Column="3" />
<Rectangle Height="Auto" Fill="DarkOliveGreen" Width="Auto" Grid.Row="2" Grid.Column="2"/>
</Grid>
收起 Expander
。
扩展Expander
。