Copying the Silverlight community menu

Copying the Silverlight community menu

  • Comments 9

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.

 

 

Leave a Comment
  • Please add 4 and 5 and type the answer here:
  • Post
  • Hi,

    I used the xaml provided here as a starting point - it's great.

    However when i first ran my project, I got the error AG_E_PARSER_BAD_PROPERTY_VALUE . . .

    This was caused by Loaded="UserControl_Loaded" because the handler was not defined.

    Not a major scientific discovery but hopefully it will save someone else a little time.

    Oh yeah - any chance of making 'NavItemGlow_Selected.png' available online as I am crap at creating graphics :).

    Thanks

  • 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.

  • Thanks for the image and for sharing the rest of your hard work.

    Great stuff.

  • 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?

  • I recently completed work on an internal Silverlight app.    The project was a blast –

  • 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!

  • I like this menu alot! But don't know how to use it within my current project (Still a noobie with Silverlight!! (Not with c# though)).

    In my current XAML I cant refer to the Menu.. in my current CS I did:

    Menu mnMain = new Menu();

    LayoutRoot.Children.Add(mnMain);

    But doesn't work. Anyone can help me out..?

  • Hey guys - sorry for the delay in posting the update.

  • 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?)

Page 1 of 1 (9 items)