Resize control next to expander depending on expanded/collapsed state of expander

03-11-2009 11:43 AM |

Hi All,

I want to create a page that fills the whole available browser window. On top there should be a toolbar below the toolbar an area with the content itself on the left side and a collapseable navigation on the right. The content should always use most of the available space on the screen. Unfortunately my XAML doesn't work. Experimented with the HorizontalAlignment="stretch" on almost all elements without success :-(
It would be really cool if you could give me a hint on this.

Cheers,
Andreas 

Here is my XAML:

    <Grid ShowGridLines="True" x:Name="LayoutRoot" Background="White">

        <Grid ShowGridLines="True" x:Name="TemplateArea_" Background="Transparent">

            <Grid.RowDefinitions>

                <RowDefinition Height="30"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid x:Name="ToolbarArea_" Height="30" Grid.Row="0">

                <Grid Background="#bdd3ef" Grid.Column="0" Grid.Row="0">

                    <TextBlock>Toolbar goes here</TextBlock>

                </Grid>

            </Grid>

            <StackPanel x:Name="ContentArea_" Orientation="Horizontal" Grid.Row="1">

                <Grid x:Name="DataGridArea_" Margin="0" Background="Transparent" VerticalAlignment="Stretch">

                    <TextBlock>Content goes here</TextBlock>

                </Grid>

                <controls:Expander x:Name="TaskpaneExpander_" ExpandDirection="Left" IsExpanded="True" >

                    <controls:HeaderedContentControl.Header>

                        <TextBlock TextAlignment="Center">Exp/Col</TextBlock>

                    </controls:HeaderedContentControl.Header>

                    <controls:HeaderedContentControl.Content>

                        <Grid x:Name="DrilldownArea_" Margin="3" Background="#bdd3ef">

                            <TextBlock Grid.Row="0">Collapseable Navigation Pane</TextBlock>

                        </Grid>

                    </controls:HeaderedContentControl.Content>

                </controls:Expander>

            </StackPanel>

        </Grid>

</UserControl>

Re: Resize control next to expander depending on expanded/collapsed state of expander

03-12-2009 9:21 AM |

Thanks Mark,

it works perfectly fine as a standalone XAML - but it does not seem to work in our framework. Very strange, but thanks for the answer - I'll use this as a basis for the new stuff I'm trying. The trick was replacing the StackPanel with a Grid and then defining two columns - one with width "Auto" the other one with widdth "*", I guess. Thanks!

Andreas Riehl

Re: Resize control next to expander depending on expanded/collapsed state of expander

03-12-2009 9:35 AM |

AnRiehl:

The trick was replacing the StackPanel with a Grid

Correct.  The children of the stackpanel don't expand out to fill the stackpanel, but using a Grid, the size of the children can be controlled relative to the Grid.

Cheers,
Mark