Using Touch
Even though the touch interactions do fire mouse events, there are
other events that allow you to design your application for touch. Since
touch is so important to how applications on the phone work, this first
application should give you a taste of that experience. To show touch
working, let’s add an ellipse to the application that the user can move
around by dragging it with her finger. To get started, you should open
the MainPage.xaml file and add a new ellipse in the center of the page.
To do this find the TextBlock called theStatus and place a new Ellipse element after it, like so:
...
<Grid x:Name="ContentGrid"
Grid.Row="1">
<Rectangle Fill="#FF7E0505"
Margin="8"
RadiusY="24"
RadiusX="24" />
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap"
Text="Status"
VerticalAlignment="Bottom"
FontSize="48"
FontWeight="Bold"
Name="theStatus" />
<Ellipse x:Name="theEllipse"
Fill="White"
Width="200"
Height="200">
</Ellipse>
</Grid>
...
We want to be able to move the ellipse (named theEllipse) as the user drags it. To allow us to do this we will need to use something called a transform.
In Silverlight, a transform is used to change the way an object is
rendered without having to change properties of the ellipse. While we
could change the margins and/or alignments to move it around the screen,
using a transform is much simpler. You should use a TranslateTransform to allow this movement. A TranslateTransform provides X and Y
properties, which specify where to draw the element (as a delta between
where it originally exists and where you want it). You can specify this
transform by setting the RenderTransform property with a TranslateTransform (naming it in the process):
...
<Ellipse x:Name="theEllipse"
Fill="White"
Width="200"
Height="200">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="theMover" />
</Ellipse.RenderTransform>
</Ellipse>
...
Now that we have a way to move our ellipse around the page, let’s
look at dealing with touch. In Silverlight, there are two specific types
of touch interactions that are meant to allow the user to change
on-screen objects. These are when the user drags her finger on the
screen and when she uses a pinch move to resize objects. These types of
interactions are called manipulations. Silverlight has three events to allow you to use this touch information:
• ManipulationStarted
• ManipulationDelta
• ManipulationCompleted
These events let you get information about the manipulation as it happens. For example, let’s handle the ManipulationDelta
event to get information about when the user drags on the screen. This
event is called as the manipulation happens, and it includes information
about the difference between the start of the manipulation and the
current state (e.g., how far the user has dragged her finger):
...
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
theStatus.Text = "Hello from Code";
theStatus.MouseLeftButtonUp +=
new MouseButtonEventHandler(theStatus_MouseLeftButtonUp);
theEllipse.ManipulationDelta += theEllipse_ManipulationDelta;
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
void theEllipse_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
// As a manipulation is executed (drag or resize), this is called
theMover.X = e.CumulativeManipulation.Translation.X;
theMover.Y = e.CumulativeManipulation.Translation.Y;
}
...
}
...
The event is fired while the user either pinches or drags within the theEllipse element. In this case the code is only concerned with the dragging. In the event handler for ManipulationDelta, the ManipulationDeltaEventArgs object contains information about the extent of the manipulation. In the CumulativeManipulation property of the event args, there is a property called Translation, which contains the extent of the drag operation (the complete delta). We are just changing theMover’s properties to match the manipulation. This means we can now drag the theEllipse element around and see it change position under our dragging, as seen in Figure 9.
Figure 9. Dragging the ellipse
