网格中的扩展器不会折叠

问题描述

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

解决方法

您可以为相关的 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。