Define two column in wpf (one should take whole area if one is collapsed)

Question

Please refer below code In below code panel 1 is working as expected (if panel2 is not visible panel 1 take full area)

but when I collapsed panel 1, Panel 2 is not occupying full space in parent grid.

<Window x:Class="SampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SampleApp"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:BoolToVisConv x:Key="boolovis" />
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>        
            <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" x:Name="panel1" Visibility="{Binding ElementName=chkbPanel1Visibiliby, Converter={StaticResource boolovis}, Path=IsChecked}">
                <Grid.Style>
                    <Style TargetType="Grid">
                            <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=panel2, Path=Visibility}" Value="Collapsed">
                                    <Setter Property="Grid.ColumnSpan" Value="2"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Grid.Style>

                <Grid Background="Yellow">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="1st Panle" />
                </Grid>
            </Grid>

            <Grid Grid.Column="1" x:Name="panel2" Visibility="{Binding ElementName=chkbPanel2Visibiliby, Converter={StaticResource boolovis}, Path=IsChecked}">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=panel1, Path=Visibility}" Value="Collapsed">
                                <Setter Property="Grid.Column" Value="0"/>
                                <Setter Property="Grid.ColumnSpan" Value="2"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
                <Grid Background="Green">
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="2nd Panel" />
                </Grid>
            </Grid>
            </Grid>
        <StackPanel Grid.Row="1">
            <CheckBox x:Name="chkbPanel1Visibiliby" Content="Display panel 1" IsChecked="True" />
            <CheckBox x:Name="chkbPanel2Visibiliby" Content="Display panel 2" IsChecked="True" />
    </StackPanel>
    </Grid>
</Window>



public class BoolToVisConv : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (bool)value == true ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Please have a look and provide your feedback.

score 1 · Answer 1 · edited May 23 '17 at 11:45

This is due to your column definitions. Make the first one Auto so that it uses as much room as it needs to, then make the second *:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>        
        <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" x:Name="panel1" Visibility="{Binding ElementName=chkbPanel1Visibiliby, Converter={StaticResource boolovis}, Path=IsChecked}">
            <Grid.Style>

Refer to this previous answer for a good explanation of what is going on with two * sized columns. Basically, Auto and explicit sizes take precedence over *, when you have multiple * sizes then space is allocated in order of their listing.

You might also be able to get away with simply specifying * on both columns, then ensure the visibility of the column is set to collapsed if its contents are collapsed.

Define two column in wpf (one should take whole area if one is collapsed)

1 Answers1