IT tutorials
 
Mobile
 

Windows Phone 8 : Writing Your First Phone Application - Adding Code (part 3) - Using Touch

12/15/2012 6:01:16 PM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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

Image
 
Others
 
- Windows Phone 8 : Writing Your First Phone Application - Adding Code (part 2) - Debugging in the Emulator, Debugging with a Device
- Windows Phone 8 : Writing Your First Phone Application - Adding Code (part 1) - Working with Events
- Windows Phone 8 : Designing with Blend
- Iphone Application : Implementing Location Services - Creating a Location-Aware Application (part 2) - Implementing the Location Manager Delegate
- Iphone Application : Implementing Location Services - Creating a Location-Aware Application (part 1)
- Iphone Application : Implementing Location Services - Understanding Core Location
- Windows Phone 8 : Creating a New Project (part 2) - XAML
- Windows Phone 8 : Creating a New Project (part 1) - Visual Studio
- Developing BlackBerry Tablet Applications : Permissions and Configuration Settings
- Developing BlackBerry Tablet Applications : Permissions
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS