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
- Mouse enter the region of one of the icons
- Mouse leave the region of one of the icons
- 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.