IT tutorials
 
Mobile
 

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

12/15/2012 6:01:16 PM
- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019

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
 
 
Facebook
 
Technology FAQ
- Microsoft ebs security server configuration
- IIs7 on Windows server 2003
- How to Configure Failover Clusters With Win 2008 Server R2?
- Windows 2008 Network Load Balancing
- Windows Server 2008 - Group Policy Management - Remove Computer Management
- Remove shortcuts possibility in a web page or to put in favorite
- HTA Dynamic Drop Down List
- IIS host header and DNS
- VMware or MS Virtual Server?
- Adobe Acrobat 9 inserting tab pages
programming4us programming4us