Search code examples
wpfgridsplitter

WPF Splitter visibility


<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding Path=CurrentNavigationView}" Visibility="{Binding NavigationPageVisibility}" Margin="2"/>
    <GridSplitter Grid.Row="1" Grid.Column="1" Width="3" Margin="1,6,1,6"  Visibility="{Binding NavigationPageVisibility}" HorizontalAlignment="Center" Background="{StaticResource NetApp_LightGray_Brush}" />
    <ContentControl    Grid.Row="1" Grid.Column="2" Margin="2" Visibility="{Binding WelcomePageVisibility}" Content="{Binding Path=CurrentWelcomeView}" />
</Grid>

In the above xaml i am setting the visibility of the 1st content control and splitter based on some condition in my ViewModel. But when in case i resize the splitter while running, then there is some empty space being shown before the last content control. I need the content control to occupy the complete real estate when i set the 1st content control and splitter to collapsed?

Appreciate the help.


Solution

  • The problem is that the GridSplitter messes with the ColumnDefinitions, once you grab it the first column will no longer be Auto but a concrete pixel value. Here is an example which shows this:

    <Grid Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="c0" Width="Auto"/>
            <ColumnDefinition Name="c1" Width="Auto"/>
            <ColumnDefinition Name="c2" Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Text="{Binding Width, ElementName=c0}"/>
        <TextBlock Grid.Column="2" Text="{Binding Width, ElementName=c2}"/>
        <GridSplitter Grid.Column="1" Width="5" ResizeBehavior="PreviousAndNext"/>
    </Grid>
    

    So if you want it to be collapsible again you need to return the Width to Auto.