Windows Phone 7 UI设计：理解MainPage.xaml

【51CTO译文】在前文中51CTO已经向大家介绍过Windows Phone 7 UI设计理念、应用程序开发平台，以及在做UI设计时应该理解的代码隐藏文件和启动画面，在本文中我们将介绍如何理解Windows Phone应用程序中的MainPage.xaml。

下面的代码片段显示了MainPage.xaml的原始代码，提供了一个ApplicationBar按钮示例，默认情况下，这些代码是被注释掉的，因此在设计视图中是看不到应用程序工具条的，如果取消从<phone:Phone-ApplicationPage.ApplicationBar>开始的注释，你就会看到效果了。

图1 显示了MainPage.xaml的文档结构。

 
图 1 MainPage.xaml默认的文档结构

通过文档结构可以加快了解组成UI的不同控件。

<phone:PhoneApplicationPage 
x:Class="WPBusinessApp.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:phone="clrnamespace:  
Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
xmlns:shell="clrnamespace:  
Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/  
2006"  
FontFamily="{StaticResource PhoneFontFamilyNormal}" 
FontSize="{StaticResource PhoneFontSizeNormal}" 
Foreground="{StaticResource PhoneForegroundBrush}" 
SupportedOrientations="Portrait" Orientation="Portrait" 
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
shell:SystemTray.IsVisible="True"> 
<!—LayoutRoot contains the root grid where all other page  
content is placed—> 
<Grid x:Name="LayoutRoot" Background="Transparent"> 
<Grid.RowDefinitions> 
<RowDefinition Height="Auto"/> 
<RowDefinition Height="*"/> 
</Grid.RowDefinitions> 
<!—TitlePanel contains the name of the application and  
page title—> 
<StackPanel x:Name="TitlePanel" Grid.Row="0" 
Margin="24,24,0,12"> 
<TextBlock x:Name="ApplicationTitle" Text="MY  
APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
<TextBlock x:Name="PageTitle" Text="page name" 
Margin="-3,-8,0,0" Style="{StaticResource  
PhoneTextTitle1Style}"/> 
</StackPanel> 
<!—ContentPanel - place additional content here—> 
<Grid x:Name="ContentGrid" Grid.Row="1"> 
</Grid> 
</Grid> 
<!— Sample code showing usage of ApplicationBar—> 
<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> 
<!— End of sample code —> 
</phone:PhoneApplicationPage> 
 

LayoutRoot是PhoneApplicationPage中的根Grid，所有页面内容全部位于LayoutRoot中，需要注意的是ApplicationBar没有指定具体的名字，它也属于PhoneApplicationPage的一部分，因为应用程序工具条是一个特殊的Shell控件，TitlePanel是拥有两个TextBlock控件的StackPanel。

◆ApplicationTitle：默认情况下，它的“Text”属性被设为“MY APPLICATION”，你可以修改为你自己的应用程序标题名字。

◆PageTitle：默认情况下，它的“Text”属性被设为“page name”，如果你的应用程序有多个页面，你可以使用这个TextBlock指定一个真实的页面，如果应用程序只有一个页面需要控件，这个TextBlock就会占用不必要的空间，如果你删除它，StackPanel的高度值会自动调整，因此，当你需要放置更多的控件时，可以移除PageTitle。

图2显示了一个TextBlock和一个位于ContentGrid内的TextBlock，Silverlight for Windows Phone支持主题，因此根据用户在设备中选择的主题不同，每个控件的外观可能都不一样。

 
图 2 应用默认主题的设计视图，显示了添加的控件样式

默认情况下，Visual Studio 2010工具箱提供了最常见的Windows Phone控件，在工具箱上下文菜单中点击“选择”可以添加更多隐藏起来的控件，例如，非常有用的老式InkPresenter控件，它允许用户直接用手指作画。

你也可以使用Silverlight 3引入的3D投影，但如果你不想为这些3D投影编写XAML代码，那你必须选择Microsoft Expression Blend 4 for Windows Phone，实际上，如果你要创建一个复杂的UI，Expression Blend可以简化你的工作，它也允许你使用行为简化UI控件响应常见的多点触摸手势。

Expression Blend 4提供了更精密的设计视图，当你使用ApplicationBar时，你可以从预定义图标列表为每个按钮选择不同的图标，如图3所示。

 
图 3 Expression Blend 4为ApplicationBarIconButton提供了一个预定义的图标下拉列表

ApplicationBar是由许多ApplicationBarIconButton控件组成的，这些图标显示在一个小圆圈内，如图4所示。

 
图 4 两个ApplicationBarIconButton控件和它们对应的图标

ApplicationBar也可以包括ApplicationBarMenuItem控件，你可以为每个ApplicationBarIconButton和ApplicationBarMenuItem控件加入一个Click事件处理程序。注意ApplicationBar控件是可选的，当你在Visual Studio 2010或Expression Blend 4 for Windows Phone中运行项目时，生成的结果将会部署到Windows Phone 7模拟器中，应用程序第一次运行时，Windows Phone 7模拟器需要一点时间来加载，但不用关闭模拟器就可以启动另一个调试会话，保持模拟器一直运行会带来很大的方便，在你完成必要的修改后，可再次运行，如果你关闭模拟器，重新运行项目时又要再加载一次。图5显示了运行着一个非常简单的UI的模拟器，点击模拟器的开始菜单，将会看到Internet Explorer等应用程序的图标。

 
图 5 运行中的Windows Phone 7模拟器

图6显示了一个示例应用程序的自定义图标。

 
图 6 菜单项列表中显示的应用程序自定义图标

图7显示了模拟器中的自定义启动画面，默认情况下，项目定义支持PhoneApplicationPage的纵向显示。

 
图 7 应用程序启动时显示的自定义启动画面

下面的代码指定了SupportedOrientations和Orientation的值。

SupportedOrientations="PortraitOrLandscape" Orientation="Landscape" 
 

控件的位置和大小将会根据设备的方向，PhoneApplicationPage的SupportedOrientations属性值不同而有所变化，如果你希望你的应用程序支持横向和纵向使用，必须将SupportedOrientations设为PortraitOrLand scape。记住一定要用模拟器测试不同的方向，避免用户旋转设备时，控件的位置和大小出现异常，图8显示了一个应用程序在模拟器中旋转方向后的样子。

 
图 8 Windows Phone 7模拟器横向显示一个应用程序

原文出处：http://www.drdobbs.com/windows/227701092;jsessionid=0LPPSGFA3UDNBQE1GHPSKH4ATMY32JVN

原文名：Developing a Silverlight UI for Windows Phone 7

作者：Gaston Hillar

【51CTO译稿，非经授权谢绝转载，合作媒体转载请注明原文出处、作者及51CTO译稿和译者！】

【编辑推荐】

1. Windows Phone 7 UI设计理念
2. 简述Windows Phone 7应用程序开发平台
3. Windows Phone 7 UI设计菜单：代码隐藏文件和启动画面 
4. Windows Phone 7开发工具发布更新包 附下载地址
5. 微软推Windows Phone 7 Silverlight程序员成赢家