New Silverlight Video Tutorial: How to Make a Slide In/Out Navigation Bar – All in Blend

In this video tutorial I show you how to use Behaviors and the Visual State Manager to create a navigation bar that slides in when the user places their mouse at the top of the page and then slides away when they move their mouse away from the navigation.  You can see it yourself in action Here.


My Source:

Enjoy! Victor Gaudioso

    • Nasir Aziz (@HydroMan)
    • May 2nd, 2010

    Great Video! One thing I wanted to ask, why didn’t you just put the MouseLeave > NavHide State behavior on the NavPanel instead? You used an invisible bigger rectangle below for that. Wouldn’t that do the same thing without needing the big Rectangle for firing NavHide state?

    • I thought of doing it this way but I didn’t want to take the chance of the MouseEnter/Leave of the buttons inerfear with the MouseEnter/Leave of the parent container. I am not sure that it would but I figured this would be a good time for a clear seperation of functionality; so I could have put the MouseEnter/Leave on the parent container but that is not really its job, is it? Its job it to hold navigation buttons. So, I added new objects whos only job it is to perform the State change actions. That is not saying your way wouldn’t have worked. It may well, just a choice I made, different styles for different folks, right?

      Thanks for your feedback, Victor

        • Nasir Aziz (@HydroMan)
        • May 2nd, 2010

        You are right. My only concern was that what if the user doesn’t move the Mouse down, rather goes up and doesn’t hit the invisible rectangle with the HideNav behavior. Anyway what I was proposing was that you can eliminate extra UI element to fire the behavior.

        Since this video is just to teach folks how do use behaviors and create some functionality, within that realm its all perfect. You did get that point across well. Its upto people how they want to implement it I guess 😉 Good job 🙂

      • I like to keep things seperate and of course if I were doing it professionally I would do a little more experiementation. If your concern was that the user could move the mouse and never hit the LeaveObject, I see your point. You could always make the nav StackPanel smaller on the top, bottom, left and right to avoid this problem. And, you are correct, this is by no means a professional grade implementation but it does show a simplistic way of how it can be achieved. Also, if I were to do it as en enterprise software piece of software I would have:
        1. Made it a re-usable UserControl;
        2. Moved it to an MVVM pattern;
        3. Moved the code from Behaviors to code-behind so I could do things like Pin the control open.

        But again, this is a beginner way to achieve this functionality. But I do appreciate your attention to detail.

        🙂 Victor

    • Frank
    • May 2nd, 2010

    As a beginner just entering the world of development, I think this video was great. It was simple and easy to follow (making it easy to remember for future use).


  1. The first video I have watched of yours and thought it was very well explained and presentated, keep up the good work.

  2. Very nice and succinct intro to states and behaviors.

    Thanks Muchly!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: