[WP]解析MainPage.xaml-布局文件

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

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

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

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

  1. <phone:PhoneApplicationPage
  2. x:Class="WPBusinessApp.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:phone="clrnamespace:
  6. Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  7. xmlns:shell="clrnamespace:
  8. Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  9. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  10. xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/
  11. 2006"
  12. FontFamily="{StaticResource PhoneFontFamilyNormal}"
  13. FontSize="{StaticResource PhoneFontSizeNormal}"
  14. Foreground="{StaticResource PhoneForegroundBrush}"
  15. SupportedOrientations="Portrait" Orientation="Portrait"
  16. mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
  17. shell:SystemTray.IsVisible="True">
  18. <!—LayoutRoot contains the root grid where all other page
  19. content is placed—>
  20. <Grid x:Name="LayoutRoot" Background="Transparent">
  21. <Grid.RowDefinitions>
  22. <RowDefinition Height="Auto"/>
  23. <RowDefinition Height="*"/>
  24. </Grid.RowDefinitions>
  25. <!—TitlePanel contains the name of the application and
  26. page title—>
  27. <StackPanel x:Name="TitlePanel" Grid.Row="0"
  28. Margin="24,24,0,12">
  29. <TextBlock x:Name="ApplicationTitle" Text="MY
  30. APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
  31. <TextBlock x:Name="PageTitle" Text="page name"
  32. Margin="-3,-8,0,0" Style="{StaticResource
  33. PhoneTextTitle1Style}"/>
  34. </StackPanel>
  35. <!—ContentPanel - place additional content here—>
  36. <Grid x:Name="ContentGrid" Grid.Row="1">
  37. </Grid>
  38. </Grid>
  39. <!— Sample code showing usage of ApplicationBar—>
  40. <phone:PhoneApplicationPage.ApplicationBar>
  41. <shell:ApplicationBar IsVisible="True"
  42. IsMenuEnabled="True">
  43. <shell:ApplicationBarIconButton
  44. x:Name="appbar_button1" IconUri="/Images/appbar_button1.png"
  45. Text="Button 1"></shell:ApplicationBarIconButton>
  46. <shell:ApplicationBarIconButton
  47. x:Name="appbar_button2" IconUri="/Images/appbar_button2.png"
  48. Text="Button 2"></shell:ApplicationBarIconButton>
  49. <shell:ApplicationBar.MenuItems>
  50. <shell:ApplicationBarMenuItem
  51. x:Name="menuItem1" Text="MenuItem
  52. 1"></shell:ApplicationBarMenuItem>
  53. <shell:ApplicationBarMenuItem
  54. x:Name="menuItem2" Text="MenuItem
  55. 2"></shell:ApplicationBarMenuItem>
  56. </shell:ApplicationBar.MenuItems>
  57. </shell:ApplicationBar>
  58. </phone:PhoneApplicationPage.ApplicationBar>
  59. <!— End of sample code —>
  60. </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所示。

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

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

两个ApplicationBarIconButton控件和它们对应的图标
图 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等应用程序的图标。

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

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

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

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

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

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

  1. SupportedOrientations="PortraitOrLandscape" Orientation="Landscape"

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

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

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

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

作者：Gaston Hillar

posted @ 2014-06-04 14:22  It's_Lee  阅读(564)  评论(0)  编辑  收藏  举报