0 Navigation Bar Posted by Steve Wong | at 1:14 AM

It seems that most people are very confused with designing a navigation for their own website
Let me introduce my own one.

First of all, we should have those thumbnail-sized  icons inside the bar. I suggest people download them from gallery in Microsoft.com. There is a tip on searching those icon. Please enter 'png" for the searching keyword.

After downloaded all of them, we should add them into a stackpanel in xaml file.
Let see here.


Then, we should add four storyboard for three case

1. Mouse enter the region of one of the icons


2. Mouse leave the region of one of the icons


3. Mouse click on one of the region

[sourcecode language='xml']

      
      
      


      
      
      


      
      
      


      
      
      

[/sourcecode]

After that, we should try to finish the work with C#
We should have three case now as mentioned before.

[sourcecode language='csharp']
string CurrPage = null;
Image CurrImg = null;
int Curr = 0;
TextBlock e_msg = new TextBlock();
#region Navigation Animation Starts Here
void Navigation_MouseLeave(object sender, MouseEventArgs e)
{
    Image pic = sender as Image;
    if (pic != null)
    {
        if (CurrPage != pic.Name)
        {
            pic.SetValue(Canvas.ZIndexProperty, 1);
            foreach (Timeline tl in LeaveButtonSB.Children)
            {
                Storyboard.SetTarget(tl, pic);
            }
            LeaveButtonSB.Begin();
        }
        else
        {
            e_msg.Text = "It is clicked!";
        }
    }
}
void Navigation_MouseEnter(object sender, MouseEventArgs e)
{
    Image pic = sender as Image;
    if (pic != null)
    {
        if (CurrPage != pic.Name)
        {
            pic.SetValue(Canvas.ZIndexProperty, 10);
            foreach (Timeline tl in EnterButtonSB.Children)
            {
                Storyboard.SetTarget(tl, pic);
            }
            EnterButtonSB.Begin();
        }
        else
        {
            e_msg.Text = "It is clicked!";
        }
    }
        }
#endregion Navigation Animation Ends Here
#region PageShowing Starts Here
public void ShowPage(object sender, MouseButtonEventArgs e)
{
    Image pic = sender as Image;
    if (pic != null)
    {
        if (CurrPage != pic.Name && CurrImg != pic)
        {
            if (CurrImg != null)
            {
                GlowButtonSB.Stop();
                foreach (Timeline tl in ResetButtonSB.Children)
                {
                    Storyboard.SetTarget(tl, CurrImg);
                }
                ResetButtonSB.Begin();
            }
            foreach (Timeline tl in GlowButtonSB.Children)
            {
                Storyboard.SetTarget(tl, (sender as Image));
            }
            GlowButtonSB.Begin();
            CurrPage = pic.Name;
            CurrImg = pic;
            //Show Page doing here
        }
        else
        {
            e_msg.Text = "Pic is needed for the sender in ShowPage";
        }
    }
    else
    {
        e_msg.Text = "It is clicked!";
    }
}
[/sourcecode]

This time, I really control all the stuff in C# and Blend, never in ASP.NET.
Ofcoure, there is a way round in doing this trick by adding only a navigation bar in the MasterPage.
Just Like http://www.silverlight.net/
I hope everyone will love this navigation bar.