(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Using the ToggleButton control in Silverlight

(1 votes)
Nikolay Raychev
>
Nikolay Raychev
Joined Mar 28, 2008
Articles:   22
Comments:   58
More Articles
10 comments   /   posted on Jun 04, 2008
Categories:   Controls

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


Subscribe

Comments

  • -_-

    RE: Using the ToggleButton control in Silverlight 2


    posted by adriano on Sep 25, 2008 04:26

    Hi I am a designer....

    I am trying to figure out how to use code to lauch my animations in Silverlight.

    I would like to use a toggle button: first click lauch anim1, second click launch anim2

    could you show me how to do it?

    I mean what I should configure in Visual studio for XAML and CS file

    I hope you can help :)

     

    Thanks!

    adriano     adrianotar@fastwebnet.it

  • nikolayraychev

    RE: Using the ToggleButton control in Silverlight


    posted by nikolayraychev on Sep 26, 2008 03:40

    Hi adriano,

    I made the following example for you:

    We have two animations defined by two storyboards:

    <UserControl.Resources>
        <Storyboard x:Name="animateEllipse1">
            <DoubleAnimation
                 Storyboard.TargetName="ellipse1"
                 Storyboard.TargetProperty="Width"
                 From="50" To="150" Duration="0:0:1" 
                 AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
        <Storyboard x:Name="animateEllipse2">
            <DoubleAnimation
                 Storyboard.TargetName="ellipse2"
                 Storyboard.TargetProperty="Width"
                 From="50" To="150" Duration="0:0:1" 
                 AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
    </UserControl.Resources>

    They will be used to animate two ellipses:

    <Ellipse x:Name="ellipse1" Grid.Row="0" Grid.Column="0" Height="50" Width="50" Fill="Green" >
    </Ellipse>
    <Ellipse x:Name="ellipse2" Grid.Row="0" Grid.Column="1" Height="50" Width="50" Fill="Red" >
    </Ellipse>

    And now about the ToggleButton:

    <ToggleButton Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked" 
        Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Width="200" Height="40" 
        Content="Click me once! Click me twice!">
    </ToggleButton>

    We attach to the Checked and Unchecked events providing the names of the event handlers. These event handlers must be defined in the Code behind (the .cs file):

    private void ToggleButton_Checked( object sender, RoutedEventArgs e )
    {
        this.animateEllipse2.Stop();
        this.animateEllipse1.Begin();
    }
     
    private void ToggleButton_Unchecked( object sender, RoutedEventArgs e )
    {
        this.animateEllipse1.Stop();
        this.animateEllipse2.Begin();
    }

    In both handlers we just call the Stop method of one of the storyboards which will stop the animation and then call the Start method of the other StoryBoard  to start the other animation.

    That's all, I hope that this example will help you.

    Here is the whole XAML:

    <UserControl x:Class="ToggleAnimation2.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="400" Height="200">
        <UserControl.Resources>
            <Storyboard x:Name="animateEllipse1">
                <DoubleAnimation
                     Storyboard.TargetName="ellipse1"
                     Storyboard.TargetProperty="Width"
                     From="50" To="150" Duration="0:0:1" 
                     AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
            <Storyboard x:Name="animateEllipse2">
                <DoubleAnimation
                     Storyboard.TargetName="ellipse2"
                     Storyboard.TargetProperty="Width"
                     From="50" To="150" Duration="0:0:1" 
                     AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"></RowDefinition>
                <RowDefinition Height="100"></RowDefinition>
            </Grid.RowDefinitions>
            <Ellipse x:Name="ellipse1" Grid.Row="0" Grid.Column="0" Height="50" Width="50" 
                Fill="Green" >
            </Ellipse>
            <Ellipse x:Name="ellipse2" Grid.Row="0" Grid.Column="1" Height="50" Width="50" 
                Fill="Red" >
            </Ellipse>
            <ToggleButton Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked" 
                Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Width="200" Height="40" 
                Content="Click me once! Click me twice!">
            </ToggleButton>
        </Grid>
    </UserControl>

    and also the code behind:

    namespace ToggleAnimation2
    {
        public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();
            }
     
            private void ToggleButton_Checked( object sender, RoutedEventArgs e )
            {
                this.animateEllipse2.Stop();
                this.animateEllipse1.Begin();
            }
     
            private void ToggleButton_Unchecked( object sender, RoutedEventArgs e )
            {
                this.animateEllipse1.Stop();
                this.animateEllipse2.Begin();
            }
        }
    }
  • -_-

    RE: Using the ToggleButton control in Silverlight 2


    posted by Dan on Feb 11, 2009 11:37

    I need the toggle button to change the text of the button when it changes between the checked and unchecked states!  It allows gradient change but will not let me toggle back and forth between texts.

     

    Dan

  • -_-

    RE: Using the ToggleButton control in Silverlight 2


    posted by Dan on Feb 11, 2009 11:41

    I ended up making two text boxes with the labels "Expand" and "Collapse" and setting the opacity to 0% when I didn't want it displayed.

  • -_-

    RE: Using the ToggleButton control in Silverlight 2


    posted by Milind Soman on Jun 29, 2009 12:34

    Great post Nikolay, Thanks for your efforts.

    Can i use this toggle button for different UI controls say Play/Pause buttons in media player?

  • nikolayraychev

    RE: Using the ToggleButton control in Silverlight 2


    posted by nikolayraychev on Jul 01, 2009 09:25

    Hi, Milind

    You sure can use the ToggleButton for Play/Pause functionality. You just need to attach to the Checked and Unchecked events of the button as I showed in the example above and just call the Play an Pause methods of thye MediaElement.

  • -_-

    RE: Using the ToggleButton control in Silverlight 2


    posted by unexpectedkas on Oct 02, 2009 12:44
    Hi,

     I would like to know if there is any way to implement that funcitonality directly in XAML. I've readed some examples about databinding but its not clear for me.

    Any help would be appreciated.

  • nikolayraychev

    RE: Using the ToggleButton control in Silverlight 2


    posted by nikolayraychev on Oct 30, 2009 09:25

    unexpectedkas, you can try somthing with XAML Element Binding. Here you can se what Emo wrote about it:

    http://www.silverlightshow.net/tips/XAML-Element-Binding.aspx

  • -_-

    RE: Using the ToggleButton control in Silverlight


    posted by sanjay on Mar 09, 2011 07:00
    this is good features
  • -_-

    RE: Using the ToggleButton control in Silverlight


    posted by sanjay on Mar 09, 2011 07:02

    Hi I am a designer....

    I am trying to figure out how to use code to lauch my animations in Silverlight.

    I would like to use a toggle button: first click lauch anim1, second click launch anim2

    could you show me how to do it?

    I mean what I should configure in Visual studio for XAML and CS file

    I hope you can help :)

     

    Thanks!

     

    sanjay saxena

    emial address:- er_saxena@yahoo.ca

Add Comment

Login to comment:
  *      *