Yesterday at MIX10, Microsoft (specifically, Scott Guthrie) announced the general availability of all the tools that you’ll need to design and build “delightful” applications for Windows Phone 7. Follow along with me as I build my very first Windows Phone 7 application!
For future reference, the hub for all things Windows Phone developy is http://developer.windowsphone.com.
Tools and Documentation
First things first, we need some tools.
- Download and install the Windows Phone Developer Tools CTP.This includes Visual Studio 2010 for Windows Phone, the emulator, Silverlight for Windows Phone, and XNA 4.0 Game Studio. If you already have a copy of VS2010 installed, no worries – just install this right over the top of it.
- Download and install Expression Blend 4 Beta. While we could do everything in Visual Studio, Expression Blend will give us way more power for laying out the content of our application.
While those are downloading and installing, we may as well read some documentation.
- Read the Application Platform Overview to get a big picture of how all the pieces fit together.
- Read the QuickStart Guide for creating your first Silverlight App for Windows Phone.
- If your tools are still downloading, start browsing the class library documentation. This is the good stuff anyway.
The App
The app we’ll build is about as simple as it gets. We’ll use tally marks to write a counting application. If the user taps the screen, a mark is added to the tally. To keep it extra simple, we’ll only support counting up to five … for now.
If you want to follow along, go ahead and download the full source code now.
Creating your Project
After our tools are installed, it’s goitime. Fire up Visual Studio and select File, New Project. From the left-hand menu, find Silverlight for Windows Phone and then select “Windows Phone Application” from the choices.
This will create a skeleton for your project and open up the main page. Like Silverlight navigation applications, Windows Phone 7 applications are based on pages.
Making it Yours
Using the XAML view on the right, find the two textblocks that are responsible for rendering the name of your application and the name of the current page. I renamed my application to “TALLY MARKS” and my page to “count”. Note that the app name is all caps and the page name is all lowercase to follow the style guidelines established by the skeleton application.
1: <Grid x:Name="TitleGrid" Grid.Row="0">
2: <TextBlock Text="TALLY MARKS"
3: x:Name="textBlockPageTitle"
4: Style="{StaticResource PhoneTextPageTitle1Style}"/>
5: <TextBlock Text="count"
6: x:Name="textBlockListTitle"
7: Style="{StaticResource PhoneTextPageTitle2Style}"/>
8: </Grid>
A UserControl for our Tally Marks
Next we’ll create a user control to handle the display of the tally marks. To make things easy, you can download the full XAML for the user control right here. Or if you downloaded the source (link above), you already have it. Just add a file to your project called “MarksUserControl.xaml” and paste the code right in. You’ll probably have to update the class name to match your assembly name, though – it’s the fifth line in the file.
1: x:Class="TallyMarks.MarksUserControl
Change “TallyMarks” to match the name of your project.
Visual States
Now, if you open up MarksUserControl.xaml in Expression Blend, you’ll see that it has six states. Check out the Visual State Manager by selecting the “States” tab in the upper-left of the Expresssion Blend window.
The default state shows a message to tell the user how to use the program.
The rest of the states show the different possibilities for the tally marks, from one through five. When we expand the app to count beyond five, we’ll be able to reuse this concept and count by creating multiple instances of the control.
Theming support
Notice that the user control uses the phone’s background and highlight colors. If the user changes their phone theme, the app will change to match.
1: <Rectangle.Stroke>
2: <SolidColorBrush
3: Color="{StaticResource PhoneAccentColor}"/>
4: </Rectangle.Stroke>
5: <Rectangle.Fill>
6: <SolidColorBrush
7: Color="{StaticResource PhoneBackgroundColor}"/>
8: </Rectangle.Fill>
The Model
Next up is the model. Since this is Silverlight, our app needs something to bind to or it won’t be happy. Our model is pretty simple – it just needs to keep track of the current count. Here it is:
1: public class TallyModel : INotifyPropertyChanged
2: {
3: private int _count;
4:
5: public int Count
6: {
7: get { return _count; }
8: set
9: {
10: _count = value;
11: if (PropertyChanged != null)
12: {
13: PropertyChanged.Invoke(
14: this,
15: new PropertyChangedEventArgs("Count"));
16: }
17: }
18: }
19:
20: public event PropertyChangedEventHandler PropertyChanged;
21: }
Notice that we implement INotifyPropertyChanged so the app can keep up with changes to its model.
The Main Page
Now it’s just a matter of wiring things up. On our main page, we need to do three things
- Display the user control and the current count
- Bind the model
- Increment the counter when the user control is tapped
Displaying the user control and the current count
To display the user control and the current count, we’ll drop an instance of our user control into the content grid and also add a textblock to display the current count.
1: <Grid x:Name="ContentGrid" Grid.Row="1" >
2: <Grid.RowDefinitions>
3: <RowDefinition Height="Auto"/>
4: <RowDefinition Height="*"/>
5: </Grid.RowDefinitions>
6: <local:MarksUserControl x:Name="Marks"
7: MouseLeftButtonUp="MarksUserControl_MouseLeftButtonUp"/>
8: <TextBlock x:Name="CounterTextBlock" Grid.Row="1"
9: Text="{Binding Count, Mode=OneWay}"
10: FontSize="96"
11: HorizontalAlignment="Center"
12: VerticalAlignment="Center">
13: <TextBlock.Foreground>
14: <SolidColorBrush
15: Color="{StaticResource PhoneAccentColor}"/>
16: </TextBlock.Foreground>
17: </TextBlock>
18: </Grid>
Binding the model
You’ll see in the XAML above that the TextBlock is already expecting to be bound to the TallyModel so it can pull out the Count to display.
To bind things up, we have to tell our page what its model is with a few lines of XAML.
1: <phoneNavigation:PhoneApplicationPage.DataContext>
2: <model:TallyModel/>
3: </phoneNavigation:PhoneApplicationPage.DataContext>
Incrementing the counter
You may have already noticed in the XAML for the main page that we have wired up a MouseLeftButtonUp event for the MarksUserControl. This is where we’ll write our code to incremement the count and take care of the display of the user control.
1: private void MarksUserControl_MouseLeftButtonUp(
2: object sender,
3: MouseButtonEventArgs e)
4: {
5: MyDataContext.Count++;
6: var state = "Tally" + MyDataContext.Count;
7: VisualStateManager.GoToState(Marks, state, false);
8: }
In this example, MyDataContext is a private property that’s returning the model, already cast to the appropriate type.
1: private TallyModel MyDataContext
2: {
3: get
4: {
5: return this.DataContext as TallyModel;
6: }
7: }
First, we increment the count. Since we’re using binding and INotifyPropertyChanged, the text block that is displaying the current count will update automatically.
The visual states for the user control are slightly more complicated. I tried at first to bind to a custom property on the user control, but couldn’t get this to work. Blend didn’t even seem to want to allow it and when I did it anyway, I got XAML Parse errors. Oh well.
So, rather than get stuck, I changed it to just have the main page code behind manually change the visual state to match the current count. Works just as well.
All done
That’s about it. The finished product looks something like this. The best part – aside from the model, the whole app is less than a dozen lines of code. The rest is XAML. Download all the code here.
