---
title: "Button handlers in XAML"  
description: "Button handlers in XAML"  
author: "marcel ethan"  
published: 2013-08-16  
updated: 2013-08-17  
canonical: https://www.mindstick.com/forum/1388/button-handlers-in-xaml  
category: "wpf"  
tags: ["wpf"]  
reading_time: 2 minutes  

---

# Button handlers in XAML

Hi [Mindstick](https://yourviews.mindstick.com/view/84668/how-mindstick-is-used-for-marketing-purposes)!

I have [simple](https://yourviews.mindstick.com/story/1469/5-simple-ways-to-stay-fit-amp-healthy) WPF [layout](https://www.mindstick.com/articles/12853/android-layout-and-its-type) 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](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)="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](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand)="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>

<[Button Click](https://www.mindstick.com/forum/790/form-gets-submiited-twice-on-button-click)="LeftButton_Click" Margin="10">Close Left Panel</Button>

</StackPanel>

</Grid>

This is code-behind:

[private](https://www.mindstick.com/blog/11097/java-access-modifiers-the-public-and-the-private-modifiers) 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](https://www.mindstick.com/forum/2199/call-javascript-s-function-from-code-behind) here? and acomplish this task in XAML only?

Thanks for [advice](https://yourviews.mindstick.com/view/50528/filament-advice-5-things-to-consider-before-you-buy-a-filament)

\

## Replies

### Reply by shreesh chandra shukla

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](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net).

<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>


---

Original Source: https://www.mindstick.com/forum/1388/button-handlers-in-xaml

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.