This is the first in a series of mini-tutorials on Windows Phone 7 Programming for Silverlight Programmers.
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
- Get the Windows Phone Developer Kit
- Or… Download Visual Studio and the Silverlight Developer tools, and then install the Windows Developer tools
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
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.
To 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.
7 Responses to Windows Phone 7 For Silverlight Programmers