我們緊接著上篇，開(kāi)始我們的Metro風(fēng)格應(yīng)用開(kāi)發(fā)。

-----------------------------------我是華麗的分割線-----------------------------------------

12.在 XAML 中定義應(yīng)用布局
?　　a)在接下來(lái)的在 XAML 中定義應(yīng)用布局、添加控件和內(nèi)容和顯示數(shù)據(jù) 3 個(gè)部分中，
??　　　　我們將學(xué)習(xí)在 XAML 中創(chuàng)建用戶界面的基本知識(shí)。為了學(xué)習(xí)這些基本知識(shí)，我們創(chuàng)建了一個(gè)簡(jiǎn)單的單頁(yè)博客閱讀器，
??　　　　以顯示單個(gè)博客信息提要的文章。如果你已經(jīng)有使用 XAML 的經(jīng)驗(yàn)并且熟悉 XAML 布局、控件和數(shù)據(jù)綁定，
??　　　　則可以跳過(guò)這些部分且不用完成練習(xí)。但不要跳過(guò)為日期轉(zhuǎn)換器添加代碼的部分，稍后在我們的應(yīng)用中會(huì)用到它。
??　　　　讓我們回到添加頁(yè)面和導(dǎo)航部分中的創(chuàng)建完整的 Metro 風(fēng)格應(yīng)用。
?　　b)應(yīng)用布局用于指定應(yīng)用中每個(gè)對(duì)象的大小和位置。要定位視覺(jué)對(duì)象，你必須將其置于某個(gè)Panel控件或其他容器對(duì)象中。
??　　　　XAML 布局系統(tǒng)提供了各種 Panel 控件，例如用作你在其中排列控件的 Grid、Canvas 和 StackPanel。
??　　　　XAML 布局系統(tǒng)既支持絕對(duì)布局，也支持動(dòng)態(tài)布局。在絕對(duì)布局中，使用顯式的 x 和 y 坐標(biāo)（例如，使用 Canvas）來(lái)定位控件。
??　　　　在動(dòng)態(tài)布局中，當(dāng)應(yīng)用重新調(diào)整大小時(shí)，布局容器和控件會(huì)隨之自動(dòng)改變大小和位置（例如使用StackPanel或Grid的情況）。
??　　　　在實(shí)際過(guò)程中，通常通過(guò)結(jié)合使用絕對(duì)布局和動(dòng)態(tài)布局的方式，以及將面板嵌入到其他面板的方式來(lái)定義應(yīng)用的布局。
??　　　　博客閱讀器應(yīng)用的典型布局如下：頂部為標(biāo)題，左側(cè)是文章列表，右側(cè)是所選文章的內(nèi)容。
?　　c)默認(rèn)情況下，空白應(yīng)用模板僅包含一個(gè)空白 Grid，它是我們的 UI 的根元素。為了指定我們的布局，我們將Grid劃分為兩行。
??　　　　首行顯示博客標(biāo)題。在第二行中，我們嵌入另一個(gè)Grid，將它分為兩列，然后添加其他一些布局容器以顯示博客內(nèi)容。
?　　d)代碼如下：

