It this post I want to describe the process I went though building and publishing my first Silverlight application for Windows Phone 7. It is currently being tested, and I hope I will pass the test this time. I went through a couple of iterations of testing already, learning in the process from my mistakes. I want to describe the process so that I myself can remember the steps, but hopefully help other folks with some tips and tricks.
In order to be able to publish an application for Windows Phone 7, you must sign up as a developer on App Hub – http://create.msdn.com. This process was pretty painless actually, and only took a few minutes. A couple of important things to remember. Once you sign up, you will get an email from GeoTrust. You have to follow the link in the email and answer a few questions confirming your identity. The questions for me came from my credit report. This tells me that Microsoft really wants to ensure there is a real person behind the signee. Once you complete this step, you have to go back to App Hub and fill out your bank account information. Once you are done with paperwork, you are ready to start writing your application.
To create an app, you have to have some tools installed on your machine. You have to have at lest Visual Studio Express for Windows Phone, but I would also recommend Expression Blend for Windows Phone 7. You can find the links to the software on main page of App Hub.
Once you have basic tools, you will likely need some secondary software to help you write your applications. Here is what I would recommend.
- Windows Phone 7 Toolkit from CodePlex. Controls in the toolkit are written by Microsoft folks just like Silverlight toolkit. You can download the toolkit here To help you get started, check out Tim Heuer’s post on the toolkit here.
- Another good tool is version of Prism for Windows Phone 7. This article on MSDN describes the content of Prism for the phone. You can download binaries here. Once you build Prism 4, you will find Phone folder under Bin with all the binaries. There is a lot of cool functionality there.
- I had some troubles getting commanding to work using blend using event to command behavior. As a result, I also downloaded and used MVVM Light by Laurent Bugnion. You can download binaries and find some quick start links on CodePlex here.
- If you want to save some data on the phone, I would recommend using a database abstraction by your truly. You can download Database for Windows Phone 7 here.
Now, some sample code.
Application bar is the portion of the screen that shows the menu. I am using Prism to implement commands to react to user interactions. Here is XAML portion of the application bar.
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wi="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:i="clr-namespace:Microsoft.Practices.Prism.Interactivity;assembly=Microsoft.Practices.Prism.Interactivity"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:mvvmLight="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
assembly=System.Windows.Controls.DataVisualization.Toolkit"
x:Class="SportTimer.MainPage"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!–Sample code showing usage of ApplicationBar–>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/icons/clock.png" Text="time" />
<shell:ApplicationBarIconButton IconUri="/icons/person.png" Text="people"/>
<shell:ApplicationBarIconButton IconUri="/icons/event.png" Text="events"/>
<shell:ApplicationBarIconButton IconUri="/icons/graph.png" Text="history"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<wi:Interaction.Behaviors>
<i:ApplicationBarButtonCommand ButtonText="time"
CommandBinding="{Binding ChangeIndexCommand, Mode=OneWay}"
CommandParameterBinding="{Binding TimeIndex}"/>
<i:ApplicationBarButtonCommand ButtonText="people"
CommandBinding="{Binding ChangeIndexCommand, Mode=OneWay}"
CommandParameterBinding="{Binding PeopleIndex}"/>
<i:ApplicationBarButtonCommand ButtonText="events"
CommandBinding="{Binding ChangeIndexCommand, Mode=OneWay}"
CommandParameterBinding="{Binding EventIndex}"/>
<i:ApplicationBarButtonCommand ButtonText="history"
CommandBinding="{Binding ChangeIndexCommand, Mode=OneWay}"
CommandParameterBinding="{Binding HisotryIndex}"/>
</wi:Interaction.Behaviors>
<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" Background="Transparent">
Let me comment a bot on the code. Application bar can have at most 4 buttons, and I am using all of them. I am declaring application bar button command separately which is how Prism wants the implementation done, then bind commands to buttons via Text property of the button. Commands are declared in my view model as follows
public DelegateCommand<object> ChangeIndexCommand { get; set; }
public void OnChangeIndex(object parameter)
{
SelectedPivotIndex = int.Parse(parameter.ToString());
}
ChangeIndexCommand = new DelegateCommand<object>(OnChangeIndex);
I am creating an instance of the command in view model constructor. The command simply changes selected index of the pivot control,
I also have some button controls in my application. I use MVVM light for those, again because I could not get Prism behavior to work.
<Button Content="Stop" Grid.Row="3" Grid.Column="2">
<wi:Interaction.Triggers>
<wi:EventTrigger EventName="Click">
<mvvmLight:EventToCommand Command="{Binding Path=StopTimerCommand}" />
</wi:EventTrigger>
</wi:Interaction.Triggers>
</Button>
Another interesting control I use is ContextMenu from toolkit. I am using it to delete items from ListBox:
<ListBox x:Name="FilteredHistoryListBox" Grid.Row="3" Grid.ColumnSpan="3"
ItemsSource="{Binding Path=FilteredHistory}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="0" BorderThickness="0" Background="Transparent" Padding="0">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Delete">
<wi:Interaction.Triggers>
<wi:EventTrigger EventName="Click">
<mvvmLight:EventToCommand
Command="{Binding ElementName=EventsItem, Path=DataContext.DeleteHistoryCommand, Mode=OneWay}"
CommandParameter="{Binding}" />
</wi:EventTrigger>
</wi:Interaction.Triggers>
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel Margin="0,0,0,7">
<TextBlock Text="{Binding Path=TimeString}"
TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Path=HistoryDateString}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Now, about application bar icons. I was trying to use the icons from Visual Studio, and I failed the test. Then, I actually read the documentation 
.
The application bar icons must be 48×48 pixels with transparent background, with the icon itself (image or text) white 24×24 pixels. I found this very good post by Brad Tutterow, and I used it to create custom icons for my application. Nothing fancy, but my skill were good enough to create four icons for my Sport Timer application. Make sure to test your application in light theme either on the phone or emulator. Here is my person icon and graph icon.
I wanted to incorporate graphs info my application, and I found this great port of chart library from Silverlight toolkit. At least I think that is what it is. Here is the link to the post about it that includes download link.
Another tip that I have is that for some reason virtual keyboard did not work on one of my screens. Come to find out through trial and error that you must inherit for PhoneApplicationPage for that to work. I used UserControl, following typical Silverlight development pattern. Once I changed the inheritance in XAML and .cs files, everything worked like magic.
Also, you have to test your icons on the phone. Make sure to pin your application to start up to ensure it looks good. You can setup icons and test for start up page on the phone and regular list on the phone in properties of your application page. Make sure to check these settings.
You can use the same image or different ones. I followed the default application and used different sizes. You can see the image size from the icon name. All of them are images in png format.
When you submit your application, you are also required to submit a number of image in specific format. I used Paint.NET to resize my images and set DPI. You can do both through Resize command window. Also, make sure the screenshots of your application do not include the emulator itself, only the application. You will fail testing because of the this as well. Again, follow the descriptions in submission page to verify the DPI and sizes of all your images.
I hope this post may save a few folks a few extra minutes.
Thank you, very useful!