wpfxamlwpf-controlsexpander

Expander in Grid does not collapse

I want my Expandercolumn to take 30% width when expanded. I also want the column of the Expander to shrink when collapsed and the other grids to increase size while keeping their proportion. Aside of some margin I want Column 1: 30% Column 2 and 3 to have 35% each I thought I need an auto column for the Expander, but then nothing tells it what proportions it should have. If I set a proportion, it does either not shrink the Expanderand if I change the alignments, I can't get the right combination.

This is my current code. The rectangles are just placeholders.

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

  • You can create a style for the ColumnDefinition in question that:

    Assign an x:Name to the Expander and use a DataTrigger in the style that binds the IsExpanded property of Expander with ElementName syntax. Use a setter for the default Width value.

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

    Collapsed Expander.

    Collapsed Expander.

    Expanded Expander.

    Expanded Expander.