In this brief tutorial I will show how you can create your own custom accordion menu from scratch. We will be using Behaviors so that you won't need to program a single line of code. Please be aware that there are many ways to create custom controls depending your desired end result, and this particular solution may not be perfect for every situation. However, the purpose of this tutorial is to help encourage you to think outside the box and create your own UI without the fear of "re-inventing the wheel".
When people hear the term "custom control" or "custom component" they usually assume that extra time and cost are involved in creating something custom. Well, this is not always true. In fact, you may actually save time by making your own UI that fits your exact need without the extra overhead. The accordion control is a good example of a UI element where you may want to create one from scratch instead of using the default control as a starting point. Out of the box, the accordion control does what you would expect, but skinning can be cumbersome and frustrating for designers. You may spend a lot of time removing and replacing default skin elements, and you don't always see all of your content at design time, which can cause some guess work. The accordion menu is actually pretty easy to deconstruct and emulate using states and behaviors.
So here's how I did it:
1. In Blend, design the look and feel of your accordion menu. Make sure you are happy with the first item in your menu before continuing further. We will clone this first menu item to generate the others, so it's better to get it right the first time. Add graphics, text, and whatever else you want. After you are happy with your look and feel, add a button on a layer above your artwork and text. You can easily make this an invisible button by editing it's template and adjusting the alpha to 0%. The reason we added an invisible button is so that we will be able to apply mouse events to our menu item. Group all of these assets into a Grid.
2. You can now create each additional menu items based on your first item. Duplicate your first Grid and position each duplicate Grid below the previous. Repeat this as many times necessary until you have reached the total number of menu items.
3. Create a state for each view of the accordion menu using the visual state manager (VSM). Create states for each expanded position for each menu item. Add some animation between states. After all, one of the main reasons you chose Silverlight is to provide a "rich" user experience.
4. Using behaviors, you can add the expand & collapse functionality to your menu. Add the "GoToStateAction" to each button by dragging the behavior from the Assets panel onto each button. If you now select this behavior in the Objects-and-Timeline panel you can edit its properties. Modify the behavior properties to define your mouse events and state targets. I chose the "MouseEnter" event, but feel free to select from any of the event types. Assign a target name to the user-control (which is the top-most parent container) and assign a state-name that the button should trigger. For example, button1 will trigger state1, button2 will trigger state2, etc.
5. Now that you've created your menu states and added behaviors you can publish your custom accordion and preview in the browser. Good luck!
About the Author
About Mason Brown
Blog: http://maysundays.net/
Mason Brown is an interactive designer from Atlanta with a background in Flash and front-end web development. His current concentrations are animation, graphic design, and data visualizations. He continues to bridge the gap between design and development by empowering teams to reach a higher creative potential and streamline productivity. Mason currently works at IQ Interactive where he enjoys blending video, music, story telling, and code to achieve harmonious and fulfilling user experiences.
