Question

I have simple WPF layout task and looking to avoid code-behind if possible.

I have two panels left and right. When I am colapsing left panel – right panel gets stretched …
this is my xaml:

        <Grid Name="gridContainer">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="5"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <StackPanel Background="Aqua" Grid.Column="0" Name="leftPanel" >
                <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
            </StackPanel>

            <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>

            <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
                <Button Click="LeftButton_Click" Margin="10">Close Left Panel</Button>                    
            </StackPanel>
        </Grid>

This is code-behind:

    private void LeftButton_Click(object sender, RoutedEventArgs e)
    {
        if(leftPanel.Visibility == System.Windows.Visibility.Visible)
        {
            gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
            leftPanel.Visibility = System.Windows.Visibility.Collapsed;
            leftSplitter.Visibility = System.Windows.Visibility.Collapsed;
        }
        else
        {
            gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
            leftPanel.Visibility = System.Windows.Visibility.Visible;
            leftSplitter.Visibility = System.Windows.Visibility.Visible;
        }
    }

I am wondering, are there any way to avoid the code behind here? and acomplish this task in XAML only?

Thanks for advice

Answer 1

You can do it like this without code-behind.

First we need to set up a specific styling that will allow us to toggle the visibility for the StackPanel.

<Window.Resources>
    <Style x:Key="panelStyle" TargetType="{x:Type StackPanel}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="True">
                <Setter Property="StackPanel.Visibility" Value="Collapsed" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="False">
                <Setter Property="StackPanel.Visibility" Value="Visible" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Next we do some minor modifications in your original code.

Add the styling and bind the Tag of the StackPanel to the Button.

<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >

Change the Button to a ToggleButton and assign it a name.

<ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>

It should look something like this ones you are done.

<Grid Name="gridContainer">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >
        <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>

    </StackPanel>

    <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>

    <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
        <ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>           
    </StackPanel>
</Grid>