CODEWITHSUNDEEP
wpfxaml
Ashish Agrawal
Ashish Agrawal

Reputation: 45

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

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.

Upvotes: -1

Views: 1238

Answers (1)

slugster
slugster

Reputation: 49974

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.

Upvotes: 2

Related Questions