Buttons for Panning in Silverlight

• Download source - 20 KB

Introduction

Important: The download project contains references to Expression Blend DLL(s). If you do not have Expression Blend installed on your machine, make sure you add references to the missing assemblies manually. Otherwise, the project will not compile in VS. I have tested the code in Silverlight-5. Not sure if it will work in previous versions too. If anyone tests in older versions, please let me know.

In my previous article, I showed how to create a discrete value slider in Silverlight. This time, I present some markup and code for creating a bit fancy buttons for panning. I needed them for my online Jigsaw game and now share with you the code. Since the buttons are pure XAML (i.e., vector graphics), you can set any size you like without pixelation. Here is how the buttons look (scale transform of 2.0 applied):

The real buttons are animated on mouse hover and click. You can see the buttons live on this page (just don't start solving the puzzle just now, as we have work here to finish!).

Using the Code

The buttons reside inside a User Control as a unit. The user control is very simple and provides 5 events for panning to: (1) left, (2) right, (3) up, (4) down and (5) back to origin. All you need to do is put the Control somewhere on your GUI and respond to the events accordingly. The sample code provided has everything you need. All you need to do is create an instance of the control inside your XAML and setup the event handling code. Here's how it is done in the sample:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:PanningButtons" x:Class="PanningButtons.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
 
    <Grid Background="White">
        <Canvas x:Name="mainCanvas">
            <TextBlock x:Name="textblock" 
            HorizontalAlignment="Center" VerticalAlignment="Center" 
			TextWrapping="Wrap" Text="TextBlock"/>
        </Canvas>
        <local:PanControl MoveUp="PanControl_MoveUp" MoveDown="PanControl_MoveDown"  
                           MoveLeft="PanControl_MoveLeft" MoveRight="PanControl_MoveRight" 
                           ResetPan="PanControl_ResetPan"
                          HorizontalAlignment="Right" VerticalAlignment="Center" 
						  Margin="0,0,50,0" RenderTransformOrigin="0.5,0.5">
        	<local:PanControl.RenderTransform>
        		<CompositeTransform ScaleX="2.5" ScaleY="2.5"/>
        	</local:PanControl.RenderTransform>
        </local:PanControl>
    </Grid>
</UserControl>

In the sample application, the control to pan is a canvas. All we need to do to move the children inside this canvas is either set Canvas.Left and Canvas.Top properties on the children or TranslateTransform the whole Canvas. Here is all the code to do it using TranslateTransform:

public partial class MainPage : UserControl
{
    double delta = 15;
    double xTransform = 0;
    double yTransform = 0;
 
    public MainPage()
    {
        InitializeComponent();
    }
 
    private void PanControl_MoveUp(object sender, EventArgs e)
    {
        yTransform += delta;
        mainCanvas.RenderTransform = new TranslateTransform { X = xTransform, Y = yTransform };
    }
 
    private void PanControl_MoveDown(object sender, EventArgs e)
    {
        yTransform -= delta;
        mainCanvas.RenderTransform = new TranslateTransform { X = xTransform, Y = yTransform };
    }
 
    private void PanControl_MoveLeft(object sender, EventArgs e)
    {
        xTransform += delta;
        mainCanvas.RenderTransform = new TranslateTransform { X = xTransform, Y = yTransform };
    }
 
    private void PanControl_MoveRight(object sender, EventArgs e)
    {
        xTransform -= delta;
        mainCanvas.RenderTransform = new TranslateTransform { X = xTransform, Y = yTransform };
    }
 
    private void PanControl_ResetPan(object sender, EventArgs e)
    {
        xTransform = 0;
        yTransform = 0;
        mainCanvas.RenderTransform = new TranslateTransform { X = xTransform, Y = yTransform };
    }
} 

Conclusion

I hope you found the control useful. If you think anything is unclear or needs more explanation, please let me know.