Silverlight Tip of the Day #39 – How to Create a Zoom Toolbar
Effects applied to toolbars are raising in popularity especially the zoom effect. For the purpose of this tip, I have created my own implementation of the zoom effect when applied to a toolbar.
To preview the demo visit this link: http://silverlight.services.live.com/invoke/66033/Zoom%20Toolbar/iframe.html
Here is a screen shot as well:
Moving the cursor over an image will cause it to increase to a pre-determined maximum size. Once the mouse leaves the area of the image the image will then zoom back down to its normal size.
To start, let’s take these steps:
- Create a new Silverlight Application using Visual Studio 2008.
- In your Solution Explorer, right click on your Silverlight Application and choose “Add New Item…”.
- Select "Silverlight Control” and change the name to “Toolbar.xaml”.
- For each image you want in your toolbar add the image to your Silverlight application project. To do this, right click on your Silverlight application, choose “Add->Existing item…”, browse to the images and click OK to add them.
Now, our next step is to declare each image in the Toolbar.xaml file:
Below is a code snippet of just one Image in the toolbar. We will be showing just one Image in this tutorial because each additional Image is just a duplication of the same code. For each Image , assign a RenderTransform with a ScaleTransform in order to do the zoom scaling. It’s important to set the CenterX and CenterY of this ScaleTransform in order for the Image to scale appropriately. Also don’t forget to set the Width and Height of this UserControl to be the exact dimensions. In the case where I use 5 images the width turned out to be 656 pixels wide by about 84 pixels high to include the image height plus the text height.
<UserControl x:Class="SLDev.Toolbar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="656" Height="84">
<Canvas>
<Image x:Name="HomeImage" Source="images/home.png" MouseEnter="DoMouseEnter" MouseLeave="DoMouseLeave" Width="96" Height="96" Canvas.Left="0" >
<Image.RenderTransform>
<ScaleTransform x:Name="HomeScale" CenterX="64" CenterY="64"></ScaleTransform>
</Image.RenderTransform>
</Image>
... aditional images
</Canvas>
</UserControl>
In Toolbar.xaml.cs, for each Image you want add a StoryBoard timer to track its animation, a direction flag to track its zoom direction (1=up, 0=down, -1=not zooming) and a flag to indicate if the mouse is over the image or not:
public partial class Toolbar : UserControl
{
private Storyboard _homeTimer;
private int _homeDir = -1;
private bool _homeMouseOver = false;
...
In our Toolbar constructor we will create and start the timer for each Image we have declared:
public Toolbar()
{
InitializeComponent();
_homeTimer = new Storyboard();
_homeTimer.Duration = TimeSpan.FromMilliseconds(50);
_homeTimer.Completed += new EventHandler(HomeTimer);
_homeTimer.Begin();
}
In our Timer callback event we will adjust the image scale based upon it’s state. For example, if the direction flag is “1” and we haven’t reached our pre-determined size of “1.3” scale we increase the scale by “0.05”. If the scale has reached “1.3” and we are no longer cursoring over the image we reverse the direction by setting direction = “0”. Otherwise, we decrease the scale by “0.05” until we return to the original size of “1.0”. Feel free to adjust these numbers to fit your custom toolbar.
private int AdjustScale(int direction, ScaleTransform scale, bool mouseOver, Storyboard timer)
{
if(direction == 1)
{
if (scale.ScaleX < 1.3)
{
scale.ScaleX += 0.05;
scale.ScaleY += 0.05;
}
else if (false == mouseOver)
{
direction = 0;
}
}
else if(scale.ScaleX > 1.0)
{
scale.ScaleX -= 0.05;
scale.ScaleY -= 0.05;
}
timer.Begin();
return direction;
}
private void HomeTimer(object sender, EventArgs e)
{
_homeDir = AdjustScale(_homeDir, HomeScale, _homeMouseOver, _homeTimer);
}
Finally, we need to handle the DoMouseLeave and DoMouseEnter events that occur when you mouse over and out of the image. If we leave the image we set _homeMouseOver = false. If we enter the image we set it to true plus the direction to “1”.
private void DoMouseLeave(object sender, MouseEventArgs e)
{
if (sender == HomeImage)
_homeMouseOver = false;
}
private void DoMouseEnter(object sender, MouseEventArgs e)
{
if (sender == HomeImage)
{
_homeMouseOver = true;
_homeDir = 1;
}
}
That’s it, you now have a cool, zooming toolbar.
Thank you,
--Mike Snow
Subscribe in a reader