I have 3 expanders in a window and I want to know if there is a way to have it so that if I have expander 2 and 3 open but not 1 it will only stretch those 2. It's current stretching all three equally. Also, when they are closed the content closes but the column stays the same width as if it was open.
What is the best way to get them to only stretch when expanded and go back to the small size of 10 pixels wide when collapsed?
You could set Triggers
on the ColumnDefinitions
to set the Width
to Fixed when the Expander
is closed and set to proportional when the Expander
is open.
Example:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="20" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, ElementName=expander1}" Value="True">
<Setter Property="Width" Value="20*" />
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="20" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, ElementName=expander2}" Value="True">
<Setter Property="Width" Value="20*" />
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="ColumnDefinition">
<Setter Property="Width" Value="20" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, ElementName=expander3}" Value="True">
<Setter Property="Width" Value="20*" />
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Expander Name="expander1" Grid.Column="0" Header="Expander1" />
<Expander Name="expander2" Grid.Column="1" Header="Expander2" />
<Expander Name="expander3" Grid.Column="2" Header="Expander3" />
</Grid>
Result: