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!

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

Source Code: http://tinyurl.com/75ewtod

Victor Gaudioso

Founder, President, Organizer

Brought to you by the Los Angeles Silverlight Usergroup (LASLUG) www.laslug.com

2 Trackbacks / Pingbacks for this entry

• Silverlight Video Tutorial: Make a Sliding Panel ALL in Blend (NO Code-Behind) with ONE Toggle Button 
  February 13th, 2012 on 1:30 pm

  [...] Watch this video at Victor Gaudioso's Silverlight Blog [...]
• WindowsDevNews.com 
  February 14th, 2012 on 6:16 am

  [...] New Silverlight Video Tutorial: Make a Sliding Panel ALL in Blend (NO Code-Behind) with ONE Toggle B… [...]

  
  

  orginally posted http://www.windowspresentationfoundation.com/?p=964 

A Question to you the reader…Need your feedback here to decide if I should do a Tutorial

Hello Loyal Readers!

I started doing this all in Blend with no code-behind to show/hide panels in Silverlight but I used two identical 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 currently in.

My Good friend Todd Knudsen (Twitter: DataArtist) 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 Behavior (for a bool property named IsPanelShowing) it seemed to step on the toes of my conditionals and thus making it not work all together.

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 StoryBoard based upon that. It worked perfectly!

A reader left a comment and said “why not just use a ToggoleButton”? Great idea! Why didn’t I think of it?!

So I think that will be my next tutorial maybe “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 All in Blend!”

Sound like a good tutorial or are all of you done with sliding panels?

Let me know in the comments and your feedback will determine if I do the tutorial or not.

Thanks, Victor Gaudioso

PS: When you give your opinion please try and suggest a tutorial that has been giving your grief…I may just take it on and even mention you as the tutorial idea contributor. T

hank You All! Victor Gaudioso

AND, you can find my 70+ Silverlight/WPF/Windows Phone 7 step by step Video Tutorials here:http://wp.me/pWN5M-bu

Victor

7 Comments for this entry

• 
  

  teoman
  February 10th, 2012 on 1:46 pm
  

  Hello Victor,

  I could not watch all your tutorials, but the videos I watched was very very helpful and clear.
  Thanks for all that.

  If we come back your question, it would be great to see of all combinations of visual state manager, DataStore, togglebuttton in one tutorial.

  Thanks for your perfect help, keep going!
• 
  

  Victor
  February 11th, 2012 on 12:24 am
  

  I think that is a splendid idea and I will do just that Teoman!
  Victor
• 
  

  Victor
  February 12th, 2012 on 12:51 am
  

  Teoman, great idea and I did just that for you (and all other readers) This video shows how to make a Sliding Panel using a SINGLE ToggleButton with NO Code-Behind and ALL in Blend. Enjoy and remember to keep giving me ideas for new Video Tutorials (that goes for ALL Readers!) URL to new Post: http://wp.me/pWN5M-fy
• 
  

  Victor
  February 12th, 2012 on 2:51 am
  

  By the way, I happen to use Storyboards because in my opinion they give you more control. And then I used a ControlStoryboard Behavior but I just as easily could have used Visual States and a ControlVisualState Behavior. As for the DataStore, it is not needed as the ToggleButton, I fire one Storyboard on the Checked State of the ToggleButton and another Storyboard on the Unchecked State. So, a DataStore with Conditions are not needed. Make sense?
  Victor
• 
  

  DEBAL
  February 18th, 2012 on 6:32 am
  

  Hi Victor

  I need a video tutorial on Silver light Tree View Control . My requirement is very simple . I want to totally do this work in Expression Blend 4 (no code).

  Create a new project in blend and drag and drop a treeview control in MainPage.xamldesign page .

  Now I need a style for treeview , so that the connecting lines should be see all tree nodes, I have sent a mail to you in details at wpfauthor@gmail.com

  pl reply me , PL
• 
  

  Victor
  February 18th, 2012 on 6:35 am
  

  email me with more details at wpfauthor at gmail dot com. Victor
• 
  

  DEBAL
  March 1st, 2012 on 1:33 pm
  

  Thanks a lots
  for your reply , I have sent a mail at wpfauthor@gmail.com, pl reply me . I just want to see connecting lines between tree node using blend4. pl help me Sir

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

Win a Free Month Pass to PluaralSight Online Training Courses from the MSFT Stack – Contest Closed

UPDATE: Hello LASLUGers! Thank you all for you entries but effective immediately the contest has been canceled. But not to worry, I will think of other ways to reward you for your efforts. As for the tutorials I made them all easy and with step-by-step instructions with video.

So, if you are serious about your desire to learn Silverlight/ WPF / Windows Phone 7 then you are in the right place.

Thankfully, I been given the God given talent to take any subject, no matter how difficult the subject matter may seem, and make it understandable so much so that I can have my 16 year old daughter (Brianna), who has no desire to be a programmer whatsoever, to follow along the video tutorial and complete it perfectly. She is very smart though but if you are reading this than I think you must be as well.

On a side note, soon I’ll be implementing a rating system to all 70+ video tutorials in place whereby I rate the tutorial between 1 and 10; 10 being the most difficult and 1 being simple enough that my preschool son (Luke) would he able to complete it (I don’t know that his attention span could handle it but if it were he would be able to complete it).

So, if you do want to learn Silverlight (that uses XAML which will be included in the Windows 8 SDK (WinRT)) then please pick a tutorial and give it a go as what you learn here will be transferable to developing applications for Win8.

Once you see how easy your chosen tutorial is then you can pick another

If you are so inclined send me a URL to your published work or just zip up your entire solution and send it to me so I can take a look. I ask this because I love to see what my “students” have created. Some even get a little over zealous and make the app do things that the tutorial didn’t ask of them; that is when I get really excited as I know they (you) really understand what you are doing and can even go above and beyond what the tutorial requested of you!

Good luck and I cannot wait to see your completed work. If you choose to zip up the Solution then email it to me at my personal email address: wpfauthor at gmail dot com.

Victor Gaudioso

–

Hello All,

PluralSight, which does online training courses of MSFT technologies was kind enough to donate me a bunch of one month free trial activation codes. All you need to do to win is follow ANY of my Silverlight Video Tutorials, show it to me and you get the prize. You can find all 75-or so Video Tutorials here: http://www.windowspresentationfoundation.com/?p=712 Some are very short and most are very easy. So, pick a short easy one and complete it and email me at my personal address wpfauthor at gmail dot com and I will email you back with the code. Good luck! Victor

3 Comments for this entry

• 

  Cindy K. 
  February 8th, 2012 on 6:19 pm

  I am having a hard time viewing at least one of the videos. It tells me to install Silverlight, but when I click on that and let it try, it tells me I already have that version. I think the Silverlight version detection code is not detecting that I have the latest and should be fine to run the videos. What should I do?
• 

  Victor 
  February 9th, 2012 on 3:31 am

  Hello Cindy,
  If I were you I would go to the control panel (assuming you have a Windows-based PC) and uninstall anything having to do with Silverlight (excluding Visual Studio 2010 – leave that alone). Then go to a page that has Silverlight content (www.silverlight.net) and click on the Showcase button. It will eventually bring you to a site that has a very cool SL application. Then it should install the latest and greatest SL runtime. Do that and you should be good to go. Let me know if you have any problems after you try this. Thanks, Victor

  Victor Gaudioso
  The Los Angeles Silverlight Usergroup (LASLUG)
  http://www.laslug.com
  Founder, President, Organizer
  818.455.1994
• 

  Victor 
  February 9th, 2012 on 6:35 am

  Did you try my suggestion? Did it work? Victor

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

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

The LASLUG Raffle Chooser App has been Published in the Windows Phone 7 Marketplace

Raffle Chooser App in the WP7 Marketplace

Hello All,

If you attended our May 25, 2011 Los Angeles Silverlight Usergroup (LASLUG) meeting then you saw Kim S (LASLUG Special Event Coordinator) use the custom built Raffle ChooserWindows Phone 7 Application to choose the Winning Raffle Tickets.

Well, I figured that this could be a handy tool for our other .NET Usergroups such as LA C# Usergroup or even our friends at SoCal Code Camp ran by Woody
Pewitt (@woodyp on Twitter) as I think they all hold raffles as well. So I published it on theZune Marketplace.  It is under the Social Category and is FREE!

You can Install the Raffle Chooser app directly from here: http://tinyurl.com/4xhcltr

If  you would like the source code feel free to email me at victorg at laslug dot com.

Thanks!
Victor

originally posted http://www.windowspresentationfoundation.com/?m=201106