Resizing only open expanders

Question

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?

Answer 1

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: