This article is compatible with the latest version of Silverlight.
Introduction
The ToggleButton is a Silverlight control which allows the user to change its state. It is the base class for CheckBox and RadioButton controls but it can also be used as a standalone control.
See also:
Button Controls Article
Button Article
HyperlinkButton Article
RepeatButton Article
Overview
To demonstrate the use of the ToggleButton I’ll give an example:
XAML:
<UserControl x:Class="ToggleButton2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Canvas x:Name="cnvLayoutRoot" Background="White">
<TextBlock x:Name="tblText" Canvas.Top="20" Canvas.Left="30" Text="Not clicked yet."></TextBlock>
<ToggleButton x:Name="tbtnTest" Checked="tbtnTest_Checked" Unchecked="tbtnTest_Unchecked" Canvas.Top="60" Canvas.Left="30" Content="Change state"></ToggleButton>
</Canvas>
</UserControl>
Code behind:
private void tbtnTest_Checked( object sender, RoutedEventArgs e )
{
this.tblText.Text = "Checked";
}
private void tbtnTest_Unchecked( object sender, RoutedEventArgs e )
{
this.tblText.Text = "Unchecked";
}
The most important events of the ToggleButton are the Checked and Unchecked. The Checked event occurs when the state is changed to checked while the Unchecked event occurs when the state is changed to unchecked. The state is changed when you click on the button. The IsChecked property is true when the state is checked and false – when the state is unchecked. In the previous example we just attached to the events and changed the Text of the TextBlock in order to represent the current state of the ToggleButton.
An interesting property is the IsThreeState. When it is set to true the ToggleButton has one more state – Indetermined. When the button is in this state the IsChecked property is null. The following example demonstrates it:
XAML:
<ToggleButton x:Name="tbtnTest" IsThreeState="True" Indeterminate="tbtnTest_Indeterminate" Checked="tbtnTest_Checked" Unchecked="tbtnTest_Unchecked" Canvas.Top="60" Canvas.Left="30" Content="Change state"></ToggleButton>
Code behind:
private void tbtnTest_Indeterminate( object sender, RoutedEventArgs e )
{
this.tblText.Text = "Indetermined";
}
We just set this property to true and attached to the Indeterminate event in order to change the TextBlock’s text to correspond to the state of the ToggleButton.
Here the result is:
If you want to see how you can attach to the Click event or use ClickMode property visit the Button Controls Article. These members are inherited from the ButtonBase class. The example there is with a Button but it is the same with a ToggleButton.
Example
As an example I’ll give the following simple gender control:
Instead of using radio buttons you can change gender for example in a register form with just clicking one button and set it to female, male or not specified.
Here the XAML is:
<UserControl x:Class="ToggleButton2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Canvas x:Name="cnvLayoutRoot" Background="White">
<ToggleButton x:Name="tbtnGender" Checked="tbtnGender_GenderChanged" Unchecked="tbtnGender_GenderChanged" Indeterminate="tbtnGender_GenderChanged" IsThreeState="True" Canvas.Top="35" Canvas.Left="20" Content="Gender: "></ToggleButton>
<TextBlock x:Name="tblGender" Canvas.Top="40" Canvas.Left="80"></TextBlock>
</Canvas>
</UserControl>
We just have a ToggleButton with a single event handler specified for Checked, Unchecked and Indeterminate events and a TextBlock.
Here is the code behind:
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
this.tbtnGender.IsChecked = null;
this.SetGenderText();
}
private void tbtnGender_GenderChanged( object sender, RoutedEventArgs e )
{
this.SetGenderText();
}
private void SetGenderText()
{
switch ( this.tbtnGender.IsChecked )
{
case null:
this.tblGender.Text = "Not specified";
break;
case true:
this.tblGender.Text = "Male";
break;
case false:
this.tblGender.Text = "Female";
break;
}
}
}
The SetGenderText method sets the text of the TextBlock according to the state of the ToggleButton. In the event handler for the Checked, Unchecked and Indeterminate events we simply call this method. In the constructor of the Page we set the state of the ToggleButton to null (indeterminated) and call the SetGenderText method to change the text appropriately.
Conclusion
This article is just a brief description of the key features of the ToggleButton control. It targets the developer who has just started with the Silverlight controls. Any comments are welcome.
Reference
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.togglebutton(VS.95).aspx