网格中的扩展器不会折叠

Question

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

Answer 1

您可以为有问题的 ColumnDefinition 创建样式：

当 Expander 展开时将 Width 设置为 0.3*
折叠时将 Width 设置为 Auto。

将 x:Name 分配给 Expander 并在绑定 Expander 的 IsExpanded 属性的样式中使用 DataTrigger ElementName 语法。使用 setter 作为默认 Width 值。

<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.

网格中的扩展器不会折叠

Expander in Grid does not collapse

wpf

xaml

expander

wpf-controls