Here’s a post about the newly published Introducing Windows 7 for Developers, by Yochay Kiriaty, Laurence Moroney, Sasha Goldshtein and Alon Fliess. (The book’s ISBN is 9780735626829, and it contains 416 pages.)

You can read the Foreword by Mark Russinovich here.

Chapter 7
Building Multitouch Applications in Managed Code

In Chapters 5 and 6, you looked at touch-based applications—in particular, the new multitouch
capabilities that are available in the Windows 7 operating system—and how to program
applications to take advantage of Windows 7 multitouch features.

Perhaps you’re not really that into writing in C++, or perhaps you already have applications
that are written in managed code and would like to be able to use them with multitouch. This
chapter will look at how you can build applications with multitouch in mind using the Microsoft
.NET Framework and, in particular, the Windows Presentation Foundation (WPF)
version 4.

Instead of making a dry run through the features, you’re going to get hands-on experience
right away and learn by doing. So fire up Microsoft Visual Studio 2010 and let’s get going.

Building Your First Touch-Sensitive Application

Visual Studio 2010 supports the ability to create WPF Windows applications. You can do this
from the File menu. Select New Project, and the New Project Types dialog box opens. Make
sure that you’ve selected .NET Framework 4.0 as the target framework (on the top right side),
and select WPF Application from the available templates.

Visual Studio creates a basic WPF client application for you containing a couple of XAML files:
App.xaml, which contains the application definition, and MainWindow.xaml, which defines the
application UI. You’ll edit MainWindow.xaml in this section.

Let’s take a look at the basic XAML that is created for you in Window1.xaml:

<Window x:Class=”Chapter7_Sample1.MainWindow”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”MainWindow” Height=”300″ Width=”300″>
<Grid>
</Grid>
</Window>

This example defines the window and the code that supports it. In this case, you can see that
the class that implements this code is Chapter7Sample1.Window1. This code resides in the
code-behind file called MainWindow.xaml.cs. We’ll look at that in a moment.

The attributes on the Window element define the namespaces for the XAML code so that the
XAML can be validated by the Visual Studio compiler. Finally, some basic properties such as
Title, Height, and Width are set.

XAML in WPF supports a number of controls that allow you to command how the user interface
is laid out. The Grid control is one of these; it allows you to define how your controls are
laid out within defined cells. These controls can be placed anywhere within any of the cells. If
the Grid control is used, as it is here, without cells (that is, defined using rows and columns),
you should consider it a single-cell grid where only one control will be displayed.

Let’s add a control to this grid. We’ll add a rectangle in it, like this:

<Rectangle Width=”100″ Height=”100″ Fill=”Red”></Rectangle>

This defines a 100 by 100 rectangle (also known as a square), which will appear centered
within the single default cell of the grid. You can see the result in the following screen shot:

If you’re thinking that this isn’t very interesting, you’re right. So let’s make it a little more interesting
by making it touch sensitive. You can manipulate an object using touch in Windows
7 in a number of ways, but we’ll start with the simplest—moving it around the screen.

Using Windows 7 Touch to Move an Object

In the previous section, you built a (very) simple Windows 7 WPF application that rendered a
red rectangle on the screen. Now you’re going to add the first step of basic touch input by
adding the code that allows you to move the rectangle around the screen using touch.

First you need to inform Windows that you want to be able to manipulate the rectangle using
the touch system. You do this in XAML with the IsManipulationEnabled attribute. This is a
Boolean value, and should be set to ‘true’ if you want to manipulate an object
using multi touch.

<Rectangle Width=”100″ Height=”100″ Fill=”Red” IsManipulationEnabled=”True” ></Rectangle>

You’re going to make one more change to the rectangle, and that is to add a named Render-
Transform object that is defined by a MatrixTransform that does nothing. You’ll see shortly
that this transform can be manipulated to provide the drawing functionality that changes the
shape or location of the rectangle upon user input. The MatrixTransform object is defined as
an application resource, so if you look at your App.xaml file, you’ll see a section for resources
(called Application.Resources), where you can add the MatrixTransform object.

Here’s the code:

<Application.Resources>
<MatrixTransform x:Key=”InitialMatrixTransform”>
<MatrixTransform.Matrix>
<Matrix OffsetX=”0″ OffsetY=”0″/>
</MatrixTransform.Matrix>
</MatrixTransform>
</Application.Resources>

As you can see, this matrix transform doesn’t do anything. If you apply it to the rectangle,
nothing happens. However, later in the code example, you’ll manipulate the transform, and it,
in turn, will manipulate the rectangle.

Here’s how the rectangle XAML should look with the transform applied:

<Rectangle Width=”100″ Height=”100″ Fill=”Red” ManipulationMode=”All”
RenderTransform=”{StaticResource InitialMatrixTransform}”></Rectangle>

Now that the rectangle is configured to allow manipulation, the next step is to set up what
the window needs to capture manipulation events from the operating system. These are captured
using the ManipulationDelta event. Add this, and specify a handler to the Window tag
at the root of the XAML for Window1.xaml.

It should look something like this:

<Window x:Class=”Chapter7_Sample1.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”300″ Width=”300″ ManipulationDelta=”Window_ManipulationDelta”>

When you created the ManipulationDelta event handler on the Window just shown, Visual
Studio should have created a stub function for you. If it didn’t (for example, if you cut and
pasted the attribute declaration instead of typing it), you can see it here:

private void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
}

If you’re familiar with .NET programming, this code will look familiar. It’s a typical event handler
that takes a general object called sender, which refers to the object that the event was
raised on, and an object containing the event arguments (that is, the metadata associated
with the event).

In this case, you get a ManipulationDeltaEventArgs object. This object exposes a function
called GetDeltaManipulation, which returns a Manipulation object that contains exactly the
metadata that you need to understand what the user has done to the object.

Here’s how you can get a handle on the manipulation that has just been performed:

ManipulationDelta m = e.DeltaManipulation;

Next, you want to get a reference to your rectangle, and to the Matrix that defines its Render-
Transform. Here’s the code:

Rectangle r = e.OriginalSource as Rectangle;
Matrix matrix = ((MatrixTransform)r.RenderTransform).Matrix;

The Manipulation object exposes a Translation property that returns a Vector object, which
has member properties for the translation on X and Y that results from the user’s action of
moving the object. To move the object, you should call the Translate method on the matrix.
(Remember from the code shown earlier, that the matrix here is the RenderTransform from
the rectangle.) Here’s the relevant code:

matrix.Translate(m.Translation.X, m.Translation.Y);

And now all you need to do is set the RenderTransform for the rectangle to be the new matrix
(that is, the one that has been manipulated by the Translation function):

r.RenderTransform = new MatrixTransform(matrix);

And that’s it. Now, all you have to do is implement this event handler and you can move the
rectangle based on user input from the touch screen! Here’s the full event handler:

private void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
Manipulation m = e.GetDeltaManipulation(this);
Rectangle r = e.OriginalSource as Rectangle;
Matrix matrix = ((MatrixTransform)r.RenderTransform).Matrix;
matrix.Translate(m.Translation.X, m.Translation.Y);
r.RenderTransform = new MatrixTransform(matrix);
}

Now if you run your application, you can move the rectangle around the window by touching
the screen with your finger! Here’s an illustration of how it works:

In the next section, you add to this to see how the multitouch system accepts scaling information
that allows you to change the size of the object.

>   >   >

Microsoft is interested in hearing your feedback so that we can continually improve our books and learning
resources for you. To participate in a brief online (and anonymous) survey, please visit

www.microsoft.com/learning/booksurvey/

Enjoy the book!

Source: MSDN