Manipulation Events Example

The following example illustrates how to move and scale a UIElement using the various manipulation events.

Within the ManipulationEventsView XAML file is a Border control, defined as shown:

Click here to view code image

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Border
        Height="400"
        Width="400"
        Background="{StaticResource PhoneAccentBrush}"
        ManipulationStarted="HandleManipulationStarted"
        ManipulationDelta="HandleManipulationDelta"
        ManipulationCompleted="HandleManipulationCompleted">
        <TextBlock x:Name="TextBlock_Message" />
        <Border.RenderTransform>
            <CompositeTransform x:Name="compositeTransform"/>
        </Border.RenderTransform>
    </Border>
</StackPanel>

When the user touches the Border, the ManipulationStarted event is raised, calling the code-beside handler, which sets the background color of the Border. As the user moves her fingers, the ManipulationDelta event is raised repeatedly, each time the location and scale of the Border is adjusted using the CompositeTransform (see Listing 12.3).

LISTING 12.3. ManipulationEventsView Class

Click here to view code image

public partial class ManipulationEventsView : PhoneApplicationPage
{
    readonly SolidColorBrush startManipulationBrush
                            = new SolidColorBrush(Colors.Orange);
    Brush normalBrush;

    public ManipulationEventsView()
    {
        InitializeComponent();
    }

    void HandleManipulationStarted(
            object sender, ManipulationStartedEventArgs e)
    {
        Border border = (Border)sender;
        normalBrush = border.Background;
        border.Background = startManipulationBrush;
    }
    void HandleManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        ...
        compositeTransform.TranslateX += e.DeltaManipulation.Translation.X;
        compositeTransform.TranslateY += e.DeltaManipulation.Translation.Y;

        if (e.DeltaManipulation.Scale.X > 0
            && e.DeltaManipulation.Scale.X > 0)
        {
            compositeTransform.ScaleX *= e.DeltaManipulation.Scale.X;
            compositeTransform.ScaleY *= e.DeltaManipulation.Scale.Y;
        }
    }

    void HandleManipulationCompleted(
                object sender, ManipulationCompletedEventArgs e)
    {
        Border border = (Border)sender;
        border.Background = normalBrush;
        TextBlock_Message.Text = string.Empty;
        ...
    }
...
}

Pinching or stretching the Border modifies the CompositeTransform scale values, which resizes the control. A tap and drag gesture modifies the CompositeTransform translation values, which repositions the control (see Figure 12.1).

FIGURE 12.1 A Border is moved and resized in response to manipulation events.