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.

Monday, March 15, 2010

WP7 Get Started Info

Check Tim Heuer's blog post on getting started with Windows Phone 7 series development, since you will find the right links for the development tools.

Don't miss the fun !!!

My First Windows Phone 7 App

I'm sure many of you already heard the latest news about Windows Phone 7 Series from Scott Guthrie’s Mix keynote this morning.

I'm really excited about this, since finally the development tools for WP7 were released after several weeks of waiting. I didn't want to wait too long to post about this, so I went right away to download the tools and created my first windows phone 7 app.

The great thing is that any .NET developer became automatically a Windows Phone 7 developer. You can create applications using our beloved Visual Studio 2010 and Blend 4, and the applications can be created using Silverlight or XNA.

WP7 supporting Silverlight means that up to 90% of your existing Silverlight application's code is reusable and you only need to tweak the interface to fit the phone's screen resolution, and with Silverlight Out of Browser capabilities (with big enhancements on SL4) you will be able to deploy on web, desktop and phone reusing most of your code.

The same goes for XNA. You will be able to deploy your XNA apps on Desktop, XBox and WP7 using pretty most of your application code.

Isn't it awesome? Just as a prove of concept, it took me about a couple of hours to create my first "Hello" greeting app in iPhone using Objective-C, and I had to code the layout to respond to orientation. I did the same with the Windows Phone 7 tools, and it took me 5 minutes to get the same application up and running in the WP7 simulator.
This is a screenshot of the WP7 simulator running while you can see my Visual Designer and XAML windows opened in the back.
In this screenshot you can see how easy is to debug our WP7 application. In the background you can see my code bihind window with the active breakpoint.

All the same skillset, all the same tools and an exciting new platform to develop and do amazing things.
I'll keep you posted with more on Windows Phone 7 !!!
By the way, check out this links giving you all the information you need to start developing for Windows Phone 7 series.
WP7 Dev tools:
Christian Schorman on WP7. WP7 dev forum:


Friday, March 5, 2010

Cloud Computing Dimensions

Today I had the chance to attend to the live web cast of Steve Ballmer, Microsoft CIO at the University of Washington. During the speech he focused mostly on Microsoft’s Cloud offering: Windows Azure. Ballmer talked about several different features and concepts behind the company’s cloud computing solution, and was kind enough to recognize some of his competitors contributions to the cloud computing era we have in front of us.
Although the presentation was relatively a traditional Ballmer speech on  Microsoft’s product there were a couple of things he mentioned that caught my attention and I believe is important to comment about. Ballmer talked about Cloud Computing Dimensions. I believe this is an important concept to keep in mind, since the whole cloud computing topic is about going beyond traditional spaces and directions. In my opinion, cloud computing is really about exploring different spaces and new ways to integrate different services and solutions we are used to in our daily digital lives. If you start thinking about the cloud as a N-Space world where you can go in many more directions than before, that is covering, consuming and integrating services and solutions in all sort of directions and spaces, that’s when cloud computing starts to sound really interesting.
Going back to the cloud computing dimensions concept, Ballmer talked about five different dimensions, that can be summarized as follows:
  • Innovation
  • Learning
  • Social interaction and collaboration
  • Smart devices
  • Server advances
Let’s take a look at each of the different dimensions:
Innovation: if you agree with me that cloud computing offers you more spaces and directions than any other digital space or solution, is easy to think that there is a lot more room for innovation and great ideas. In an information era where connections and integration of digital services are part of our daily lives, we could comfortably say that there is a lot more room for creativity and innovation.
Learning: the cloud has to be able to learn from the data is has access to, from the cloud usage itself and from the users who utilize its benefits and capabilities. This is a key point in the upcoming era. We are pushing the Computer Sciences to become better at learning, not only from training routines or metrics, but actually from the very usage we give to computing every day. We want computers and digital solutions to learn from us, to become better at what they offer us. This applies to the cloud too, and its a great platform for knowledge generation and human behavior learning.
Social Interaction and Collaboration: we interact with our environment and the people who surrounds us all the time. We have come to a point where we have some degree of success at translating those interactions to the digital world. We are now able to connect, socialize and express our selves in connection to others in the digital word, however the lack of different spaces and directions has made difficult to collaborate and interact with the massive amount of people and information in our digital experiences. The cloud is an open door to explore new and improved ways for social interaction, but more important, collaboration. Is inspiring to see how many research groups are getting into the cloud computing for its collaboration possibilities, which I believe are one of the most valuable features.
Smart devices: this is all about devices that can be smart enough to really let us take advantages of cloud computing. Some people may think about smart phones or really cool gadgets, but I think it goes beyond that. After all, the human itself is the smartest “device” of all times, and if we can cultivate human understanding (like gestures and human expressions) into cloud computing solutions we could get much more from the cloud. While we get there, researchers are creating smarter devices that emulate human abilities to take us closer to that point were the device to interact with the cloud and the digital world will be the human body itself .
Server Advances: this is more straight forward to understand, but not trivial at all. There’s a huge amount of information in the digital word, and that information needs to be stored. Cloud computing is and will keep pushing the way servers work and the way they are build. With the ongoing growth of information and the push that it is getting from cloud computing offerings, server advances will be a must in the next era, so the information can be stored, retrieved, modified and stored back again in an efficient and dynamic manner. We need a server infrastructure and its related hardware and software to be much more efficient to empower the cloud and its users to achieve much more that we can at our current times.
There’s a lot involved in Cloud computing. Microsoft is just getting into a more business driven cloud computing offering, and is not the first. Google, Amazon, and others have also cloud computing solutions and business offerings. I don’t have much experience with them, but I honestly believe that Microsoft push to get into the market is positive since they are pushing the edges of what people use to think about the cloud.
Let me know what you think about these concepts and share your ideas. Sharing knowledge is all about promoting new ideas and increase the knowledge itself.