Sunday, February 12, 2012

New Silverlight Video Tutorial: Make a Sliding Panel ALL in Blend (NO Code-Behind) with ONE Toggle Button

Hello All,
In my last two videos I showed how to make a sliding panel all in Blend, but I had to use two Buttons, one that would slide the panel in and one that would slide it out. In the Storyboards for SlideIn & SlideOut I just Collapsed the respective Button. I couldn’t figure out how to do it with only one Button.
So in my next video I showed how to slide the panel in/out with only one Button but had to switch over to Visual Studio and create a property called something like PanelIsShowing and then use that to run the appropriate Storyboard (Slide in or Slide out).
Then someone gave me the idea to use a Toggle Button. And then another reader asked that I make a new Video Tutorial showing how to use ONE (Toggle) Button and do it all in Blend.
So, that is exactly what I did. I:
1. Created a Rectangle for my sliding panel (and put sample data (ListBox) so it would havesome content;
2. Created an Ellipse and turned it into a ToggleButton;
3. Edited the built in Checked and Unchecked Visual States of the newly created Toggle Button (made the arrow “>” change directions depending on if it was Checked or Unchecked.
4. Created ShowPanel and HidePanel Storyboards;
5. Used two ControlStoryboard Behaviors and added them to the ToggleButton;
6. On Checked I ran the HidePanel Storyboard;
7. On Unchecked I ran the ShowPanel Storyboard (I had to play with these options to get it exactly right but I got it working perfectly);
So there you have it a way to make a Sliding Panel using one ToggleButton ALL in Blend, using a custom ToggleButton with custom Checked and Unchecked Visual States, Storyboards and ControlStoryboard Actions.
The video is about 20 minutes but most of that was me trying to figure out what Storyboard needed to be hooked up to the Checked vs Unchecked States. Watching me make mistakes will help you to avoid them yourself, or so I hope :)
So enjoy!
Victor Gaudioso
Founder, President, Organizer
Brought to you by the Los Angeles Silverlight Usergroup (

2 Trackbacks / Pingbacks for this entry

No comments:

Post a Comment