[Back to Silverlight 2 Toolbar]

Page.xaml:

<UserControl x:Class="Silverlight2ToolBar.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:SilverlightApplication1="clr-namespace:Silverlight2ToolBar">
    <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>
    <Canvas>
        <Canvas Width="185" Height="100" x:Name="ToolBarWindow" Canvas.Left="29">
            <StackPanel x:Name="ToolBar" Orientation="Horizontal">
            </StackPanel>
        </Canvas>

        <Canvas Width="25" Height="95" x:Name="LeftButton" MouseLeftButtonDown="LeftButton_MouseLeftButtonDown" >
            <Path Width="15.7" Height="62" Stretch="Fill" Stroke="#FF000000" Data="M100,152 C67.375,187 100,213 100,213 z" Canvas.Left="8" Canvas.Top="16.5">
                <Path.Fill>
                    <LinearGradientBrush SpreadMethod="Pad" EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FF000000" Offset="0.053"/>
                        <GradientStop Color="#FF726464" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
        </Canvas>
        <Canvas Width="25" Height="95" Canvas.Left="215" x:Name="RightButton" MouseLeftButtonDown="RightButton_MouseLeftButtonDown" >
            <Path Width="15.7" Height="62" Stretch="Fill" Stroke="#FF000000" Data="M100,152 C67.375,187 100,213 100,213 z" RenderTransformOrigin="0.5,0.5" Canvas.Left="2" Canvas.Top="16.5">
                <Path.Fill>
                    <LinearGradientBrush SpreadMethod="Pad" EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FF000000" Offset="0.053"/>
                        <GradientStop Color="#FF726464" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="-1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Canvas>
    </Canvas>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight2ToolBar
{
    public partial class Page : UserControl
    {
        const int ButtonSize = 60;
        const int NumberOfButtons = 6;
        
        double scrollPosition;

        public Page()
        {
            InitializeComponent();
            scrollPosition = (double)0;
            AddItemsToToolBar();

            SetToolBarClipping();

            // Always hide the LeftButton on page load
            this.LeftButton.Visibility = Visibility.Collapsed;

            // Hide the RightButton if it is not needed
            if (NumberOfButtons * ButtonSize <= (this.ToolBar.ActualWidth - 1))
            {
                this.RightButton.Visibility = Visibility.Collapsed;
            }
        }

        private void AddItemsToToolBar()
        {
            AddToolBarItem("images/nibbles.png", "www.nibblestutorials.net");
            AddToolBarItem("images/silverlight.png", "Silverlight.net");
            AddToolBarItem("images/adef.png", "ADefwebserver.com");
            AddToolBarItem("images/bells.png", "ValeriesWeddings.com");
            AddToolBarItem("images/DesignWithSilverlight.png", "DesignWithSilverlight.com");
            AddToolBarItem("images/silverlightCream.png", "SilverlightCream.com");

            this.ToolBarWindow.UpdateLayout();
        }

        private void SetToolBarClipping()
        {
            // Set the Clipping on the ToolBar
            // This causes only a portion of the ToolBar (that is also on the ToolBarWindow Canvas) to show
            RectangleGeometry RectangleGeometry = new RectangleGeometry();
            Rect Rect = new Rect();
            Rect.Height = (double)100;
            Rect.Width = (double)185;
            RectangleGeometry.Rect = Rect;

            ToolBarWindow.Clip = RectangleGeometry;
        }

        private void AddToolBarItem(string ImageSource, string ImageUrl)
        {
            Thickness myThickness = new Thickness();
            myThickness.Bottom = (double)5;
            myThickness.Left = (double)5;
            myThickness.Right = (double)5;
            myThickness.Top = (double)5;

            box mybox = new box();
            mybox.SetValue(MarginProperty, myThickness);
            mybox.boxUrl = ImageUrl;
            mybox.boxThumbnail = ImageSource;
            mybox.boxThumbnail_Reflection = ImageSource;
            this.ToolBar.Children.Add(mybox);
        }

        private void RightButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Only advance Toolbar (scrollPosition) if there are Buttons to show
            if (scrollPosition >= -(((NumberOfButtons + 3) * ButtonSize) - this.ToolBar.ActualWidth))
            {
                // Move the scrollPosition
                scrollPosition -= (double)ButtonSize;
                // If the RightButton is clicked then the LeftButton needs to show
                this.LeftButton.Visibility = Visibility.Visible;

                MoveToolbar();

                // Do not show RightButton if the last Button is showing
                if (scrollPosition == -(((NumberOfButtons + 3) * ButtonSize) - this.ToolBar.ActualWidth))
                {
                    this.RightButton.Visibility = Visibility.Collapsed;
                }
                else
                {
                    this.RightButton.Visibility = Visibility.Visible;
                }
            }      
        }

        private void LeftButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Only advance Toolbar (scrollPosition) if it is not already at the the 
            // first Button
            if (scrollPosition != 0)
            {
                // Move the scrollPosition
                scrollPosition += (double)ButtonSize;

                // If the LeftButton is clicked then the RightButton needs to show
                this.RightButton.Visibility = Visibility.Visible;

                MoveToolbar();
            }

            // Do not show LeftButton if the first Button is showing
            if (scrollPosition == (double)0)
            {
                this.LeftButton.Visibility = Visibility.Collapsed;
            }
            else
            {
                this.LeftButton.Visibility = Visibility.Visible;
            }
        }

        private void MoveToolbar()
        {
            this.animateTheToolbar.To = scrollPosition;
            this.AnimateToolBar.Begin();
        }
    }
}

[Back to Silverlight 2 Toolbar]