Expander in Grid does not collapse - wpf

Question

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>

Answer 1

You can create a style for the ColumnDefinition in question that:
Sets the Width to 0.3* when the Expander is expanded
Sets the Width to Auto, when it is collapsed.
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.
Expanded Expander.