Creating a Touch-Enabled User Control

Surface 1.0 SP1

This example shows how to create a touch-enabled user control. This example uses manipulations to handle rotation for a dial. You could add value labels to the control, along with a get method that would make the current setting of the dial available to other parts of your application.

For more information about manipulations in WPF applications, see Manipulations Using the Presentation Namespace.

User control - Touch-enabled example

To create a touch-enabled user control in a Microsoft Surface application

  1. Open Microsoft Visual C# 2008 Express Edition (or Microsoft Visual Studio 2008) and create a new project by using the Surface Application (WPF) template. Name it TouchEnabledUserControl. (For more information about how to create this project, see Starting the Visual Studio Project for WPF Applications.)

  2. In the Solution Explorer, right-click the bold project name (TouchEnabledUserControl), point to Add, click New Item, and under the appropriate Microsoft Surface template, click Surface User Control (WPF).

  3. Name it Dial.xaml as the following illustration shows.

    Visual Studio - Dial.xaml for Surface User Control
  4. In the Dial.xml file, assign a height and width to the Grid element.

    <Grid Height="300" Width="300">
    
  5. Add a new Grid element, and assign it a name (DialGrid), height, and width.

    <Grid Name="DialGrid" Height="250" Width="250">
    
  6. Add a RenderTransformOrigin point of X = .5, Y = .5 to DialGrid.

    <Grid.RenderTransformOrigin>
    <Point X="0.5" Y="0.5"/>
    </Grid.RenderTransformOrigin>
    
  7. Add a RenderTransform with the name DialRotateTransform to DialGrid.

    <Grid.RenderTransform>
    <RotateTransform x:Name="DialRotateTransform" Angle="5" CenterX="0" CenterY="0"/>
    </Grid.RenderTransform>
    
  8. Add a new ellipse to DialGrid that is the same size as DialGrid by dragging its horizontal and vertical handles to line up with DialGrid.

  9. Select a background color for the ellipse by using the Fill pull-down menu in the Properties pane or by editing the XAML mark-up directly.

  10. Add a rectangle to the grid to mark the pointer of the control.

  11. Add a second rectangle to the unnamed outer grid to mark the zero point for the control.

    In Visual Studio, the control should look something like the following illustration.

    User control - Touch-enabled example in Visual Stu

    When you are finished, the Dial.xaml file contains the following mark-up code.

    <s:SurfaceUserControl x:Class="TouchEnabledUserControl.Dial"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.microsoft.com/surface/2008">
        <Grid Height="300" Width="300">
            <Grid Name="DialGrid" Height="250" Width="250">
                <Grid.RenderTransformOrigin>
                    <Point X="0.5" Y="0.5"/>
                </Grid.RenderTransformOrigin>
    
                <Grid.RenderTransform>
                    <RotateTransform x:Name="DialRotateTransform" Angle="0" CenterX="0" CenterY="0"/>
                </Grid.RenderTransform>
    
                <Ellipse Name="ellipse1" Fill="Brown" />
                <Rectangle Margin="115,0,117,0" Name="rectangle1" Stroke="Black" Fill="Black" Height="52" VerticalAlignment="Top" />
            </Grid>
            <Rectangle Fill="Black" Height="25" Margin="140,0,142,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" />
        </Grid>
    </s:SurfaceUserControl>
    
  12. To add code to respond to contacts and rotate the knob, open the Dial.xaml.cs file.

  13. Add a using directive.

    using Microsoft.Surface.Presentation.Manipulations;
    
  14. Declare a manipulation processor.

    private Affine2DManipulationProcessor manipulationProcessor;
    
  15. Add a method to initialize the manipulation processor. The manipulation processor needs to implement "rotate" manipulations. This code provides a pivot point so that a single contact can cause the control to rotate. Call this initialization from the constructor.

  16. Add a method named OnManipulationDelta to handle changes in the rotation. The method modifies DialRotateTransform.Angle, which is defined in Dial.xaml.

  17. Create a method to override OnContactDown.

    This method starts the handling of manipulations when Microsoft Surface encounters a contact. Your method should resemble the following code.

  18. Open the SurfaceWindow1.xaml file and add a local namespace declaration.

    xmlns:local="clr-namespace:TouchEnabledUserControl"
    
  19. Add an instance of the control to the application.

    <local:Dial x:Name="Dial01"></local:Dial>
    

    Your XML code should look like the following code.

    <s:SurfaceWindow x:Class="TouchEnabledUserControl.SurfaceWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.microsoft.com/surface/2008"
        xmlns:local="clr-namespace:TouchEnabledUserControl"
        Title="TouchEnabledUserControl"
        >
      <s:SurfaceWindow.Resources>
        <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
      </s:SurfaceWindow.Resources>
    
      <Grid Background="{StaticResource WindowBackground}" >
            <local:Dial x:Name="Dial01"></local:Dial>
        </Grid>
    </s:SurfaceWindow>
    

You can run this sample by using the Surface Simulator tool. You can turn the dial with a single contact or by using multiple contacts, like you are holding the dial with your thumb and finger.

You can add a method to get the DialRotateTransform.Angle property. Use this value as the basis of dial value settings. For example, add numbers to the outer grid and translate the angle into the corresponding value setting.

Community Additions

ADD
Show: