Home > DeveloperSection > Forums > Button handlers in XAML
marcel ethan
marcel ethan

Total Post:105

Points:735
Posted on    August-16-2013 6:27 AM

 WPF WPF 
Ratings:


 1 Reply(s)
 839  View(s)
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




shreesh chandra shukla
shreesh chandra shukla

Total Post:105

Points:735
Posted on    August-17-2013 6:48 AM

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>


Don't want to miss updates? Please click the below button!

Follow MindStick