You Already Are A Windows Phone 7 Programmer

MiniTutorialLogo

John Papa invited me on to Silverlight TV to discuss a key premise of WP7: Silverlight Programmers are instant WP7 programmers. To demonstrate this,  I created two applications side by side: a traditional Silverlight (Web) application and a WP7 application using the same code.

I’ll go through  this step by step here, so that you can see the details that went by a bit quickly in the video. I’ll also bring the two programs into even closer alignment…

A friend had a cartoon on his wall some years ago that showed a hot dog standing at the mailbox in front of his suburban home.  The hot dog was wearing pants and a sports shirt, had a moustache and an astonished look on his face as he read the letter in his hands.  The caption was “You May Already Be A Weiner!”

What comes out of the box.

To get started we’ll open two Visual Studio 2010 applications. In the first, we’ll click on the Silverlight Themes and choose Silverlight Application and then in the second instance of Visual Studio we’ll click on the Silverlight for Windows Phone themes and choose Windows Phone Application,

Standard Silverlight App

Phone Silverlight

Start by opening the App.xaml file in the web version and place the following styles within the Resource tags.  Place the same styles in the same spot within the Phone application, noting that Visual Studio has also added extensive styling to make creating an application compliant with the look and feel of a Windows Phone application.

     <Style
   x:Key="PromptStyle"
   TargetType="TextBlock">
   <Setter
      Property="HorizontalAlignment"
      Value="Right" />
   <Setter
      Property="VerticalAlignment"
      Value="Center" />
   <Setter
      Property="Margin"
      Value="5" />
   <Setter
      Property="FontSize"
      Value="18" />
   <Setter
      Property="FontWeight"
      Value="Bold" />
   <Setter
      Property="Grid.Column"
      Value="0" />
</Style>

 <Style
   x:Key="ValueStyle"
   TargetType="TextBox">
   <Setter
      Property="HorizontalAlignment"
      Value="Left" />
   <Setter
      Property="VerticalAlignment"
      Value="Center" />
   <Setter
      Property="Margin"
      Value="5" />
   <Setter
      Property="FontSize"
      Value="18" />
   <Setter
      Property="FontWeight"
      Value="Normal" />
   <Setter
      Property="Grid.Column"
      Value="1" />
   <Setter
      Property="MinHeight"
      Value="20" />
</Style>

Note: if the prompts are black in the phone application, modify the prompt style by adding

<Setter
   Property="Foreground"
   Value="White" />

