How to Make Sliding Panels with Only One Button (Using Code-Behind (C#)

In my last tutorial I showed you how to make a sliding panel (#72: http://wp.me/pWN5M-bu or direct URL: http://wp.me/pWN5M-eG).  What I did was to have two identical buttons, one to slide the panel in and one to slide it out.  I just made the appropriate one collapsed when the user clicked one. I did this all in Blend using the ControlStoryboard Behavior.

But my good friend Todd Knudsen challenged me over Twitter to make it all work using only one Button.  I tried using the DataStore, changed all Storyboards to Visual States and using the ChangeDataStoreVale Action.  No matter what I tried I could not get it to work.  So I decided I would have to use code-behind (C#) in this situation and that is what I show how to do int his quick video.  So take a look and enjoy!

Victor

Video: http://tinyurl.com/6lwoxpx

Source: http://tinyurl.com/86quctt

PS: If anyone can help show me how to do this all in Blend, without having to use code, please shoot me an email at wpfauthor at gmail dot com.  Thanks, Victor

3 Comments for this entry

• 

  Lavanya 
  February 5th, 2012 on 5:09 pm

  Thanks a lot for sharing the nice video and keep posting.
• 

  Victor 
  February 10th, 2012 on 10:17 am

  I started doing this all in Blend with no code behind but I used two idential Buttons, one to show the panel and one to hide it and made them either Visible or Collapsed depending on what state the panel was in.

  My Good friend Todd asked me if I could do it with just one Button. I tried by turning the StoryBoards into visual States, creating a DataStore and using conditions. But as soon as I used the ChangeDataStoreValue Behavuior it seemed to step on the toes of my conditionals.

  So my idea was to make a code-behind (C#) property whereby I kept the state of the panel in a Boolean and ran the correct Storyboad based upon that.

  Someone commented and said “why not just use a ToggoeButton”? So I think that will be my next tutorial. “How to use ONE Button and slide a panel in or out depending on its current state using the Visual State Manager, a DataStore, a Conditional and a ToggleButtton. Sound like a good tutorial or all you all done with sliding panels? Let me know in the comments and your feedback will determine if I do it or not. Thanks, Victor Gaudioso
• 

  Victor 
  February 13th, 2012 on 4:41 am

  Thanks for remembering me my friend! Victor

1 Trackback or Pingback for this entry

• WindowsDevNews.com 
  February 13th, 2012 on 1:57 am

  [...] How to Make Sliding Panels with Only One Button (Using Code-Behind (C#) [...]

  
  

  originally posted http://www.windowspresentationfoundation.com/?p=917#comments