Designing with Silverlight

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

msalsbery — Thu, 12 Mar 2009 13:35:47 GMT

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

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

AnRiehl — Thu, 12 Mar 2009 13:21:41 GMT

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

msalsbery — Wed, 11 Mar 2009 17:24:39 GMT

Something like this?

    <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>
            <Grid Grid.Row="1">
                <Grid x:Name="ContentArea_" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid x:Name="DataGridArea_" Margin="0" Background="Transparent" Grid.Column="0" >
                        <TextBlock Text="Content goes here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" />
                    </Grid>
                    <controls:Expander x:Name="TaskpaneExpander_" ExpandDirection="Left" IsExpanded="True" Grid.Column="1" >
                        <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>
                </Grid>
            </Grid>
        </Grid>
    </Grid>

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

AnRiehl — Wed, 11 Mar 2009 15:43:53 GMT

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.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock>Toolbar goes here</TextBlock>

</Grid>

<TextBlock>Content goes here</TextBlock>

</Grid>

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

<controls:HeaderedContentControl.Header>

</controls:HeaderedContentControl.Header>

<controls:HeaderedContentControl.Content>

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

</Grid>

</controls:HeaderedContentControl.Content>

</controls:Expander>

</StackPanel>

</Grid>

</UserControl>