With these in place we’re ready to create a form page  in each application (i.e., a new Silverlight Child Window in the web application and a new Windows Phone Portrait Page in the phone version, and name each  Form 1.

We want to add a grid to each. In the case of the child window in the web version, within LayoutRoot; in  the case of the phone application, in the ContentGrid (both grids are created by Visual Studio)

<Grid.ColumnDefinitions>
   <ColumnDefinition
      Width="2*" />
   <ColumnDefinition
      Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
   <RowDefinition
      Height="1*" />
</Grid.RowDefinitions>

Creating the Prompts and Text Boxes

We’ll begin by adding a prompt and a text box for the first name.

<TextBlock
   Text="First Name"
   Grid.Row="0"
   Style="{StaticResource PromptStyle}"
   MaxHeight="Infinity" />
<TextBox
   x:Name="FirstName"
   Width="220"
   Grid.Row="0"
   Text="{Binding Path=FirstName}"
   Style="{StaticResource ValueStyle}" />

A few quick things to note:

  • Each uses its appropriate style that was added to App.xaml.
  • The TextBox sets its width (the prompt will be set to auto by the style)
  • The TextBox also sets its contents via Binding

The next block of code goes directly below and adds the remaining prompts.

 <TextBlock
    Text="Last Name"
    Grid.Row="1"
    Grid.Column="0"
    Style="{StaticResource PromptS
 <TextBox
    x:Name="LastName"
    Grid.Row="1"
    Width="220"
    Style="{StaticResource ValueSt
    Text="{Binding Path=LastName}"
 <TextBlock
    Text="Address"
    Grid.Row="2"
    Grid.Column="0"
    Style="{StaticResource PromptS
 <TextBox
    x:Name="StreetAddress"
    Grid.Row="2"
    Grid.Column="1"
    Width="220"
    Text="{Binding Path=Street}"
    Style="{StaticResource ValueSt
 <TextBlock
    Text="City"
    Grid.Row="3"
    Grid.Column="0"
    Style="{StaticResource PromptS
 <TextBox
    x:Name="City"
    Grid.Row="3"
    Width="220"
    Style="{StaticResource ValueSt
    Text="{Binding Path=City}" />

 <TextBlock
    Text="State, Zip"
    Grid.Row="4"
    Style="{StaticResource PromptS
 <StackPanel
    Grid.Row="4"
    Grid.Column="1"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    Orientation="Horizontal">
    <TextBox
       x:Name="State"
       Width="90"
       Text="{Binding Path=State}"
       Style="{StaticResource Valu
    <TextBox
       x:Name="Zip"
       Width="120"
       Text="{Binding Path=Zip}"
       Style="{StaticResource Valu
 </StackPanel>
 <TextBlock
    Text="Email"
    Grid.Row="5"
    Grid.Column="0"
    Style="{StaticResource PromptS
    Margin="5" />
 <TextBox
    x:Name="Email"
    Style="{StaticResource ValueSt
    Grid.Row="5"
    Width="220"
    Text="{Binding Path=Email}" />

Visual Studio creates the child window with OK and Cancel buttons, so let’s add the same to the Phone application:

 <StackPanel
    Orientation="Horizontal"
    Grid.Row="6"
    Grid.Column="0"
    Grid.ColumnSpan="2"
    Margin="5">

    <Button
       x:Name="CancelButton"
       Content="Cancel"
       Width="200"
       Height="Auto" />
    <Button
       x:Name="OKButton"
       Content="OK"
       Width="200"
       Height="Auto"></Button>

 </StackPane>

The DataSource

To have data to bind to, we’ll create a Customer class and give it a static method that will return valid, if simulated data.  To  do so, in each project right click on the project in Solution Explorer and choose Add Class.  Name the file Customer.cs.

The Customer class in both projects is identical:

public class Customer : INotifyPropertyChanged
{
   public event PropertyChangedEventHandler PropertyChanged;

   public Customer(
     string firstName,
     string lastName,
     string street,
     string city,
     string state,
     string zip,
     string email )
   {
      this.FirstName = firstName;
      this.LastName = lastName;
      this.Street = street;
      this.City = city;
      this.State = state;
      this.Zip = zip;
      this.Email = email;
   }

   public string FirstName { get; set; }
   public string LastName { get; set; }
   public string Street { get; set; }
   public string City { get; set; }
   public string State { get; set; }
   public string Zip { get; set; }
   public string Email { get; set; }

   private void OnPropertyChanged( string propertyName )
   {
      if ( PropertyChanged != null )
      {
         PropertyChanged(
            this, new PropertyChangedEventArgs( propertyName ) );
      }
   }

   public static Customer RandomCustomer
   {
      get
      {
         return new Customer(
         "George",
         "Washington",
         "1 Federal Plaza",
         "New York",
         "NY",
         "11214",
         "jliberty@Microsoft.com" );
      }
   }
}

The class consists of nothing, for this demo, except public automatic properties, a constructor and a static property to return an instance of a Customer.

You can simplify the using statement, in both projects, to a single line:

using System.ComponentModel;

I’ll leave out the event handling for our Form class, being content to load the form with bound data, but we do need a way to get from the first page to the second. Add a button to each MainPage.xaml (in the web form, you can add this right into LayoutRoot, in the Phone you’ll add it to ContentGrid).

<Button
    x:Name="ChangePage"
    Content="Form"
    Foreground="Navy"
    FontSize="32"
    FontWeight="Bold"
    VerticalAlignment="Center"
    HorizontalAlignment="Center" />

To make the text of the button more visible on the web form, change the foreground color from Navy to Yellow.

Changing Pages

The event handler for the Web application will instantiate the child window and “show it”

void FillForm_Click( object sender, RoutedEventArgs e )
{
  var wind = new ChildWindow1();
  wind.VerticalAlignment =
      System.Windows.VerticalAlignment.Top;
  wind.Margin = new Thickness( 0, 50, 0, 0 );
  wind.Show();
}

The event handler for switching to the child window in the web application can either set the RootVisual (declared in App.xaml.cs) or it can invoke the static Navigate method of the NavigationService

void FillForm_Click( object sender, RoutedEventArgs e )
{
  ( Application.Current.RootVisual as
      Microsoft.Phone.Controls.PhoneApplicationFrame ).
       Source =  new Uri( "/Form.xaml", UriKind.Relative
   );
}

or if you prefer

void FillForm_Click( object sender, RoutedEventArgs e )
{
     NavigationService.Navigate(
        new Uri("/Form.xaml", UriKind.Relative ) );
}

The Bottom Line

There is no doubt that as you dive deeper into WP7 you’ll run into differences between creating Silverlight applications for the web and for the phone, but these are (and will be) well documented and relatively rare.  As an experienced Silverlight developer you are, really and not just hype, an experienced Windows Phone 7 developer.  That means that rather than concentrating on syntax or on the API, you can focus on the design of your application.

Share

About Jesse Liberty

Jesse Liberty is a Master Consultant for Falafel Software, and has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Technical Evangelist for Telerik and for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS.
This entry was posted in Mini-Tutorial, WindowsPhone and tagged , . Bookmark the permalink.

7 Responses to You Already Are A Windows Phone 7 Programmer

  1. Excellent post. I was checking constantly this blog and I am impressed!

    Extremely useful information specifically the last part :) I care for such information a lot.
    I was looking for this certain information for a very long time.
    Thank you and good luck.

    My web-site :: second harvest food bank anderson indiana (https://twitter.com/)

  2. Pingback: Developing a Windows Phone 7 List Control | AhmadNaser

  3. Pingback: Dizem Blog » Blog Archive » Windows Phone 7 Resources and Links [WP7????]

  4. Pingback: A Windows Phone 7 Jump List Control | Colin Eberhardt's Adventures in WPF

  5. James Skemp says:

    Jesse, it looks like your fifth code block (paragraph before is “The next block of code goes directly below and adds the remaining prompts.”) is missing some text.

    View it in a browser to see where the coloring starts falling apart, otherwise it appears to be every line that starts with Style

    Style=”{StaticResource PromptS

    (Or at least it appears to be missing text in Chrome.)

  6. @newwp7 _dev
    I understand why you’d be frustrated but we have certainly been very clear at every opportunity… The day we announced the phone, and at every discussion I’ve seen since, we’ve been saying that the phones will be available at the end of the year.

    I think you’ll find that is true in the Mix videos and on Silverlight.net and on the Windows Phone Developer site.

    That said, I can see how it could be confusing if one were coming to this cold, and I’ll talk with the team about making the schedule for availability more explicit.

  7. newwp7 _dev says:

    hey thanks for the article, Im a seasoned .net programmer and have done some android, but i look and see that there are no windows 7 phones ? so this sucks to be blunt.
    I want to help MS be a little more competitive but they need to be very blunt about this, a mean I’ve been trying to get my hands on a win7 phone but no luck , any recommends ?
    thanks

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>