Sunday, March 21, 2010

Drag and Drop Custom Control for Windows Phone 7 Series Part 1

This month has been very exciting for every .NET developer out there. With technologies like Azure Cloud platform, Silverlight, Windows Presentation Foundation, ASP.NET MVC, XNA Framework and all the different digital platforms that you can target, such as the Web, PC, MAC, Xbox 360 and Windows Phone 7 Series and Zune there is a ton of new cool stuff to learn every day.
When you have to be learning constantly, along with your daily tasks at work, sometimes we loose the big picture around the technologies and platforms we work with. That’s why is good to zoom out from time to time and analyze the way you are using technologies to build digital experiences.  At the end of the day, is all about becoming faster and more efficient when creating digital experiences so you can have more time to be creative about it. Microsoft technologies rely on a very extensible, robust and mature framework and we have the tools to do much more (with less effort) as long as you figure out the best way to use and integrate technologies and platforms. One key part of this is reusability. I’m sure most of us have built the same functionality from scratch many times on different projects, repeating ourselves constantly with the ideal of doing it better each time, but if you can learn how to reuse you code and functionality it will not only improve your speed and productiveness, it will also improve the maintainability of your creations and their life cycle.
Silverlight, WPF and the development tools like Visual Studio and Blend were created with integration and reusability in mind, and is our duty to understand how to take advantage of this and get benefits from it.
I have been working on creating custom reusable controls that are easy to integrate, reuse and customize in a more efficient way, and I wanted to share my experience from it.
windows_phone_logo-300x300 In this post I will explain how to start with a basic drag and drop Silverlight application which is not reusable and walk you through the process of transform it into a custom control that improves reusability, customizability and maintainability. We will go from a drag and drop simple application in Silverlight, to a fully reusable drag and drop control that you can reuse on Windows Phone 7 Series, demonstrating one of the coolest features of Windows Phone 7 Series development: portability !!!!
Lets start by using some of the cool samples and code our there to avoid reinventing the wheel. For this example in particular, I’m taking Corey Schuman’s blog posts about Drag&Drop implementation and animations in Silverlight and WPF (you can find his posts here, here and here).
I took Corey’s sample code and improved a bit so the dragable square comes to the front of other objects when you drag it. You can take a look at Corey’s post to see the implementation he did, and also download the source code, so I won’t go into details with this.
You can achieve the Z-Index positioning by adding the following lines of code:
In the void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) private method, include the following line before setting the isRectangleMouseCapture to true:
Canvas.SetZIndex(this.Rectangle, 100);
And then, in the void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) private method, include the following line before setting the isRectangleMouseCapture to false:
Canvas.SetZIndex(this.Rectangle, 1);
By doing this, once you click on the rectangle to start the drag operation, its Z-Index property will be set to 100, so it will become the most on top element, and then when you release the mouse, it will go back to 1. You can add several other visual elements to test it, and see that the dragable rectangle will be always on top of other elements when dragging.
Corey’s approach is interesting because it achieves the drag operation by relying on a Translate Transformation, instead of the element’s Canvas.Left and Canvas.Top properties, so the sample works event if the rectangle is inside a Grid instead of a Canvas panel element.
In the next part we will see how to abstract the functionality into a Dragable custom control, that will rely on styles and templates to render the visual appearance of the control, but will maintain the code behind functionality so the XAML is independent from the actual drag and drop implementation.


  1. pleasure to find such a good artical! please keep update!! ........................................

  2. I am looking forward to the update. This is exactly what I need. I have an almost working solution but am a little stuck.