Silverlight - Expander Control with ListBox, 100% Height

Question

Im trying to put 4 expander controls inside a Grid with 4 rows, the expander control contains a Grid and a ListBox (Currently holding some sample data).

Ideally when an expander is expanded I want it to fill all the available space without pushing the remaining expanders off the screen or the list box going off the screen. Can anyone think of a way of adapting the XAML below or updating the XAML below to achieve this?

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource ExpanderData}}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.246*"/>
                <RowDefinition Height="0.754*"/>
            </Grid.RowDefinitions>
            <Grid Margin="0" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.275*"/>
                    <ColumnDefinition Width="0.725*"/>
                </Grid.ColumnDefinitions>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <toolkit:Expander x:Name="Expander1" Header="One" IsExpanded="False">
                        <Grid Background="#FFE5E5E5">
                            <ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
                        </Grid>
                    </toolkit:Expander>
                    <toolkit:Expander x:Name="Expander2" Header="Two" IsExpanded="True" VerticalAlignment="Top" Grid.Row="1">
                        <Grid Background="#FFE5E5E5">
                            <ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}"/>
                        </Grid>
                    </toolkit:Expander>
                    <toolkit:Expander x:Name="Expander3" Header="Three" VerticalAlignment="Top" Grid.Row="2" IsExpanded="False">
                        <Grid Background="#FFE5E5E5">
                            <ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate2}" ItemsSource="{Binding Collection}"/>
                        </Grid>
                    </toolkit:Expander>
                    <toolkit:Expander x:Name="Expander4" Header="Four" VerticalAlignment="Top" Grid.Row="3" IsExpanded="False">
                        <Grid Background="#FFE5E5E5">
                            <ListBox Margin="0" ItemTemplate="{StaticResource ItemTemplate3}" ItemsSource="{Binding Collection}"/>
                        </Grid>
                    </toolkit:Expander>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</UserControl>

Joel Cochran Joel Cochran · Accepted Answer · 2011-03-17T20:29:25

I'd probably use a DockPanel instead of a Grid - for Silverlight you'll have to get it from the Silverlight Toolkit (http://silverlight.codeplex.com) - I know you already have it, I'm just referencing it for the archives. Uncheck the "LastChildFill" property and dock all the children to Top.

It's tough to test without adequate data, but what if you just had one Expander open at a time and set the MaxHeight of each Expander to the remaining available space?

Silverlight - Expander Control with ListBox, 100% Height

1 Answers