View Code <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"><Grid.RowDefinitions><RowDefinition Height="140" /><RowDefinition Height="*" /></Grid.RowDefinitions><!-- Title --><TextBlock x:Name="TitleText" Text="{Binding Title}"VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/><!-- Content --><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="2*" MinWidth="320" /><ColumnDefinition Width="3*" /></Grid.ColumnDefinitions><!-- Left column --><!-- The default value of Grid.Column is 0, so we do not need to set it to make the ListView show up in the first column. --><ListView x:Name="ItemListView" ItemsSource="{Binding Items}"Margin="60,0,0,10"SelectionChanged="ItemListView_SelectionChanged"><ListView.ItemTemplate><DataTemplate><StackPanel><TextBlock Text="{Binding Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" /><TextBlock Text="{Binding Author}" FontSize="16" Margin="15,0,0,0"/><TextBlock Text="{Binding PubDate,Converter={StaticResource dateConverter}}" FontSize="16" Margin="15,0,0,0"/></StackPanel></DataTemplate></ListView.ItemTemplate></ListView><!-- Right column --><!-- We use a Grid here instead of a StackPanel so that the WebView sizes correctly. --><Grid DataContext="{Binding ElementName=ItemListView, Path=SelectedItem}"Grid.Column="1" Margin="25,0,0,0"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*" /></Grid.RowDefinitions><TextBlock x:Name="PostTitleText" Text="{Binding Title}" FontSize="24"/><WebView x:Name="ContentView" Grid.Row="1" Margin="0,5,20,20"/></Grid></Grid></Grid>

??　　　　我們更詳細(xì)地看看此 XAML 可以做什么。若要在 Grid 中定義行，你需要在 Grid.RowDefinitions 集合中添加 RowDefinition 對(duì)象。
??　　　　你可以在 RowDefinition 中設(shè)置屬性，以指定行的外觀。添加列的方法是相同的，
??　　　　只不過(guò)要使用 ColumnDefinition 對(duì)象和 Grid.ColumnDefinitions 集合。第一個(gè)行定義（行 0）上的 Height="140" 屬性設(shè)置
??　　　　將頂部的行設(shè)置為 140 個(gè)與設(shè)備無(wú)關(guān)的像素的絕對(duì)高度。無(wú)論行的內(nèi)容或應(yīng)用的大小如何變化，此高度都不會(huì)改變。
??　　　　第二個(gè)行定義（行 1）上的 Height="*" 設(shè)置告訴底部行占用行 0 占用后的所有空間。這通常稱為星形比例縮放。
??　　　　我們?cè)诘诙€(gè)Grid的列定義中也使用了比例縮放。寬度設(shè)置Width="2*"和Width="3*"要求Grid將自身分為 5 個(gè)相等的部分。
??　　　　兩個(gè)部分用于第一列，三個(gè)部分用于第二列。要在Grid中定位某個(gè)元素，你需要設(shè)置該元素的附加屬性Grid.Row和 Grid.Column。
??　　　　行和列編號(hào)是從零開(kāi)始的。這些屬性的默認(rèn)值是 0，因此如果未設(shè)置任何內(nèi)容，則該元素將位于第一行第一列。
??　　　　<Grid Grid.Row="1"> 元素在根 Grid 的底部行嵌入一個(gè) Grid。該Grid被劃分為兩列。元素<ListView x:Name="ItemListView">
??　　　　將一個(gè)ListView添加到底部的左側(cè)列中Grid。元素<Grid Grid.Column="1">將另一個(gè)Grid添加到底部的右側(cè)列中Grid。
??　　　　我們將該Grid劃分為兩行。設(shè)置Height="Auto"要求頂行盡可能地調(diào)整高度以適合其內(nèi)容。底行則占用剩下的所有空間。
?　　e)我們的 UI 中需要布局面板的最后一個(gè)部分是博客文章列表。
??　　　　在該列表中，我們需要按如下所示排列標(biāo)題、作者和日期。
??　　　　當(dāng)你需要在頁(yè)面 UI 的一個(gè)小的子部分中自動(dòng)排列連續(xù)元素時(shí)，通常使用一個(gè) StackPanel。?
??　　　　StackPanel是一種簡(jiǎn)單的布局面板，可以將子元素按水平或垂直方向排列到單行中。
??　　　　你可以使用StackPanel.Orientation屬性來(lái)指定子元素的方向。 Orientation屬性的默認(rèn)值是 Orientation.Vertical。
??　　　　我們使用StackPanel來(lái)排列博客文章列表中的項(xiàng)。我們看到在使用模板設(shè)置數(shù)據(jù)格式會(huì)用到它。
??　　　　StackPanel 的 XAML 如下:
??　　　　　　<StackPanel>
???　　　　　　　　<TextBlock Text="{Binding Path=Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" />
???　　　　　　　　<TextBlock Text="{Binding Path=Author}" FontSize="16" Margin="15,0,0,0"/>
???　　　　　　　　<TextBlock Text="{Binding Path=PubDate}" FontSize="16" Margin="15,0,0,0"/>
??　　　　　　</StackPanel>

