我們緊接著上篇，開始我們的Metro風格應用開發。

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

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

??　　　　我們更詳細地看看此 XAML 可以做什么。若要在 Grid 中定義行，你需要在 Grid.RowDefinitions 集合中添加 RowDefinition 對象。
??　　　　你可以在 RowDefinition 中設置屬性，以指定行的外觀。添加列的方法是相同的，
??　　　　只不過要使用 ColumnDefinition 對象和 Grid.ColumnDefinitions 集合。第一個行定義（行 0）上的 Height="140" 屬性設置
??　　　　將頂部的行設置為 140 個與設備無關的像素的絕對高度。無論行的內容或應用的大小如何變化，此高度都不會改變。
??　　　　第二個行定義（行 1）上的 Height="*" 設置告訴底部行占用行 0 占用后的所有空間。這通常稱為星形比例縮放。
??　　　　我們在第二個Grid的列定義中也使用了比例縮放。寬度設置Width="2*"和Width="3*"要求Grid將自身分為 5 個相等的部分。
??　　　　兩個部分用于第一列，三個部分用于第二列。要在Grid中定位某個元素，你需要設置該元素的附加屬性Grid.Row和 Grid.Column。
??　　　　行和列編號是從零開始的。這些屬性的默認值是 0，因此如果未設置任何內容，則該元素將位于第一行第一列。
??　　　　<Grid Grid.Row="1"> 元素在根 Grid 的底部行嵌入一個 Grid。該Grid被劃分為兩列。元素<ListView x:Name="ItemListView">
??　　　　將一個ListView添加到底部的左側列中Grid。元素<Grid Grid.Column="1">將另一個Grid添加到底部的右側列中Grid。
??　　　　我們將該Grid劃分為兩行。設置Height="Auto"要求頂行盡可能地調整高度以適合其內容。底行則占用剩下的所有空間。
?　　e)我們的 UI 中需要布局面板的最后一個部分是博客文章列表。
??　　　　在該列表中，我們需要按如下所示排列標題、作者和日期。
??　　　　當你需要在頁面 UI 的一個小的子部分中自動排列連續元素時，通常使用一個 StackPanel。?
??　　　　StackPanel是一種簡單的布局面板，可以將子元素按水平或垂直方向排列到單行中。
??　　　　你可以使用StackPanel.Orientation屬性來指定子元素的方向。 Orientation屬性的默認值是 Orientation.Vertical。
??　　　　我們使用StackPanel來排列博客文章列表中的項。我們看到在使用模板設置數據格式會用到它。
??　　　　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.添加控件和內容
?　　通過添加按鈕、列表、文本、圖形和圖像等控件創建應用的 UI。你所使用的元素取決于你的應用要完成的功能。
?　　我們需要顯示一行文本（博客和文章標題）、多行文本（文章內容）和博客文章列表。我們通過添加TextBlock控件以顯示標題，
?　　并且用一個ListView控件來顯示博客文章列表。初看之下，我們似乎可以使用一個多行的TextBlock或RichTextBlock來顯示文章內容。
?　　但是，當我們更深入了解時，我們發現包含文章內容的字符串不是純文本，而是 HTML 字符串。我們不想顯示一堆 HTML 標記，
?　　但如果我們將字符串放在一個 TextBlock 中便會發生這種情況，因此我們使用 WebView 控件來顯示 HTML。
　　Xmal代碼請參看12中的代碼。

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

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 類之前，必須在我們的 XAML 中聲明一個該類的實例。
??　　　　我們將關鍵字 dateConverter 作為 App.xaml 中應用資源來聲明實例。在此處聲明實例后，在應用的每個頁面都可以使用它。
??　　　　代碼如下：
??　　　　　　<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)現在，我們便可在綁定中使用 DateConverter 了。以下是來自 ItemListView 的 DataTemplate 中更新后的 PubDate 綁定。
??? 　　　　<TextBlock Text="{Binding PubDate,Converter={StaticResource dateConverter}}" FontSize="16" Margin="15,0,0,0"/>
15.在 WebView 中顯示 HTML
?　　WebView 控件為我們提供了一種在應用內承載 HTML 數據的方法。但如果我們看看它的 Source 屬性，
?　　就會發現它采用 Web 頁面的 Uri 進行顯示。我們的 HTML 數據只不過是HTML 的字符串。它沒有包含可以綁定到 Source 屬性的 Uri。
?　　幸運的是，我們可以通過一種 NavigateToString 方法來傳遞我們的 HTML 字符串。
?　　要實現該功能，我們需要處理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.現在我們的博客瀏覽器已基本成型，如下是界面截屏：

未完待續,敬請期待...

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。