This is "Yet Another Silverlight Toolbar". What sets this toolbar apart is that it is composed of only a Toolbar and a Box. The box is simply placed in the toolbar multiple times to create the elements on the Toolbar.
The application is primarily composed of Page.xaml that contains the toolbar and Box.xaml that contains the element used to represent the menu items.
The picture above shows how the toolbar looks when viewed in Expression Blend. All the elements are easily editable. Basically it is comprised of a ToolBar that scrolls to the left and the right. A method applies a "Clip" that will only show a portion of the Toolbar.
As you can see the Box.xaml file is simply an image with a reflected image below it. This file is also easily editable in Expression Blend.
The animation is simple and straightforward. Page.xaml contains a storyboard:
<UserControl.Resources>
<Storyboard x:Name="AnimateToolBar">
<DoubleAnimation x:Name="animateTheToolbar" Duration="0:0:0.5"
Storyboard.TargetName="ToolBar"
Storyboard.TargetProperty="(Canvas.Left)" />
</Storyboard>
</UserControl.Resources>
private void MoveToolbar()
{
this.animateTheToolbar.To = scrollPosition;
this.AnimateToolBar.Begin();
}
Back To: Silverlight Tutorials
Also See:
