Developing for the Windows Phone 7 - Part 2: Debugging on the Phone

Windows Phone 7

I've had my phone a couple of days now and been playing with the development experience on the device.  As some of you remember, I've been creating a new Moon Phase application for the phone (called "Moon Phaser").  I'll be releasing the source and you'll be able to install it on your phone (for free) once the Marketplace launches.

I've recorded a little video showing using Visual Studio 2010 and the actual device to debug directly on the device. Yes it works...and yes its fast. I am really happy with the experience. Debugging with the emulator is fast too, but there are times when you want to make sure it works on the device and that the performance is what you expect on the device.  Watch the video here:

Let me know what you think!

(Kudos to Laurent Bugnion for helping me with the phase animation!)

Silverlight Tour Coming to Atlanta Next Week (with a 10% discount)

Silverlight Tour

If you haven't had a chance to join me for the Silverlight Tour yet, next week is your chance! I will be in Atlanta for the next Silverlight Tour stop.

The Silverlight Tour is a three-day, soup-to-nuts breakdown of Silverlight 4. This includes learning the ins and outs of XAML, hosting in the browser, the tools and using Silverlight on the server. The class utilizes the Silverlight 4 as well as the latest toolset from Microsoft (including Visual Studio 2010 and Expression Blend 4).

TelerikThe Silverlight Tour Workshop also includes a complimentary license to Telerik's RadControls for Silverlight for every attendee* (a $999.00 value). For more information on RadControls, you can visit there site at http://telerik.com.

For a limited you can get 10% off the price by using the coupon code 'SUMMER2010'.  Seats are limited.

 

Talking about Windows Phone 7 at Atlanta .NET User Group

Windows Phone 7If you're in Atlanta tomorrow (July 26th, 2010), i'll be at the Microsoft office in Alpharetta (north of Atlanta) to speak at the Atlanta .NET User's Group. I will be doing a short talk on Silverlight and interacting with the HTML DOM/other Silverlight apps.  I'll also be talking about building your first Windows Phone 7 application using the latest Beta tools.

The fun starts at 6pm (though I'll likely not arrive until just at 6:30 for the first talk). You can find directions and other information here:

http://www.atldotnet.org/default.aspx

 

Developing for the Windows Phone 7 - Part 1: The Phone

Windows Phone 7

I am one of the lucky few who received Windows Phone 7 phone this week. For those who will ask, I got a phone because I am writing a book on programming for the Windows Phone 7 (Application Development for the Windows Phone 7 with Silverlight, Addison-Wesley).

My overall first impression is very good.  I was able to get e-mail working, XBox Live integration and play with debugging on the phone. This blog entry will exclusively tallk about the phone, not the development experience.  I will add new blog entries soon on my experience developing with the phone.

The device I received from Microsoft was one of the LG WP7 phones shown below:

WP7PhoneFront

(click image for a full-sized version)

I've done a short video talking about some of the experience with the phone's built-in apps here:

The phone has a slide-out keyboard (like my Droid does) and I like the design a lot:

WP7Keyboard

(click image for a full-sized version)

The buttons are curved so you can tell you're typing on one key instead of more than one (unlike my Droid) and the F and J both have small nubs so I can feel when I am correctly on the home row.

You should notice that the phone has three main buttons on the front of the device:

WP7FrontButtons

(click image for a full-sized version)

These three buttons are for going back, going to the main hub (home screen) and launching the search. The back button is a key button for your use of the phone. As you navigate through the phone's apps or pages within an app. This button represents something like a 'back button' in the browser but for the entire OS.

The Windows key (e.g. home button) always returns to the home screen of the application (e.g. the main hub). Finally, the search button takes to you to the Bing app for searching the web. The only thing about the Bing app that I don't like is that it doesn't search the phone too.  I would like it to search for contacts or addresses or emails on the device too (Android's Google integration does this).  I am hoping this makes it in a post-preview release.

The size of the device is about the same as my Droid, but the screen is noticably smaller (after using the Droid, its obvious, but the resolution is the required 800x480).  Also, please ignore the fingerprints:

WP7DroidFront

(click image for a full-sized version)

The widths are about the same too:

WP7PhoneSide

(click image for a full-sized version)

The phone has all six buttons required for a device. The three front facing buttons (shown above).  The Camera button on the lower right:

WP7CameraButton

(click image for a full-sized version)

The Volume rocker button(s) on the upper left:

WP7Volume

(click image for a full-sized version)

Finally the power/sleep button on top:

WP7TopButtons

(click image for a full-sized version)

Sorry for the blurry picture, I couldn't get my camera to take this clear for some reason. The left button is the power/sleep button. Aside from it being in a different place (left side of the top) than my droid, it works well. The phone takes a micro-USB cable for charging/syncing. The placement is unfortunate as it is on the top of the device instead of the bottom as I prefer. Also annoying is the little removable cover for the USB port. Its unnecessary and will likely break soon as I charge/sync a lot.

Overall its a nice preview of the OS that will likely be my main phone coming soon.  There are really only two things that stop me from making it my main phone now:

  • Lack of apps.  This will change at launch and after, but right now there are a few Android apps that I can't live without.
  • No Turn-by-Turn navigation. I didn't realize how much I'd grown accustomed to using my phone as my GPS device but I do.  I can get maps and directions, but its not the same as the Android's built-in turn-by-turn navigation which is stellar.

I love a lot of the little touches on the phone. I love the way that facebook is integrated into the whole experience and that linking a facebook friend with a contact makes everything that much easier to follow.  The home hub is awesome and now I want all my icons on the Droid to be live too.  And the panorama (or hub) apps are a welcome change from the page-based apps I live with on the Droid.

In the next part of this series, i'll talk about developing with the phone itself and how debugging works on the phone.

 

How We Used Data in GiveAQuiz.com

Silverlight Logo

As many of you may have heard, I recently launched http://GiveAQuiz.com as a new web site for creating and taking quizzes. The Data Team at Microsoft were great in helping me build this site. I've written a whitepaper detailing how we used the Microsoft data stack to accomplish it. This whitepaper shows how we used these data technologies to build the site:

If you are using Microsoft's Data stack for your own web-based and/or Silverlight site, give a look...hopefully some lessons learned you can use:

http://msdn.microsoft.com/en-us/library/ff847451.aspx

 

Bring Back Page Transitions to the Windows Phone List Application Template

Windows Phone 7

The new Windows Phone 7 Tools dropped this week and since I am writing a book on the subject, I decided to upgrade immediately. The upgrade was pretty clean.  I could repeat a bunch of other bloggers with instructions for migrating your projects to the Beta, but go Google it with Bing™ if that's what you need.

As I am writing a book on the subject, I am less dealing with migrating my applicaitons than seeing what has changed.  The first thing I did with the new tools was create a new Windows Phone List Application to see what was new in the way it worked.

For the uninitiated, the Windows Phone List Application is a simple model-driven application that shows a data-bound list of items on a first page and handles navigating to a second page for the details of the individual items. In the CTP version of the template switching pages would cause a page-flip animation to happen that was quite cool to see. The problem was that in the CTP the code that they included in the template was nasty. It was all done at the page level and I am glad to see they removed it.  But to my dismay they didn't replace it with anything.

Since I am in the business of doing demos (as evidenced by the upcoming Silverlight for the Windows Phone classes in Atlanta and Seattle), I wanted something sexier to show aspiring students.  At the same time I wanted to do it in a better way than the old template code did it.

The way that the page-based applications on the Windows Phone work is with a PhoneApplicationFrame class that hosts the application (deriving from the Navigation Framework's Frame class) and each page is an instance of the PhoneApplicationPage class. In the old template, all the transitions were done at the page level. I wanted something better. It seemed to me that if we could hide the transitions in the frame, it would be mostly transparent.  I could have derived from PhoneApplicationFrame do add the transitions, but I thought it was be nicer to use the Silverlight ecosystem to do it right.

To accomplish it, I used styling (at Jeff Wilcox's suggestion) to do the transitions. In the Silverlight Toolkit (remember to use the November 2009 toolkit that is compatible with Silverlight 3), there is a control called the TransitioningContentControl. This control can be used as a traditional content control but allows you to specify the kind of transition that takes place. By overriding the ControlTemplate for the PhoneApplicationFrame, I was able to replace the ContentControl with a TransitioningContentControl:

<Style x:Key="mainFrameStyle"
        TargetType="phone:PhoneApplicationFrame">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="phone:PhoneApplicationFrame">
        <Border x:Name="ClientArea"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <layout:TransitioningContentControl 
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Content="{TemplateBinding Content}"
                  Margin="{TemplateBinding Padding}">
          </layout:TransitioningContentControl>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Since Silverlight 3 (which the Phone SDK is based on) does not support implicit styling, we have to apply the style manually. In the Windows Phone List Application project, the frame is created in the App.xaml implementation file (e.g. .cs or .vb file). Inside the InitializePhoneApplication method, I simply added the style to the construction of the frame like so:

// App.xaml.cs
private void InitializePhoneApplication()
{
  if (phoneApplicationInitialized)
    return;

  // Create the frame but don't set it as RootVisual yet; 
  // this allows the splash
  // screen to remain active until the 
  // application is ready to render.
  RootFrame = new PhoneApplicationFrame()
  {
    // Use a style to use the Template 
    // with the TransitioningContentControl
    Style = (Style)Resources["mainFrameStyle"]
  };
  RootFrame.Navigated += CompleteInitializePhoneApplication;

  // Handle navigation failures
  RootFrame.NavigationFailed += RootFrame_NavigationFailed;

  // Ensure we don't initialize again
  phoneApplicationInitialized = true;
}

At this point the transition control worked but the default fadein/fadeout transition was too subtle.  I wanted the page-turn transition.  To do this, I had to override the TransitioningContentControl's template.  Since I was not going to re-use this template, I simply set it as the Template inline in the ControlTemplate for the PhoneApplicationFrame template like so:

<Style x:Key="mainFrameStyle"
        TargetType="phone:PhoneApplicationFrame">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="phone:PhoneApplicationFrame">
        <Border x:Name="ClientArea"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                VerticalAlignment="{TemplateBinding VerticalAlignment}">
          <layout:TransitioningContentControl 
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Content="{TemplateBinding Content}"
                  Margin="{TemplateBinding Padding}">
            <layout:TransitioningContentControl.Template>
              <ControlTemplate 
                TargetType="layout:TransitioningContentControl">
                <!-- See example code for complete control template
                     ... -->
              </ControlTemplate>
            </layout:TransitioningContentControl.Template>
          </layout:TransitioningContentControl>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Go grab the code and improve on it.  I am sure its not perfect:

http://wildermuth.com/downloads/PhoneListWithTransitions.zip

 

State of Data Access in Silverlight 4

Silverlight Logo

Back in February I wrote an article stating my opinion about the current State of Data Access in Silverlight (then Silverlight 3 and betas of WCF RIA Services and WCF Data Services). Things have improved in some ways since then but they haven't been fixed.  Here's my thoughts on the current state:

The three options for data access are still the same "Web Services, WCF Data Services and WCF RIA Services". My major issue with data access today in Silverlight persists: there is no perfect answer. There is give and take with each approach and giving good advice about the right one is difficult.  Instead of talking about the right way to do it, let's look at a chart i've been coming up with to simplify it:

 Silverlight Data Access Chart

(Click to enlarge)

This chart should represent the pros and cons I see with all the technologies.  Hopefully this helps you make the decision for your projects.

AgiliTrain welcomes Russell Fustino!

Silverlight Tour

The Silverlight Tour and AgiliTrain would like to welcome our newest instructor: Russell Fustino. Russ brings a great pedagree as a former Microsoft Evangelist and co-host of the Russ's Toolshed Channel 9 Show.  We're excited to have him teaching for the Silverlight Tour!

From his bio:

Russ Fustino wisely shelved dreams of rock and roll stardom in order to share his vast knowledge with developers nationwide. Given that he can’t sing or play an instrument, other than in Guitar Hero, we’re all very grateful. Russ has more than 30 years of software development. He’s the creator of the Russ' Tool Shed developer seminar series and has donned his trademark suspenders, hardhat and tool belt in presentations for over 120,000 developers at over 2000 live events and over 400,000 views of his online videos. Russ also has expertise in developing .NET and Web-based solutions using Microsoft tools as well as Internet Audio and Video producing. Russ is now independent and President and founder of Russ' ToolShed Network, Inc and Mentor at Solid Quality Mentors. Previously, Russ worked for Microsoft for 12 years as a Developer Evangelist. Also, previous to that, Russ worked as a VB instructor, headed up a development department, and created several client/server applications and system software products. His specialties include development with VB.NET, C# , ASP.NET, Expression Studio and Silverlight, Development Tools and debugging. Russ' Tool Shed Videos can be seen at: http://channel9.msdn.com/shows/toolshed.  You have to know the code to get in the shed. KNOW THE CODE! Site: www.russtoolshed.net

Russ will be teaching our Silverlight Tour curriculum as well as our Windows Phone 7 Courses.

 

What I Learned By Writing a WP7 App: Part 1 - Manipulations

Windows Phone 7

As some of you have heard, I am working on a Windows Phone 7 book. While most of my time has been spent trying to convince the publisher to let me call it "The Windows Phonebook: Writing Applications for Windows Phone 7, A-Z", I've had the chance to start writing a real application with it. The purpose of the application is to get comfortable with the programming environment but be able to ship a free app at launch that has some value (yeah, I am already signed up for a Marketplace Developer account!).

For this first application, I decided to completely rip off use for inspiration a couple of Android applications that show the current phase of the moon. Writing this simple app was not that difficult (though its not done so I won't be sharing the code yet), but I found that I spent more time trying to get good moon images and a good moon-phase algorithm than I did in getting the Silvelright code to work. Here's the current look of the application:

Moon Phaser

 (click the image for a full sized version)

The idea is simple, show the current day's moon phase and let the user swipe right or left to move the current day and watch the moon change phase. To do this I had to get comfortable with Manipulations.

Manipulations are the way that the Windows Phone 7 SDK communicates the touch interface to the developer.  Currently the Manipulations are only available to subclasses of the Control class because the 'events' are exposed as protected virtual methods. This is suboptimal but it does work. I hope this changes in later versions of the SDK.

When using Manipulations, you have three virtual methods you can override (typically in a UserControl or in my case the MainPage which derives from the PhoneApplicationPage class). These methods are:

  • OnManipulationStarted
  • OnManipulationDelta
  • OnManipulationCompleted

In my case I focused on the completion of a Manipulation (swipes) so I only had to deal with one of the methods: OnManipulationCompleted. This virtual method passes in ManipulationCompletedEventArgs object that contains information about the manipulation and the object it was connected to. So in my overriding of the virtual method, the first thing I needed to do was to ensure that the manipulation was directly on the the image of the moon by checking the ManipulationContainer property of the ManipulationCompletedEventArgs:

public partial class MainPage : PhoneApplicationPage
{
  // ...

  protected override void OnManipulationCompleted(
    ManipulationCompletedEventArgs e)
  {
    base.OnManipulationCompleted(e);

    // Ensure its the Moon Picture that is being manipulated
    if (e.ManipulationContainer == moonPic)
    {
      // ...
    }
  }

  // ...

}

Since we cannot (hopefully yet) handle events directly on Controls, I needed to ensure that the swipe happened on the image itself.  Now that I knew its on the picture of the moon, I could test to see what kind of swipe occurred if any. The ManipulationCompletedEventArgs has a property called TotalManipulation that exposes the information about the complete touch gesture. The TotalManipulation property is an instance of the ManipulationDelta class. This class exposes two properties that tell you about the type of gesture that was generated.  The properties are:

  • Translation: The movement of the gesture as in dragging or swiping.
  • Scale: The extent of a pinch gesture.

The name of these properties is similiar to their relationship to the Transforms that match the two operations (TranslateTransform and ScaleTransform). With the information in the TotalManipulation, I could determine if a swipe occurred simply by testing to see direction of the swipe (by testing the Translation's X and Y properties):

// If its a swipe right which means that the user 
// dragged their finger at least 100 pixels to the right 
// and didn't move their finger far to up or down 
// (-25 to 25 in the translation)
if (e.TotalManipulation.Translation.X > 100 &&
    (e.TotalManipulation.Translation.Y > -25 && 
     e.TotalManipulation.Translation.Y < 25))
{
  _vm.MoveToNextDay();
  SetMoonFrame();
}

// If its a swipe left which means that the user 
// dragged their finger at least 100 pixels to the left
// and didn't move their finger far to up or down 
// (-25 to 25 in the translation)
if (e.TotalManipulation.Translation.X < -100 &&
    (e.TotalManipulation.Translation.Y > -25 && 
     e.TotalManipulation.Translation.Y < 25))
{
  _vm.MoveToPreviousDay();
  SetMoonFrame();
}

 In this code I am checking the translation to see where the swipe happened.  Checking the X axis was making sure the swipe was at least 100 pixels in length and the Y axis to make sure it was somewhat level swipe.  While some are hoping that the raw gesture data will also be exposed by Microsoft for the phone, the simplification of the Manipulation API does make most simple work dead easy to code against.

As I continue working on the book and this (and other) applications, I'll continue this series to hopefully highlight some of the new API's in the WP7 SDK.

 

Blogging...

Its been a hectic couple of months, but I am starting to see the light of day. While I am teach The Silverlight Tour in Boston this week, I am getting back on the blogging bandwagon.  In the next few weeks you'll see me delve into many of the topics you'd expect from me including:

  • Silverlight 4 (Securing it; accessing data; data binding; etc.)
  • Programming for the Windows Phone 7
  • Data Development in Silverlight 4 (has anything changed)

I've also been itching to do a "State of Android" blog about my favorite apps and what I like and don't like about the platform at the moment.

If there is anything you'd like to see me talk, about comment here (note, I won't blog about your specific problem; but more generalities.)

More Rants