Channels ▼

Embedded Systems

Developing a Silverlight UI for Windows Phone 7

Understanding MainPage.xaml in a Windows Phone Application

The following code snippet shows the original code for MainPage.xaml. These lines shows the code that provides an example of the ApplicationBar buttons uncommented. By default, these lines appear commented, and therefore, you don't see the application bar buttons in the design view. If you uncomment the code that begins with <phone:Phone-ApplicationPage.ApplicationBar>, you will see the application bar buttons.

Figure 7 shows the document outline for MainPage.xaml.

[Click image to view at full size]
Figure 7: The document outline for MainPage.xaml with the default sample code that shows the usage of ApplicationBar.

The document outline allows you to understand the different controls that compose the basic UI.

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
<!—LayoutRoot contains the root grid where all other page
content is placed—>
<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<!—TitlePanel contains the name of the application and
page title—>
<StackPanel x:Name="TitlePanel" Grid.Row="0"
<TextBlock x:Name="ApplicationTitle" Text="MY
APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name"
Margin="-3,-8,0,0" Style="{StaticResource
<!—ContentPanel - place additional content here—>
<Grid x:Name="ContentGrid" Grid.Row="1">
<!— Sample code showing usage of ApplicationBar—>
<shell:ApplicationBar IsVisible="True"
x:Name="appbar_button1" IconUri="/Images/appbar_button1.png"
Text="Button 1"></shell:ApplicationBarIconButton>
x:Name="appbar_button2" IconUri="/Images/appbar_button2.png"
Text="Button 2"></shell:ApplicationBarIconButton>
x:Name="menuItem1" Text="MenuItem
x:Name="menuItem2" Text="MenuItem
<!— End of sample code —>

LayoutRoot is the root Grid within PhoneApplicationPage. All the page content is included in LayoutRoot. However, it is very important to notice that an ApplicationBar, with no specific name, is also part of PhoneApplicationPage, because the application bar is a special shell control. TitlePanel is a StackPanel with two TextBlock controls:

  • ApplicationTitle. By default, its Text property is set to "MY APPLICATION". You can use it to display the desired title for your application.
  • PageTitle. By default, its Text property is set to "page name". If your application has many pages, you can use this TextBlock to specify the actual page. However, if the application just needs one page with controls, this TextBlock can consume unnecessary space. If you delete this TextBlock, the StackPanel's height will auto-adjust its value. Thus, you can remove PageTitle when you need more space to place controls.

is the Grid where you have to place the controls. Figure 8 shows a TextBlock and a TextBlock within ContentGrid. Silverlight for Windows Phone supports theming, and therefore, each control is going to have a different look according to the theme selected by the user in his/her device.

[Click image to view at full size]
Figure 8: The design view applies the default theme for the controls that you add.

By default, the Visual Studio 2010 Toolbox provides the most common Windows Phone controls. However, there are important controls that don't appear and you have to add them by selecting Choose items -- in the context menu for the Toolbox. One example is the old InkPresenter control that is very useful to allow users to draw directly with their fingers.

You can use the 3D projections, introduced by Silverlight 3. However, if you don't want to write XAML code to add these projections, you will have to use Microsoft Expression Blend 4 for Windows Phone. In fact, if you have to create a complex UI, Expression Blend will simplify your work. Expression Blend also allows you to take advantage of the behaviors to simplify the creation of UI controls that respond to common multi-touch gestures.

Expression Blend 4 provides a more accurate design view when you have to work with the ApplicationBar. You can select the desired icon for each button from a list of predefined icons, as in Figure 9.

[Click image to view at full size]
Figure 9: Expression Blend 4 showing a dropdown list with predefined icons for an ApplicationBarIconButton.

The ApplicationBar is composed of many ApplicationBarIconButton controls. These icon buttons display a small icon within a circle, as in Figure 10.

[Click image to view at full size]
Figure 10: Two ApplicationBarIconButton controls with their icons.

The ApplicationBar can also include ApplicationBarMenuItem controls. You can attach a Click event handler for each of the ApplicationBarIconButton and the ApplicationBarMenuItem controls. Remember that the ApplicationBar control is optional. When you run the project in Visual Studio 2010 or Expression Blend 4 for Windows Phone, the results of the build process will be deployed in the Windows Phone 7 emulator. The first time you run the application, the Windows Phone 7 emulator will require time to load. However, you don't need to close the emulator to enable another debugging session. It is convenient to leave the emulator running, make the necessary changes to the project, and run it again. If you close the emulator, you will need more time to run the project again. Figure 11 shows the emulator running a very simple UI. If you click on the Start menu on the emulator, you will see the icon for Internet Explorer. You can access the menu with the icon for the new application by clicking on the next icon button (the arrow).

[Click image to view at full size]
Figure 11: Windows Phone 7 emulator in action.

Figure 12 shows the customized icon for a sample application.

[Click image to view at full size]
Figure 12: The menu item to access the application with its customized icon.

Figure 13 shows the customized splash screen in the emulator. By default the project defines support for the portrait orientation in the PhoneApplicationPage.

[Click image to view at full size]
Figure 13: The customized splash screen that appears before the application launches in the middle of the animated transition.

The following line indicates the values for SupportedOrientations and Orientation:

SupportedOrientations="PortraitOrLandscape" Orientation="Landscape"

The location and size for the controls will vary according to the device orientation and the value for the SupportedOrientations property for the PhoneApplicationPage. If you want your application to support both portrait and landscape orientations, you have to specify "PortraitOrLand scape" for SupportedOrientations.Remember to test the different orientations with the emulator to avoid unexpected locations or sizes for the controls when the user rotates the device. Figure 14 shows an example of an application with a new orientation in the emulator.

[Click image to view at full size]
Figure 14: Windows Phone 7 emulator displaying an application with the device in landscape orientation.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.