Windows Phone 7 UI設(shè)計(jì)：理解MainPage.xaml
原創(chuàng)【51CTO譯文】在前文中51CTO已經(jīng)向大家介紹過Windows Phone 7 UI設(shè)計(jì)理念、應(yīng)用程序開發(fā)平臺，以及在做UI設(shè)計(jì)時(shí)應(yīng)該理解的代碼隱藏文件和啟動(dòng)畫面，在本文中我們將介紹如何理解Windows Phone應(yīng)用程序中的MainPage.xaml。
下面的代碼片段顯示了MainPage.xaml的原始代碼，提供了一個(gè)ApplicationBar按鈕示例，默認(rèn)情況下，這些代碼是被注釋掉的，因此在設(shè)計(jì)視圖中是看不到應(yīng)用程序工具條的，如果取消從<phone:Phone-ApplicationPage.ApplicationBar>開始的注釋，你就會看到效果了。
圖1 顯示了MainPage.xaml的文檔結(jié)構(gòu)。
圖 1 MainPage.xaml默認(rèn)的文檔結(jié)構(gòu)
通過文檔結(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，所有頁面內(nèi)容全部位于LayoutRoot中，需要注意的是ApplicationBar沒有指定具體的名字，它也屬于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è)頁面，你可以使用這個(gè)TextBlock指定一個(gè)真實(shí)的頁面，如果應(yīng)用程序只有一個(gè)頁面需要控件，這個(gè)TextBlock就會占用不必要的空間，如果你刪除它，StackPanel的高度值會自動(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工具箱提供了最常見的Windows Phone控件，在工具箱上下文菜單中點(diǎn)擊“選擇”可以添加更多隱藏起來的控件，例如，非常有用的老式InkPresenter控件，它允許用戶直接用手指作畫。
你也可以使用Silverlight 3引入的3D投影，但如果你不想為這些3D投影編寫XAML代碼，那你必須選擇Microsoft Expression Blend 4 for Windows Phone，實(shí)際上，如果你要?jiǎng)?chuàng)建一個(gè)復(fù)雜的UI，Expression Blend可以簡化你的工作，它也允許你使用行為簡化UI控件響應(yīng)常見的多點(diǎn)觸摸手勢。
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控件和它們對應(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é)果將會部署到Windows Phone 7模擬器中，應(yīng)用程序第一次運(yùn)行時(shí)，Windows Phone 7模擬器需要一點(diǎn)時(shí)間來加載，但不用關(guān)閉模擬器就可以啟動(dòng)另一個(gè)調(diào)試會話，保持模擬器一直運(yùn)行會帶來很大的方便，在你完成必要的修改后，可再次運(yùn)行，如果你關(guān)閉模擬器，重新運(yùn)行項(xiàng)目時(shí)又要再加載一次。圖5顯示了運(yùn)行著一個(gè)非常簡單的UI的模擬器，點(diǎn)擊模擬器的開始菜單，將會看到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)畫面，默認(rèn)情況下，項(xiàng)目定義支持PhoneApplicationPage的縱向顯示。
圖 7 應(yīng)用程序啟動(dòng)時(shí)顯示的自定義啟動(dòng)畫面
下面的代碼指定了SupportedOrientations和Orientation的值。
- SupportedOrientations="PortraitOrLandscape" Orientation="Landscape"
控件的位置和大小將會根據(jù)設(shè)備的方向，PhoneApplicationPage的SupportedOrientations屬性值不同而有所變化，如果你希望你的應(yīng)用程序支持橫向和縱向使用，必須將SupportedOrientations設(shè)為PortraitOrLand scape。記住一定要用模擬器測試不同的方向，避免用戶旋轉(zhuǎn)設(shè)備時(shí)，控件的位置和大小出現(xiàn)異常，圖8顯示了一個(gè)應(yīng)用程序在模擬器中旋轉(zhuǎn)方向后的樣子。
圖 8 Windows Phone 7模擬器橫向顯示一個(gè)應(yīng)用程序
原文出處：http://www.drdobbs.com/windows/227701092;jsessionid=0LPPSGFA3UDNBQE1GHPSKH4ATMY32JVN
原文名：Developing a Silverlight UI for Windows Phone 7
作者：Gaston Hillar
【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯稿和譯者！】
【編輯推薦】
