Copying the Silverlight community menu
I'm building out a website using Silverlight. The more I learn about Silverlight the more I love it - I haven't had this much fun writing code in a long time. This is seriously addicting stuff.
One of the things that frustrated me is that many of the Silverlight 2 samples were not very useful. How many people are really interested in writing a video game with Silverlight? I needed an exciting (and easily implemented) menu effect for my web page. I searched everywhere but didn't find much. Many of the menus were simple block-style fly-out menus or were based upon the 1.1 (or older) release. I finally found the effect I wanted on the silverlight.net community page. The page features a menu that uses mouseenter/mouseleave highlighting and a little indicator that follows your mouse back an forth to illustrate which menu option you clicked. A screenshot of the menu appears below:
I recreated this menu in Silverlight 2 by defining a simple XAML file for the menu and handling the animation in C# (instead of embedding it in the XAML):
private void StackPanel_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
this.Cursor = Cursors.Hand;
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(0.4));
myDoubleAnimation.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, selectionPointer);
// Set the attached properties of Canvas.Left and Canvas.Top
// to be the target properties of the two respective DoubleAnimations
Storyboard.SetTargetProperty(myDoubleAnimation, "(Canvas.Left)");
StackPanel sp = (StackPanel)sender;
switch (sp.Name)
{
case "Home":
homeGlow.Visibility = Visibility.Visible;
myDoubleAnimation.To = 380;
break;
case "Services":
servicesGlow.Visibility = Visibility.Visible;
myDoubleAnimation.To = 528;
break;
case "HowTo":
howtoGlow.Visibility = Visibility.Visible;
myDoubleAnimation.To = 665;
break;
case "Technology":
technologyGlow.Visibility = Visibility.Visible;
myDoubleAnimation.To = 810;
break;
case "SignUp":
signupGlow.Visibility = Visibility.Visible;
myDoubleAnimation.To = 960;
break;
}
// Make the Storyboard a resource.
LayoutRoot.Resources.Add(sb);
// Begin the animation.
sb.Begin();
}
private void StackPanel_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
this.Cursor = Cursors.Arrow;
StackPanel sp = (StackPanel)sender;
switch (sp.Name)
{
case "Home":
homeGlow.Visibility = Visibility.Collapsed;
break;
case "Services":
servicesGlow.Visibility = Visibility.Collapsed;
break;
case "HowTo":
howtoGlow.Visibility = Visibility.Collapsed;
break;
case "Technology":
technologyGlow.Visibility = Visibility.Collapsed;
break;
case "SignUp":
signupGlow.Visibility = Visibility.Collapsed;
break;
}
}
I used a graphic for the background glow because Silverlight doesn't (yet?) provide this option. Here is the final look and feel of my menu (without the glow):
I've attached the XAML I used for the menu (which includes the scrolling indicator). Enjoy!
By popular demand, here is the graphic I used to make the menu glow. Enjoy!
Update: After many promises, here is an update. This zip below contains the XAML and code for the menu system described above. Note that you will see some code in the xaml.cs file as follows:
IBasePage pageToUnload;
pageToUnload = (IBasePage)p3.Spotlight.Children[0];
pageToUnload.ActivatePageFadeOut();
This is because all of my pages inherit a common set of Storyboards for fading pages in and out when they get loaded or unloaded. Comment out any and all references to base pages if you having a problem with the code.
One other thing: I'm not proud of the code - you'll see some hard-coded stuff that could have been avoided were we working with a dynamic language. Ah well, at least it works. Ping me if you have any questions.
Comments
Anonymous
April 09, 2008
The comment has been removedAnonymous
April 17, 2008
Thanks "new", I've made a number of improvements to the code so I'll post an update next week. In the meantime I posted the graphic you wanted above. Enjoy.Anonymous
April 28, 2008
Thanks for the image and for sharing the rest of your hard work. Great stuff.Anonymous
May 01, 2008
i'm trying this sample in vs.net 2008 and any refrence to {StaticResource Spotlight_BG} is throwing an error. Are the source files you posted complete and compileable?Anonymous
May 16, 2008
I recently completed work on an internal Silverlight app.    The project was a blast –Anonymous
May 18, 2008
QUOTE: I've made a number of improvements to the code so I'll post an update next week. In the meantime I posted the graphic you wanted above. END OF QUOTE Did you finish your sample? I'm looking for an sample for this menu style. Thank so much!Anonymous
June 04, 2008
The comment has been removedAnonymous
June 10, 2008
Hey guys - sorry for the delay in posting the update.Anonymous
July 02, 2008
Hi, I tried to run the code in the zip file. I don't understand what type Nav2 is? How do i solve the Error? private void ChangeBackground(string CurrentPage, string NextPage, Nav2 p3). Error: The type or namespace name 'Nav2' could not be found (are you missing a using directive or an assembly reference?)