13.添加控件和內(nèi)容
?　　通過(guò)添加按鈕、列表、文本、圖形和圖像等控件創(chuàng)建應(yīng)用的 UI。你所使用的元素取決于你的應(yīng)用要完成的功能。
?　　我們需要顯示一行文本（博客和文章標(biāo)題）、多行文本（文章內(nèi)容）和博客文章列表。我們通過(guò)添加TextBlock控件以顯示標(biāo)題，
?　　并且用一個(gè)ListView控件來(lái)顯示博客文章列表。初看之下，我們似乎可以使用一個(gè)多行的TextBlock或RichTextBlock來(lái)顯示文章內(nèi)容。
?　　但是，當(dāng)我們更深入了解時(shí)，我們發(fā)現(xiàn)包含文章內(nèi)容的字符串不是純文本，而是 HTML 字符串。我們不想顯示一堆 HTML 標(biāo)記，
?　　但如果我們將字符串放在一個(gè) TextBlock 中便會(huì)發(fā)生這種情況，因此我們使用 WebView 控件來(lái)顯示 HTML。
　　Xmal代碼請(qǐng)參看12中的代碼。

14.顯示數(shù)據(jù)
?　　a)使用值轉(zhuǎn)換器設(shè)置數(shù)據(jù)格式
??　　　　在 ItemListView 的DataTemplate中，我們將PubDate屬性（是一個(gè)DateTime ）綁定到TextBlock.Text屬性。
??　　　　綁定引擎會(huì)自動(dòng)將 PubDate 從一個(gè) DateTime 轉(zhuǎn)換為一個(gè)字符串。但自動(dòng)轉(zhuǎn)換會(huì)同時(shí)顯示日期和時(shí)間，
??　　　　而我們只想顯示日期。要修復(fù)此問(wèn)題，我們可以創(chuàng)建自己的值轉(zhuǎn)換器來(lái)將DateTime轉(zhuǎn)換為字符串，
??　　　　并且可以在其中將字符串設(shè)置為任何需要的格式。要?jiǎng)?chuàng)建值轉(zhuǎn)換器，我們先創(chuàng)建一個(gè)用于實(shí)現(xiàn)IValueConverter接口的類(lèi)，
??　　　　然后實(shí)現(xiàn)Convert和ConvertBack方法。轉(zhuǎn)換器可以將數(shù)據(jù)從一種類(lèi)型更改為另一種類(lèi)型，根據(jù)文化背景轉(zhuǎn)換數(shù)據(jù)，
??　　　　或者修改數(shù)據(jù)呈現(xiàn)方式的其他方面。在這里，我們創(chuàng)建一個(gè)日期轉(zhuǎn)換器，它將轉(zhuǎn)換傳入的日期值并設(shè)置其格式，從而只顯示日、月和年。
?　　b)向項(xiàng)目添加值轉(zhuǎn)換器類(lèi)，請(qǐng)選擇“項(xiàng)目”>“添加類(lèi)”。將類(lèi)命名為 DateConverter（.cs 或 .vb）。
??　　　　Convert和ConvertBack方法還允許你傳入一個(gè)參數(shù)，以便通過(guò)不同的選項(xiàng)使用該轉(zhuǎn)換器的同一個(gè)實(shí)例。
??　　　　在此示例中，我們包含了一個(gè)格式設(shè)置轉(zhuǎn)換器，它可以根據(jù)輸入的參數(shù)生成不同格式的日期。
??　　　　你可以使用Binding類(lèi)的ConverterParameter向Convert和ConvertBack方法中傳遞一個(gè)參數(shù)。代碼如下：
??

