Windows Phone 7 UI設(shè)計(jì)：理解MainPage.xaml

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

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

【51CTO譯文】在前文中51CTO已經(jīng)向大家介紹過(guò)Windows Phone 7 UI設(shè)計(jì)理念、應(yīng)用程序開(kāi)發(fā)平臺(tái)，以及在做UI設(shè)計(jì)時(shí)應(yīng)該理解的代碼隱藏文件和啟動(dòng)畫(huà)面，在本文中我們將介紹如何理解Windows Phone應(yīng)用程序中的MainPage.xaml。

下面的代碼片段顯示了MainPage.xaml的原始代碼，提供了一個(gè)ApplicationBar按鈕示例，默認(rèn)情況下，這些代碼是被注釋掉的，因此在設(shè)計(jì)視圖中是看不到應(yīng)用程序工具條的，如果取消從<phone:Phone-ApplicationPage.ApplicationBar>開(kāi)始的注釋，你就會(huì)看到效果了。

圖1 顯示了MainPage.xaml的文檔結(jié)構(gòu)。

圖 1 MainPage.xaml默認(rèn)的文檔結(jié)構(gòu)

通過(guò)文檔結(jié)構(gòu)可以加快了解組成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，所有頁(yè)面內(nèi)容全部位于LayoutRoot中，需要注意的是ApplicationBar沒(méi)有指定具體的名字，它也屬于PhoneApplicationPage的一部分，因?yàn)閼?yīng)用程序工具條是一個(gè)特殊的Shell控件，TitlePanel是擁有兩個(gè)TextBlock控件的StackPanel。

◆ApplicationTitle：默認(rèn)情況下，它的“Text”屬性被設(shè)為“MY APPLICATION”，你可以修改為你自己的應(yīng)用程序標(biāo)題名字。

◆PageTitle：默認(rèn)情況下，它的“Text”屬性被設(shè)為“page name”，如果你的應(yīng)用程序有多個(gè)頁(yè)面，你可以使用這個(gè)TextBlock指定一個(gè)真實(shí)的頁(yè)面，如果應(yīng)用程序只有一個(gè)頁(yè)面需要控件，這個(gè)TextBlock就會(huì)占用不必要的空間，如果你刪除它，StackPanel的高度值會(huì)自動(dòng)調(diào)整，因此，當(dāng)你需要放置更多的控件時(shí)，可以移除PageTitle。

圖2顯示了一個(gè)TextBlock和一個(gè)位于ContentGrid內(nèi)的TextBlock，Silverlight for Windows Phone支持主題，因此根據(jù)用戶在設(shè)備中選擇的主題不同，每個(gè)控件的外觀可能都不一樣。

圖 2 應(yīng)用默認(rèn)主題的設(shè)計(jì)視圖，顯示了添加的控件樣式

默認(rèn)情況下，Visual Studio 2010工具箱提供了最常見(jiàn)的Windows Phone控件，在工具箱上下文菜單中點(diǎn)擊“選擇”可以添加更多隱藏起來(lái)的控件，例如，非常有用的老式InkPresenter控件，它允許用戶直接用手指作畫(huà)。

你也可以使用Silverlight 3引入的3D投影，但如果你不想為這些3D投影編寫(xiě)XAML代碼，那你必須選擇Microsoft Expression Blend 4 for Windows Phone，實(shí)際上，如果你要?jiǎng)?chuàng)建一個(gè)復(fù)雜的UI，Expression Blend可以簡(jiǎn)化你的工作，它也允許你使用行為簡(jiǎn)化UI控件響應(yīng)常見(jiàn)的多點(diǎn)觸摸手勢(shì)。

Expression Blend 4提供了更精密的設(shè)計(jì)視圖，當(dāng)你使用ApplicationBar時(shí)，你可以從預(yù)定義圖標(biāo)列表為每個(gè)按鈕選擇不同的圖標(biāo)，如圖3所示。

圖 3 Expression Blend 4為ApplicationBarIconButton提供了一個(gè)預(yù)定義的圖標(biāo)下拉列表

ApplicationBar是由許多ApplicationBarIconButton控件組成的，這些圖標(biāo)顯示在一個(gè)小圓圈內(nèi)，如圖4所示。

圖 4 兩個(gè)ApplicationBarIconButton控件和它們對(duì)應(yīng)的圖標(biāo)

ApplicationBar也可以包括ApplicationBarMenuItem控件，你可以為每個(gè)ApplicationBarIconButton和ApplicationBarMenuItem控件加入一個(gè)Click事件處理程序。注意ApplicationBar控件是可選的，當(dāng)你在Visual Studio 2010或Expression Blend 4 for Windows Phone中運(yùn)行項(xiàng)目時(shí)，生成的結(jié)果將會(huì)部署到Windows Phone 7模擬器中，應(yīng)用程序第一次運(yùn)行時(shí)，Windows Phone 7模擬器需要一點(diǎn)時(shí)間來(lái)加載，但不用關(guān)閉模擬器就可以啟動(dòng)另一個(gè)調(diào)試會(huì)話，保持模擬器一直運(yùn)行會(huì)帶來(lái)很大的方便，在你完成必要的修改后，可再次運(yùn)行，如果你關(guān)閉模擬器，重新運(yùn)行項(xiàng)目時(shí)又要再加載一次。圖5顯示了運(yùn)行著一個(gè)非常簡(jiǎn)單的UI的模擬器，點(diǎn)擊模擬器的開(kāi)始菜單，將會(huì)看到Internet Explorer等應(yīng)用程序的圖標(biāo)。

圖 5 運(yùn)行中的Windows Phone 7模擬器

圖6顯示了一個(gè)示例應(yīng)用程序的自定義圖標(biāo)。

圖 6 菜單項(xiàng)列表中顯示的應(yīng)用程序自定義圖標(biāo)

圖7顯示了模擬器中的自定義啟動(dòng)畫(huà)面，默認(rèn)情況下，項(xiàng)目定義支持PhoneApplicationPage的縱向顯示。

圖 7 應(yīng)用程序啟動(dòng)時(shí)顯示的自定義啟動(dòng)畫(huà)面

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

SupportedOrientations="PortraitOrLandscape" Orientation="Landscape"

控件的位置和大小將會(huì)根據(jù)設(shè)備的方向，PhoneApplicationPage的SupportedOrientations屬性值不同而有所變化，如果你希望你的應(yīng)用程序支持橫向和縱向使用，必須將SupportedOrientations設(shè)為PortraitOrLand scape。記住一定要用模擬器測(cè)試不同的方向，避免用戶旋轉(zhuǎn)設(shè)備時(shí)，控件的位置和大小出現(xiàn)異常，圖8顯示了一個(gè)應(yīng)用程序在模擬器中旋轉(zhuǎn)方向后的樣子。

圖 8 Windows Phone 7模擬器橫向顯示一個(gè)應(yīng)用程序