Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to implement drag feature in Windows Phone 7

This article is focuses on the process to come up with a drag implementation in a Windows Phone 7 Application.

We will first create a Windows Phone 7 Application Project taking the help of Visual Studio.

Creation of a project via Visual Studio

Figure 1: Creation of a project via Visual Studio

Post the creation of the project, the next step would be incorporate references to the toolkit library. This can be done by right clicking on the name of the project in Solution Explorer and then select Add Reference.

  • Make sure you access the .NET tab and after this, locate the Microsoft.Phone.Controls.Toolkit.
  • Also you need to keep in mind that in case you are making use of Windows Phone 7 SDK 7.1, then there is a need to make use of the valid or viable version of the Silverlight for Windows Phone Toolkit.
Adding Reference to the toolkit library

Figure 2: Adding Reference to the toolkit library

This is all as far as the settings are concerned. We will now be going to create a very simple Windows Phone 7 Application that would comprise of a blue square on the screen.

  • The good thing or rather the interesting point to note here is that the user will be able to drag this square around the screen of the phone. The below represents the screenshot of the same.
WP7 reflecting the blue square on the screen

Figure 3: WP7 reflecting the blue square on the screen

Next Step:

  • Double click on the MainPage.xaml in Solution Explorer
  • This will enable you to edit the XAML of this page.
  • Look for the Grid named ContentPanel
  • Add new a Square to that grid as shown below:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
         <Sqaure x:Name="mySquare" Width="200" Height="200" Fill="Blue">
         </Square>
 </Grid>

We call this square by the name of the mySquare for the reason that there will be a need to reference to it from the code present behind the file.

In order to make use of the toolkit, the first step would be declaring the namespace in the XAML file. This can be done by adding the below listed line along with other lines at top of MainPage.xaml

namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Inside the Square, just add a new XAML so as to manage the dragging event of the square. The ContentPanel grid will be displayed as below:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
             <Square x:Name="mySquare" Width="200" Height="200" Fill="Blue">
                 <toolkit:GestureService.GestureListener>
                     <toolkit:GestureListener DragDelta="GestureListener_DragDelta"/> 
                 </toolkit:GestureService.GestureListener>
             </Square>
 </Grid>

Here if you notice, we are handling a very important event: DragDelta which is the event that is known to take place every time you move your finger or simply whatever you use over the Square. If you have been involved or worked on the Windows Forms before, you can easily notice that this event is similar to the MouseMove event in Windows Forms. The exception is that here you really touch the screen in case of Windows Phone. There are other events as well that are provided by the GuestureService that you can use.

Let us now direct to the code file. This can be done by accessing or pressing the F7 key. The other way could be to right click on MainPage.xaml and then choose View Code. In case you are not able to see the method for handling the DragDelta even, one can add manually as given below:

 private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
 { 
 }

But the question here is that how we can now move the Square around?

  • It is put inside Grid panel.
  • This way you can not define the top and left similar to what we can do with Canvas panel.
  • Luckily the same outcome can be obtained by utilizing the RenderTransform property that each UI control has.

Besides moving the UIElement or in other words we can say "translate it" but one can also be able to measure or rotate the same with the help of RenderTransform property.

For the reason that, our focus is on moving the square, let us use the TranslateTransform class to move it. One needs to declare private fields call translateTransform in your MainPage.xaml.cs file

 private TranslateTransform translateTransform;

The next step would be to incorporate the subsequent lines of code inside the constructor MainPage():

translateTransform = new TranslateTransform();
 mySquare.RenderTransform = translateTransform;

The code above is rather very simple.

  • We would first initialize the translateTransform object, and then
  • We assign it to the RenderTransform property of mySquare.

We are now ready to move the mySquare. This can be done by modifying the X and Y properties of translateTransform variable and entering in the new code inside the GuestureListener_DragDelta method as mentioned below:

 private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
 {
     translateTransform.X += e.HorizontalChange;
     translateTransform.Y += e.VerticalChange;
 }

There are lot of helpful properties that the parameter e can provide.

  • HorizontalChange is a double value that signifies the length that you moved horizontally,
  • VerticalChange denotes the distance traversed vertically.
  • Other property is Direction that permits you to judge the direction of move either it is horizontal or vertical.

Here in our example, in case the user's finger moves left or right, the X property of translateTransform object will be decreased or increased. Talking about the default, this property has value 0. And the same thing holds valid for the case when user's finger moves up or down. The Square in the UI will be moved of its own on altering the X and Y properties.

We are done with the tutorial and now you can execute the project by accessing or pressing the F5 in Visual Studio where as in the emulator, one can make use of the mouse to drag the blue square around the screen of the phone.

Conclusion

We saw the process and step by step guide to implement the drag functionality in Windows Phone 7 application taking the example of a square image.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login