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,
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.
9 Responses to You Already Are A Windows Phone 7 Programmer