software solutions for a mobile world

Migrating WP7 April CTP projects to WP7 Beta

Andy Wigley

The Beta of the Windows Phone 7 developer tools has been released today! Get them from http://developer.windowsphone.com.

If you have been building projects using the April CTP of the Windows Phone 7 developer tools, you’ll find a number of changes needed to get them to compile with the Beta version which was released on July 12th.

You should also read this posting from Jaime Rodriguez. In it he gives much more detail about the changes – read that for the complete story on the beta changes.

Namespace Declarations in XAML

In the CTP, there were multiple small dlls containing the various phone classes: Microsoft.Phone.dll, Microsoft.Phone.Controls.dll, Microsoft.Phone.Controls.Navigation.dll, Microsoft.Phone.Shell.dll. In the beta, these have all been combined into one: Microsoft.Phone.dll.

The main impact of this is in the namespace declarations at the head of each xaml file. In the project item templates for the CTP, when you added a xaml page each had a namespace declaration mcp pointing at the Microsoft.Phone.Controls namespace – delete this. You will also find a phoneNavigation namespace declaration pointing at the Microsoft.Phone.Controls namespace, but in Microsoft.Phone.Controls.Navigation.dll.Change this to Microsoft.Phone.dll. I like to change the declared prefix from phoneNavigation to just ‘phone’ but that’s a personal preference:

Change

    xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

to

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

If you change the prefix, you’ll need to change uses of the old prefix as well, of course. For example, in each page:

<phone:PhoneApplicationPage 
    x:Class="MyPhoneSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">
</phone:PhoneApplicationPage> 

Removal of declaration of Phone Styles from App.Xaml

You should always use the built-in style names when styling controls, such as PhoneTextNormalStyle. These styles ensure the output of a control is presented appropriately for Windows Phone and respects the users Theme selection.

In the CTP, these styles were defined in each application in App.Xaml. In the Beta, you should remove these style declarations from App.Xaml as the definition of these styles is ‘baked into’ the runtime and you should only include style definitions in your xaml files for any custom styles you create that differ from the built-in ones.

Delete everything from the <!--************ THEME RESOURCES ************—> comment to the end of the resources section:

    <!-- Resources for following the Windows Phone design guidelines -->
    <Application.Resources>

            <!--************ THEME RESOURCES ************—>   !DELETE FROM HERE DOWN
        <!-- Color Resources –>
       …
    </Application.Resources>

So now that these styles are no longer helpfully listed in your App.xaml, how do you look up the styles available? Well, read the documentation is one solution, or you can go to the <installDrive>:\\Program Files\Microsoft SDKs\Windows Phone\v7.0\Design folder and open up one of the theme files, for example DarkBlue.xaml – these contain the design time definitions of the phone styles. Open up System.Windows.xaml from the same folder and you can see the design time values of the styles for each of the standard controls.

Since control styles are now implicit, you should remove Style property settings on your input controls from your xaml (unless you’ve created a custom style of course!). For example:

          <TextBox Text="{Binding FirstName, Mode=TwoWay}" VerticalAlignment="Center"
            x:Name="tbFirstName" Style="{StaticResource PhoneTextBoxStyle}" Grid.Column="1"
            Margin="23,0,8,0"/>

Title Blocks

These have changed a bit in the beta. The style names have changed, and you also need to define a margin on your title block to ensure it sits nicely under the phone status bar and indented from the left side of the screen:

Change

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text="list" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>

to

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="list" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextTitle1Style}"/>
        </Grid>

List Items

In the CTP, there was a ListViewItem control that was a container for each item defined in a ListBox. Typically, the xaml looked like this:

            <ListBox x:Name="ListBoxOne" ItemsSource="{Binding Items}" MouseLeftButtonUp="ListBoxOne_MouseLeftButtonUp" 
Style="{StaticResource PhoneListBox}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal"> <Border x:Name="DataTemplateBorder" Height="44" Width="44" BorderBrush="White" … > <Path x:Name="DataTemplatePath" Height="16" Width="11" Fill="White" Stretch="Fill" … /> </Border> <mpc:ListViewItem Layout="TextAndDetailsWithIcon" Text="{Binding LineOne}"
Details="{Binding LineTwo}" Style="{StaticResource PhoneListBoxItemLayout}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

As you can see, the <mpc:ListViewItem… line defines the content of each list item (the Text and Details properties are databound to the LineOne and LineTwo fields of the data source respectively), the Style property is set to ="{StaticResource PhoneListBoxItemLayout}" which is a style that you just deleted when we removed all those style definitions from App.Xaml and the Layout property is set to the name of one of the layout options built into the ListViewItem control.

Well, the predefined ListViewItem templates are no more, so instead we define the layout of our list item directly in the DataTemplate, as follows:

            <ListBox x:Name="MainListBox" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                            <Image x:Name="ItemImage" Source="/WindowsPhoneListApplication1;component/Images/ArrowImg.png" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
                            <StackPanel>
                                <TextBlock x:Name="ItemText" Text="{Binding LineOne}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock x:Name="DetailsText" Text="{Binding LineTwo}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

This is easier to edit the layout on an app by app basis.

Note the best way of getting this right is simply to create a new Windows Phone List project using the beta tools and copy the markup from there.

Application Bar Buttons

Application Bar Buttons must have a Text property defined, which defines a small string that shows underneath the button when the App Bar has focus.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton>
            <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

Summary

So that’s a quick run through the major changes. Of course there are a number of other changes, but these are the ones that most people will encounter when updating CTP projects to the Beta. Enjoy!

Technorati Tags:

Posted Jul 12 2010, 03:36 PM by Andy Wigley
Copyright © 2014 APPA Mundi Limited. All Rights Reserved. Terms of Use and Privacy Policy. OrcsWeb's Windows Cloud Server Hosting