Windows Phone 7 UI設計：理解MainPage.xaml

作者：黃永兵譯 2010-11-10 10:12:21

在本文中我們將介紹如何理解Windows Phone應用程序中的MainPage.xaml。代碼片段顯示了MainPage.xaml的原始代碼，提供了一個ApplicationBar按鈕示例，默認情況下，這些代碼是被注釋掉的，如果取消從<phone:Phone-ApplicationPage.ApplicationBar>開始的注釋，你就會看到效果了。

【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模擬器橫向顯示一個應用程序