BUTTON HANDLERS IN XAML

marcel ethan

Total Post:105

Points:735
Posted by  marcel ethan
WPF 
WPF
 1089  View(s)
Ratings:
Rate this:
Hi Mindstick!

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


  1. shreesh chandra shukla

    Post:105

    Points:735
    Re: Button handlers in XAML

    Hi!

    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>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!