One of the (many) features missing from Silverlight is a standard toolbar control.

However, really, a toolbar is just a bunch of buttons in a StackPanel.

<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
    <Button Content="1" Height="50" Width="50"/>
    <Button Content="2" Height="50" Width="50"/>
    <Button Content="3" Height="50" Width="50"/>
</StackPanel>

Using this method, you can easily put icons, text, etc. in your toolbar buttons as you would a normal buttons.  You can even add Click events to handle the button click.

If that is all you want, then that's all you need to do.

However, I wanted to get fancy.  I wanted to have the buttons fade in/out and expand in size as you moved the mouse over them. 

In order to accomplish this, there are 3 elements:

1. Animation to fade in/out the button
2. Animation to increase/decrease the size of the button
3. Overloaded button to catch the mouse events

First, I created a new Silverlight UserControl to take the place of the toolbar itself.  This just contains a StackPanel with a horizontal orientation and transparent background (I'll explain why).

<StackPanel Orientation="Horizontal" 
            Background="Transparent"
            x:Name="ButtonStack">
</StackPanel>

Next, I created a derived a new class from the Silverlight Button class.  This acts as my toolbar button.  On this button, I setup Mouse Enter and Mouse Leave event handlers. 

I created 2 storyboards as resources for the button:  one for activation, and one for deactivation.

<Button.Resources>
    <Storyboard x:Name="Activate">
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Width"
                         To="75"/>
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Height"
                         To="75"/>
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Opacity"
                         To="1.0"/>
    </Storyboard>
    <Storyboard x:Name="Deactivate">
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Width"
                         To="50"/>
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Height"
                         To="50"/>
        <DoubleAnimation BeginTime="0:0:0" 
                         Duration="0:0:0.2" 
                         Storyboard.TargetProperty="Opacity"
                         To="0.75"/>
    </Storyboard>
</Button.Resources>

As you'll notice, the storyboards handle all 3 of the buttons width, height and opacity.

The button code is pretty simple, the mouse handlers just start the various animations.  The nice thing is that the StackPanel handles the rest.

void ToolbarButton_MouseLeave(object sender, MouseEventArgs e)
{
    Deactivate.Begin();
}

void ToolbarButton_MouseEnter(object sender, MouseEventArgs e)
{
    Activate.Begin();
}

As I mentioned earlier, I made the toolbar background transparent.  This is because the toolbar will actually grow taller as the buttons increase in size.  If you have a coloured background that's different than the rest of the window, then it will look funny. 

In addition, in the mouse events (but I omitted from the code above), I played with the z-index of the toolbar control.  This is so that when it's on a page with other controls, the buttons increase over top of the other controls.  Otherwise, the buttons may be partially hidden.  You cannot just make the z-index higher, because if the z-index is left higher, then lower z-index controls don't seem to get some of their own mouse events.  So the mouse leave event brings the z-index back down to 0.

Using the toolbar is as easy as that initial bit of code.  First, setup a Xml namespace for the assembly in your Xaml file.  Next, add the toolbar like the following:

<t:Toolbar>
    <t:Toolbar.Children>
        <t:ToolbarButton Click="BackButton_Click">
            <t:ToolbarButton.Content>
                <Image Source="/Back.png" />
            </t:ToolbarButton.Content>
        </t:ToolbarButton>
        <t:ToolbarButton Click="ForwardButton_Click">
            <t:ToolbarButton.Content>
                <Image Source="/Forward.png" />
            </t:ToolbarButton.Content>
        </t:ToolbarButton>
        <t:ToolbarButton Content="3" />
        <t:ToolbarButton Content="4" />
        <t:ToolbarButton Content="5" />
        <t:ToolbarButton Content="6" />
        <t:ToolbarButton Content="7" />
    </t:Toolbar.Children>
</t:Toolbar>

Running Demo is available here.  It uses Silverlight 2 Beta 2.

Project and Source Files: ToolbarDemo.zip (499.59 kb)