Windows Phone 7 For Silverlight Programmers

MiniTutorialLogo

This is the first in a series of mini-tutorials on Windows Phone 7 Programming for Silverlight Programmers.

WinPhone_h_web

Audience: Silverlight Programmers who want to learn to program the new Windows Phone 7. Once the fundamentals are covered, the target audience will narrow to Silverlight Programmers who wish to participate in the Silverlight HVP Phone project

Getting Started

There are two paths to installing what you need

The First Three Applications

This tutorial will demonstrate how to create a simple Win7Phone application. The follow on will extend that application to create a second page, consisting of a simple form whose text fields are data bound.

The third tutorial, building on an application started by Tim Heuer, will demonstrate how to bind to live data through a web service, how to implement the panorama view and how to integrate both animation and live Bing maps.

Silverlight Versions

Windows Phone 7 runs Silverlight 3 with some of Silverlight 4’s capabilities and some other performance improvements that are specific to the phone right now, like automatic bitmap caching when doing storyboard animations and running storyboard animations on a separate threadThat said, if you install Silverlight 4 and the Phone Developer CTP (and/or Expression Blend 4 Preview and the Phone Updates)  your dev environment will be set up for Silverlight 4 for the Browser, and Silverlight 3+ for the Phone and it will all be more or less invisible to you.

First Silverlight Phone Application

Complete Source Code

The goal of this very first phone application is to become comfortable with the development of Win7Phone applications and to notice that you already know how to do this.

SLPhoneProjectTo crack through the difficult barrier of writing a very first application, let’s dive in and open Visual Studio 2010, bring up the templates and click on Silverlight For Windows Phone. On the right hand side select Silverlight Phone Application, and after giving your application a name and clicking OK, Visual Studio will open.

The most significant changes you may notice immediately are that the design surface is already populated with an image of a phone and that MainPage.xaml is split vertically rather than horizontally.

Some of the magic of making this look so much like a standard Windows Phone 7 Application can be found in App.xaml which contains, literally, hundreds of lines of resource code: essentially a complete style set for creating Windows Phone 7 applications.

The default layout created by VisualStudio is a Grid (LayoutRoot) with at least two inner grids, TitleGrid and ContentGrid.  The former is populated for you, and to get started you’ll want to change the Text fields of its two TextBlock controls.

<TextBlock Text="First Phone App" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
<TextBlock Text="Events" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

The ContentGrid is a placeholder for your own content and in here we’ll place a button, just as we would in a standard (web) Silverlight Application. That is, you can drag it from the toolbox onto the design surface (placing it where you like on the image of the phone) or you can drag it into the HTML, and you can set its properties either in the Properties Window or in the Xaml directly.

(For that matter, we could also instantiate the button dynamically, at run time!)

To keep the design simple, I’ll add a row, half way down the content grid, and place a button within it, using the Properties window to set its Location, and then just for fun, switching to the Xaml to set the remainder of its properties:

<Grid x:Name="ContentGrid" Grid.Row="1">
 <Grid.RowDefinitions>
    <RowDefinition
       Height="1*" />
    <RowDefinition
       Height="1*" />
 </Grid.RowDefinitions>
 <Button
    Name="SetText"
    Content="Button"
    HorizontalAlignment="Center"
    Margin="0"
    VerticalAlignment="Center"
    FontFamily="Segoe WP"
    FontSize="32"
    Foreground="Yellow"
    />
</Grid>

As is true in Silverlight Web applications, I could put the event into the Xaml, but as a rule, I don’t.  Thus, my code-behind will look like this,

using System.Windows;
using Microsoft.Phone.Controls;

namespace WindowsPhoneApplication2
{
   public partial class MainPage : PhoneApplicationPage
   {
      public MainPage()
      {
         InitializeComponent();
         SupportedOrientations =
              SupportedPageOrientation.Portrait |
              SupportedPageOrientation.Landscape;
         Loaded += new RoutedEventHandler( MainPage_Loaded );
      }

      void MainPage_Loaded( object sender, RoutedEventArgs e )
      {
         SetText.Click += new RoutedEventHandler( SetText_Click );
      }

      void SetText_Click( object sender, RoutedEventArgs e )
      {
         // todo
      }
   }
}

The first two lines in the constructor were added by Visual Studio, the third I added to handle the event when MainPage is fully loaded. Within that event handler I set up the event handler for the button click.

Again, in the interest of keeping everything simple, let’s have the event handler just change textBlockListTitle from Events to Clicked.

void SetText_Click( object sender, RoutedEventArgs e )
{
   textBlockListTitle.Text = "Clicked!";
}

When you debug the application the Windows Phone 7 emulator will start. Since this takes a little while, you’ll be happy to know that you can stop and start debugging repeatedly without closing or restarting the emulator.  Once your application comes up, clicking on the button will cause the event handler to be called and the text to change.

WinPhoneEmulator PhoneButtonEvent1

PhoneButtonEvent2

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.

12 Responses to Windows Phone 7 For Silverlight Programmers

  1. It’s going to be end of mine day, but before ending
    I am reading this impressive piece of writing to increase my
    knowledge.

  2. This is the turn Windows Phone 7 For Silverlight Programmers | Jesse Liberty blog for anyone who wants to essay out out around this message. You asking so more its virtually wearying to argue with you (not that I truly would want…HaHa). You definitely put a new spin on a matter thats been engrossed about for years. Nice congest, but high!

  3. David White says:

    Any plans to update samples and text to suit the Beta version of the tools? (eg the App.xaml file no longer has hundreds of lines of resources)

  4. Marc Roussel says:

    What is the phone used by this image ? I’m just curious.

  5. Pingback: DotNetShoutout

  6. Pingback: Windows Phone 7 For Silverlight programmers « Windows 7 Phone

  7. Pingback: You Already Are A Windows Phone 7 Programmer | Jesse Liberty

  8. Pingback: Windows Phone 7 For Silverlight programmers « Windows Phone Secrets

  9. Anonymous says:

    Hi, I am finding it difficult for creating nice transition between two pages. Do we have any toolkit controls available for WP7 silverlight development that takes care of navigation transition between pages. I have found iphone developers using Tableview and Subviews. Do we have any similar controls?

  10. AirForce9797 says:

    I noticed the Developer node is under C#. Is there also a VB vesion planed?

  11. Pingback: Dew Drop – May 17, 2010 | Alvin Ashcraft's Morning Dew

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>