SilverlightShow: Using the ToggleButton control in Silverlight 2 Comments

RE: Using the ToggleButton control in Silverlight 2

( nikolayraychev) — Fri, 30 Oct 2009 09:25:11 +0200

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 2

( unexpectedkas) — Fri, 02 Oct 2009 12:44:21 +0200

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.

RE: Using the ToggleButton control in Silverlight 2

( nikolayraychev) — Wed, 01 Jul 2009 09:25:58 +0200

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

( Milind Soman) — Mon, 29 Jun 2009 12:34:10 +0200

Great post Nikolay, Thanks for your efforts.

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

RE: Using the ToggleButton control in Silverlight 2

( Dan) — Wed, 11 Feb 2009 11:41:05 +0200

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

( Dan) — Wed, 11 Feb 2009 11:37:18 +0200

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

( Dan) — Wed, 11 Feb 2009 09:47:03 +0200

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

( nikolayraychev) — Fri, 26 Sep 2008 03:40:13 +0200

Hi adriano,

I made the following example for you:

We have two animations defined by two storyboards:

    "animateEllipse1">

        
             Storyboard.TargetName="ellipse1"
             Storyboard.TargetProperty="Width"
             From="50" To="150" Duration="0:0:1" 
             AutoReverse="True" RepeatBehavior="Forever" />
    
    "animateEllipse2">
        
             Storyboard.TargetName="ellipse2"
             Storyboard.TargetProperty="Width"
             From="50" To="150" Duration="0:0:1" 
             AutoReverse="True" RepeatBehavior="Forever" />

They will be used to animate two ellipses:

"ellipse1" Grid.Row="0" Grid.Column="0" Height="50" Width="50" Fill="Green" >

"ellipse2" Grid.Row="0" Grid.Column="1" Height="50" Width="50" Fill="Red" >

And now about the 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!">

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:

"ToggleAnimation2.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="200">

        "animateEllipse1">

            
                 Storyboard.TargetName="ellipse1"
                 Storyboard.TargetProperty="Width"
                 From="50" To="150" Duration="0:0:1" 
                 AutoReverse="True" RepeatBehavior="Forever" />
        
        "animateEllipse2">
            
                 Storyboard.TargetName="ellipse2"
                 Storyboard.TargetProperty="Width"
                 From="50" To="150" Duration="0:0:1" 
                 AutoReverse="True" RepeatBehavior="Forever" />
        
    
    "LayoutRoot" Background="White">
        
            
            
        
        
            "100">
            "100">
        
        "ellipse1" Grid.Row="0" Grid.Column="0" Height="50" Width="50" 
            Fill="Green" >
        
        "ellipse2" Grid.Row="0" Grid.Column="1" Height="50" Width="50" 
            Fill="Red" >
        
        "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!">

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

( adriano) — Thu, 25 Sep 2008 04:26:12 +0200

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