View Code public class DateConverter:IValueConverter{public object Convert(object value, Type targetType, object parameter, string language){if (value == null)throw new ArgumentNullException("value", "Value cannot be null.");if (!typeof(DateTime).Equals(value.GetType()))throw new ArgumentException("Value must be of type DateTime.", "value");DateTime dt = (DateTime)value;if (parameter == null){// Date "7/27/2011 9:30:59 AM" returns "7/27/2011"return DateTimeFormatter.ShortDate.Format(dt);}else if ((string)parameter == "day"){// Date "7/27/2011 9:30:59 AM" returns "27"DateTimeFormatter dateFormatter = new DateTimeFormatter("{day.integer(2)}");return dateFormatter.Format(dt);}else if ((string)parameter == "month"){// Date "7/27/2011 9:30:59 AM" returns "JUL"DateTimeFormatter dateFormatter = new DateTimeFormatter("{month.abbreviated(3)}");return dateFormatter.Format(dt).ToUpper();}else if ((string)parameter == "year"){// Date "7/27/2011 9:30:59 AM" returns "2011"DateTimeFormatter dateFormatter = new DateTimeFormatter("{year.full}");return dateFormatter.Format(dt);}else{// Requested format is unknown. Return in the original format.return dt.ToString();}}public object ConvertBack(object value, Type targetType, object parameter, string language){string strValue = value as string;DateTime resultDateTime;if (DateTime.TryParse(strValue, out resultDateTime)){return resultDateTime;}return Windows.UI.Xaml.DependencyProperty.UnsetValue;}}

　　?c)使用 DateConverter 類(lèi)之前，必須在我們的 XAML 中聲明一個(gè)該類(lèi)的實(shí)例。
??　　　　我們將關(guān)鍵字 dateConverter 作為 App.xaml 中應(yīng)用資源來(lái)聲明實(shí)例。在此處聲明實(shí)例后，在應(yīng)用的每個(gè)頁(yè)面都可以使用它。
??　　　　代碼如下：
??　　　　　　<Application.Resources>
???　　　　　　　　<ResourceDictionary>
????　　　　　　　　　　<ResourceDictionary.MergedDictionaries>

?????　　　　　　　　　　　　<!--?
??????　　　　　　　　　　　　Styles that define common aspects of the platform look and feel
??????　　　　　　　　　　　　Required by Visual Studio project and item templates
????? 　　　　　　　　　　　　-->
?????　　　　　　　　　　　　<ResourceDictionary Source="Common/StandardStyles.xaml">
?????　　　　　　　　　　　　</ResourceDictionary>
????　　　　　　　　　　</ResourceDictionary.MergedDictionaries>
????　　　　　　　　<local:FeedDataSource x:Key="feedDataSource"/>
????　　　　　　　　<local:DateConverter x:Key="dateConverter"/>
???　　　　　　</ResourceDictionary>
??　　　　</Application.Resources>
?
?　　d)現(xiàn)在，我們便可在綁定中使用 DateConverter 了。以下是來(lái)自 ItemListView 的 DataTemplate 中更新后的 PubDate 綁定。
??? 　　　　<TextBlock Text="{Binding PubDate,Converter={StaticResource dateConverter}}" FontSize="16" Margin="15,0,0,0"/>
15.在 WebView 中顯示 HTML
?　　WebView 控件為我們提供了一種在應(yīng)用內(nèi)承載 HTML 數(shù)據(jù)的方法。但如果我們看看它的 Source 屬性，
?　　就會(huì)發(fā)現(xiàn)它采用 Web 頁(yè)面的 Uri 進(jìn)行顯示。我們的 HTML 數(shù)據(jù)只不過(guò)是HTML 的字符串。它沒(méi)有包含可以綁定到 Source 屬性的 Uri。
?　　幸運(yùn)的是，我們可以通過(guò)一種 NavigateToString 方法來(lái)傳遞我們的 HTML 字符串。
?　　要實(shí)現(xiàn)該功能，我們需要處理ListView的SelectionChanged事件。
　　代碼如下：
　　

View Code private void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e){FeedItem feedItem = e.AddedItems[0] as FeedItem;if (feedItem!=null){ContentView.NavigateToString(feedItem.Content);}}

16.現(xiàn)在我們的博客瀏覽器已基本成型，如下是界面截屏：

未完待續(xù),敬請(qǐng)期待...

總結(jié)

以上是生活随笔為你收集整理的使用Windows8开发Metro风格应用四的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。