Update: I have added source code for your download and a demo of the navigation.

The best part about Silverlight is it provides heaps of great tools to use, so people like me who are completely graphically minded and a little bit developer stupid are still able to create sweet menus and the like.

This blog will show a simple way to create a menu that has all the main categories visible and when clicked will show your child links for that category, and when clicked again will make them disappear.

For this tutorial I will be using Expression Blend and Visual Studio 2008.

Ok lets go!

Open a new Silverlight 2 project up in Blend, I’m not to worried about the width of the application at the moment, it can be changed any time.

There is however, an issue with the height, this menu gives to ability to have all child links open at once, which would cause the menu to be very high and probably push out the bottom of the page.

We can sort that out later, lets just get it working for now.

First thing to do is create a Stack Panel, this is found under the layouts tools.

Make this stack panel the rough width you would like your menu to be.
I’m setting mine to 200px wide and leaving the high on AUTO (this is so it scales when you make the children visible.

Now we can start adding buttons.

Here in lies the first trick to this menu, instead of using a normal button. go to your Asset Library and on the controls library, click the show all check box in the top right, this will give you heaps of controls to choose from. We want the “Toggle Button” control. (when you select a control it will add it to the button just above the asset library)

This control is sweet because it already has the on/off states built in that we will need for this menu.

So I have added 3 “toggle buttons” to my stack panel, they are 200px x 35px and aligned to the top/left.

At this point it’s a good idea to get your naming conventions down, I’m going to call my categories:
WORK
BIOS
and INFO

So name your buttons accordingly:
work_button
bio_button
info_button

also change the Content attribute (in the properties panel on the right) on the buttons to match.

Now we need to add stack panels for each category, so:
work_stack
bio_stack
info_stack

These stack panels will be used to hold the child buttons for your categories, so they should sit under their parent.

your tree should look something like this now

If you double click a stack panel in the tree, it will have a yellow border around it, this means that any new items added will be inside that stack panel (same goes for any other items that can have other items placed inside it).

So double click your work_stack and add a few child buttons in.

I am making them 175 wide and 25 high, then I’m going to align them to sit to the top/right of the stack they live in.
This gives it a proper parent/child effect.

So do the same with the other stacks we just created, and now….. for some magic!

Set your category stacks attributes to collapsed, so they don’t exist till we want to call them, choose your first catagory button (work_button), go to the events panel at the top right of your properties panel and you will see in the list, “checked” and “unchecked”, these are the key to your menu, double click the “checked” event and Blend will transport you into Visual Studio and even create the event for you!

private void Work_button_Checked(object sender, RoutedEventArgs e)
{
work_stack.Visibility = Visibility.Visible;
}

Add the red text into the event (blue text) it has created, all this does is change the visibility attribute on your stack panel (work_stack) from collapsed (we set that before) to Visible.

So now it should be showing the items when its clicked, but now we need to be able to turn the menu off again when clicked.

So back into Blend and in the events list again, double click the “unchecked” event and in the event it creates for you, enter this:

work_stack.Visibility = Visibility.Collapsed;

Just the same as the other but this will change it back to its collapsed state. The reason we are working with the visibility options is because its dynamic and we don’t have to worry about the height of the stack, if we animated it, it wouldn’t be as flexible.

Do this for the rest of your buttons and now you should have a working parent/child menu!

But it still looks like rubbish, lets change that! (this is the fun bit IMO)

Lets start with the categories buttons. Right click on work_button and go to: Edit control parts (template) > Edit a copy. Give your style a name and click OK.

Now you are editing you button directly, and in here I am going to just quickly make a nice modern and simple style button. I am deleting all the elements on the button except the Template, the Grid and the Content Presenter so there should be nothing left but the text, and now im going to add a plain green rectangle that fills the area (set the width and height to AUTO and all your margins to 0).

Tip: if you want to have a line in between each button, set your bottom margin to 1.

I have selected my colour for the rectangle and then made sure its sitting behind the text (move it’s position in the tree to accomplish this).

I’m not happy with where the text is sitting so I think I might move it to the left side a bit, but there is an orange border around my alignment options stopping me do it, how do I fix this? There is a little orange square next to these options, click it and go to Reset. Change your alignments now, this border means it has a binding to another property, so just remember you could break something else if you select reset in here (the alignments and margins should be ok though).

Next I’m going to hack up a little arrow with the pen tool to sit next to my text, this will change when you click to see the children.

Now go to your Visual State Manager (VMS) and under the CheckStates group, selected checked, and with it selected go back to your triangle and rotate it to point down.

While you have your VSM handy, move the 0s that is next to your CheckStates group, and slide it up to about 0.2s. This will give you a nice little 0.2 second animation.

Awesome, we are nearly done, get out of the template view by click work_button in your bread crumb at the top of the art board. 

Now right click the rest of your category buttons and go to  Edit Control Parts (templates) > Apply Resource > Name of resource.

This should apply the button style you just made to the rest of your buttons… Cool huh!

Note: to change the colour of the text on your buttons, while in normal view (not in template view), select the button and change its foreground colour. The reason its set up like this is to give you the ability to have each button’s text colour different.

and I would say that is about it, have a play around with different styles and adding hovers to your buttons with the VSM and you should be able to make a pretty sweet menu!!!

Thanks for reading and let me know how you go with it!

Alex.