WPF ToggleButton Control
Toggle Button is known as a control with the help of which we can move from one state to another state. CheckBox and RadioButton are an example of the Toggle Button.
Here we are going to take an example of the ToggleButton Control. In this example, we will change the text of the toggle button after clicking on this button. That is why the toggle button shows the current state.
For the toggle button, we can use trigger property, which we will use to fire when the property of the
IsChecked
is changed.
The XAML code for the
ToggleButton control
is given below:
<Window x:Class="WPFToggleButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFToggleButton"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<StackPanel HorizontalAlignment="Center" Margin="15">
<Label Content="Click to arm the electric fence that surrounds your cube:"/>
<StackPanel>
<ToggleButton HorizontalAlignment="Center" Margin="5" Padding="5" Width="80">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="Disarmed"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="ARMED"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</StackPanel>
</StackPanel>
</Window>
The output of the above code before clicking on the toggle button will look like as shown in the below screenshot:
Output
Now when we click on the toggle button, the text will change and the output of the above code will look like as shown in the below screenshot:
OUTPUT
Now we will take another example of the ToggleButton
Now we will write the XAML code to create and initialize the togglebutton with some properties.
MainWindow.XAML
<Window x:Class="ToggleButtonControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ToggleButtonControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="Aqua">
<StackPanel Orientation = "Vertical">
<ToggleButton x:Name = "cb2" Content = "Toggle"
Checked = "HandleCheck" Unchecked = "HandleUnchecked"
Margin = "100" Width = "100" HorizontalAlignment = "Center"/>
<TextBlock x:Name = "text2" Margin = "10" Width = "300"
HorizontalAlignment = "Center" Height = "50" FontSize = "24"/>
</StackPanel>
</Grid>
</Window>
Here is the
C#
implementation of the checked and unchecked events.
MainWindow.XAML.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace ToggleButtonControl
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public sealed partial class MainWindow : Window
public MainWindow()
InitializeComponent();
this.InitializeComponent();
private void HandleCheck(object sender, RoutedEventArgs e)
text2.Text = "Button is Checked";
private void HandleUnchecked(object sender, RoutedEventArgs e)
text2.Text = "Button is unchecked.";
When we compile and execute the above code, after the execution of the code, the output will look like as shown in the below screenshot:
OUTPUT
Next Topic
WPF ToolTip Control
