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

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

17.添加頁面和導(dǎo)航
?　　a)為了使我們的博客閱讀器能夠適用于所有的博客，我們必須向應(yīng)用添加更多的頁面并處理如何在這些頁面之間進(jìn)行導(dǎo)航。
?　　　　首先，我們需要一個(gè)能夠列出所有博客的頁面。當(dāng)閱讀器從該頁面中選擇某個(gè)博客時(shí)，我們將加載該博客的文章列表。
?　　　　我們已創(chuàng)建的分頁閱讀器也可以完成此功能，但我們希望對它做一點(diǎn)改進(jìn)。最后，我們需要添加一個(gè)詳細(xì)信息頁面，
?　　　　以便閱讀單個(gè)博客文章，而不至于讓列表視圖占用空間。
?　　b)頁面模板
?　　　　我們不需要從空白模板開始創(chuàng)建每個(gè)頁面。Visual Studio 12 附帶了一個(gè)頁面模板的集合，
?　　　　這些模板對于各種情形都很有用。以下是可用的頁面模板。
??　　　?? 頁面類型?描述
??　　　　組詳細(xì)信息頁?顯示單個(gè)組的詳細(xì)信息以及組中每個(gè)項(xiàng)目的預(yù)覽。
??　　　　分組項(xiàng)頁?顯示分組的集合。
??　　　　項(xiàng)詳細(xì)信息頁?詳細(xì)顯示一個(gè)項(xiàng)目，并允許導(dǎo)航到相鄰的項(xiàng)目。
??　　　　項(xiàng)頁?顯示項(xiàng)目的集合。
??　　　　拆分頁?顯示項(xiàng)目的列表以及所選項(xiàng)目的詳細(xì)信息。
??　　　　基本頁?可以適應(yīng)不同方向和視圖的空白頁面，并且包含一個(gè)標(biāo)題和返回按鈕。
??　　　　空白頁?用于 Metro 風(fēng)格應(yīng)用的空白頁面。
?　　c)向應(yīng)用添加頁面。
??　　　　選擇“項(xiàng)目”>“添加新項(xiàng)”?！疤砑有马?xiàng)”對話框即會打開。
??　　　　在“已安裝”窗格中，展開“Visual C#”或“Visual Basic”。
??　　　　選擇“Windows Metro 風(fēng)格”模板類型。
??　　　　在中心窗格中，選擇要添加到項(xiàng)目中的頁面類型。
??　　　　為該頁面輸入名稱ItemsPage。
??　　　　單擊“添加”。XAML 和你的頁面的代碼隱藏文件即被添加到項(xiàng)目中。
??　　　　如圖：

彈出提示，選擇"是"，如圖：

　　 　　針對我們的博客閱讀器，我們將添加一個(gè)項(xiàng)目頁面來顯示所有博客的列表。我們將此頁面命名為 ItemsPage。
?　　　　我們添加一個(gè)拆分頁面來顯示每個(gè)博客的文章。我們將此頁面命名為 SplitPage。
?　　　　拆分頁面模板與我們?yōu)楹唵尾┛烷喿x器應(yīng)用創(chuàng)建的頁面相似，但更加精煉。我們針對詳細(xì)信息頁面
?　　　　(將其命名為 DetailPage)使用基本頁面模板。它只有返回按鈕、頁面標(biāo)題和一個(gè)用于顯示文章內(nèi)容的 WebView 控件。
?　　　　但并不是像我們在拆分頁面中那樣將來自 HTML 字符串的文章內(nèi)容加載到 WebView，
?　　　　我們導(dǎo)航到文章的 URL 并顯示實(shí)際的 Web 頁面。
　　d)模板頁面全部從 LayoutAwarePage 類派生而來，默認(rèn)情況下，這些模板頁面能夠比我們使用的初始?
?　　　　MainPage執(zhí)行更多的功能。LayoutAwarePage 是 Page 的一個(gè)實(shí)現(xiàn)，為 Metro 風(fēng)格應(yīng)用開發(fā)啟用了重要的功能：
?　　　　應(yīng)用程序視圖狀態(tài)到視覺狀態(tài)的映射使頁面能夠適應(yīng)不同的分辨率、方向和視圖。
?　　　　GoBack 和 GoHome 事件處理程序支持基本的導(dǎo)航。默認(rèn)的視圖模型為你提供了一個(gè)簡單的可綁定數(shù)據(jù)源。
?　　　　頁面模板還使用 StandardStyles.xaml 中的樣式和模板，這些樣式和模板應(yīng)用 Metro 風(fēng)格應(yīng)用的設(shè)計(jì)指南。
?　　　　我們將使用其中一些樣式作為開始，并修改它們的副本來自定義應(yīng)用的外觀。

18.在頁面之間導(dǎo)航
?　　XAMLUI 框架提供了使用 Frame 和 Page 的內(nèi)置導(dǎo)航模型，其工作方式與在 Web 瀏覽器中的導(dǎo)航方式非常相似。
?　　Frame控件可托管 Page，并且具有導(dǎo)航歷史記錄，你可以通過該歷史記錄在訪問過的頁面中前進(jìn)和后退。
?　　在導(dǎo)航時(shí)，你可以在頁面之間傳遞數(shù)據(jù)。在 Visual Studio 項(xiàng)目模板中，名為 rootFrame 的 Frame 被設(shè)置為應(yīng)用窗口的內(nèi)容。
?　　我們來看看 App.xaml.cs中的代碼：

View Code /// <summary>/// Invoked when the application is launched normally by the end user. Other entry points/// will be used when the application is launched to open a specific file, to display/// search results, and so forth./// </summary>/// <param name="args">Details about the launch request and process.</param>protected override void OnLaunched(LaunchActivatedEventArgs args){// Do not repeat app initialization when already running, just ensure that// the window is activeif (args.PreviousExecutionState == ApplicationExecutionState.Running){Window.Current.Activate();return;}if (args.PreviousExecutionState == ApplicationExecutionState.Terminated){//TODO: Load state from previously suspended application }// Create a Frame to act navigation context and navigate to the first pagevar rootFrame = new Frame();if (!rootFrame.Navigate(typeof(MainPage))){throw new Exception("Failed to create initial page");}// Place the frame in the current Window and ensure that it is activeWindow.Current.Content = rootFrame;Window.Current.Activate();}

　　 這些代碼用于創(chuàng)建框架，將其設(shè)置為 Window 的內(nèi)容，并導(dǎo)航到 MainPage。由于我們的完整應(yīng)用的首頁是 ItemsPage，
?　　因此我們將調(diào)用更改為導(dǎo)航方法并在此處所示的 ItemsPage 中進(jìn)行傳遞。修改的代碼如下：

// Create a Frame to act navigation context and navigate to the first pagevar rootFrame = new Frame();if (!rootFrame.Navigate(typeof(ItemsPage))){throw new Exception("Failed to create initial page");}

?

?　　加載 ItemsPage 時(shí)，我們需要獲得數(shù)據(jù)源的一個(gè)實(shí)例，并檢索要顯示的源數(shù)據(jù)，
?　　就像我們在使用應(yīng)用中的數(shù)據(jù)部分中使用 MainPage 一樣。我們將代碼置于頁面模板中包括的 OnNavigatedTo 方法替代中，
?　　如果尚未檢索源，我們將調(diào)用 FeedDataSource.GetFeedsAsync 方法。以下是 ItemsPage.xaml.cs代碼：
?

protected override async void OnNavigatedTo(NavigationEventArgs e){FeedDataSource feedDataSource = App.DataSource;if (feedDataSource.Feeds.Count == 0){await feedDataSource.GetFeedsAsync();}DefaultViewModel["Items"] = feedDataSource.Feeds;}

?

?　　當(dāng)用戶從集合中選取博客時(shí)，我們從項(xiàng)目頁導(dǎo)航到拆分頁。為了執(zhí)行此導(dǎo)航，我們希望 GridView 項(xiàng)目響應(yīng)單擊（如按鈕）操作，
?　　而不是被選定。為了使 GridView 項(xiàng)目可單擊，我們按如下所示設(shè)置 SelectionMode 和 IsItemClickEnabled 屬性。
?　　然后我們?yōu)?GridView 的 ItemClick 事件添加一個(gè)事件處理程序。以下是 ItemsPage.xaml 中用于 GridView 的 XAML，其中已設(shè)置屬性，
?　　并已添加 ItemClick 事件。
?　　項(xiàng)目頁面還包含一個(gè)名為 itemListView 的列表視圖，如果“調(diào)整”了應(yīng)用，則會顯示該列表視圖來代替網(wǎng)格。
?　　我們將在適應(yīng)不同的布局部分中對此進(jìn)行更詳細(xì)的討論。目前，我們只需對 ListView 進(jìn)行與對 GridView 所做更改相同的更改，
?　　以確保它們的行為相同。整個(gè)Xaml代碼如下：

View Code <!-- 在大多數(shù)視圖狀態(tài)中使用的水平滾動(dòng)網(wǎng)格--><GridViewx:Name="itemGridView"AutomationProperties.AutomationId="ItemsGridView"AutomationProperties.Name="Items"TabIndex="1"Grid.Row="1"Margin="0,-4,0,0"Padding="116,0,116,46"ItemsSource="{Binding Source={StaticResource itemsViewSource}}"ItemTemplate="{StaticResource Standard250x250ItemTemplate}"SelectionMode="None"IsItemClickEnabled="True"ItemClick="itemView_ItemClick"/><!-- 垂直滾動(dòng)列表僅在對齊后使用--><ListViewx:Name="itemListView"AutomationProperties.AutomationId="ItemsListView"AutomationProperties.Name="Items"TabIndex="1"Grid.Row="1"Visibility="Collapsed"Margin="0,-10,0,0"Padding="10,0,0,60"ItemsSource="{Binding Source={StaticResource itemsViewSource}}"ItemTemplate="{StaticResource Standard80ItemTemplate}"SelectionMode="None"IsItemClickEnabled="True"ItemClick="itemView_ItemClick"/>

　　itemView_ItemClick事件如下：

View Code private void itemView_ItemClick(object sender, ItemClickEventArgs e){// Navigate to the split page, configuring the new page// by passing the clicked item (FeedItem) as a navigation parameterthis.Frame.Navigate(typeof(SplitPage), e.ClickedItem);}

?　　若要在頁面之間導(dǎo)航，你可以使用 Frame 控件的 Navigate、GoForward 和 GoBack 方法。
?　　通過 Navigate(TypeName, Object) 方法可以導(dǎo)航并將數(shù)據(jù)對象傳遞到新頁面。我們將使用此方法在我們的頁面之間傳遞數(shù)據(jù)。
?　　第一個(gè)參數(shù) typeof(MainPage) 是我們將要導(dǎo)航到的頁面的 Type。第二個(gè)參數(shù)是我們傳遞給將要導(dǎo)航到的頁面的數(shù)據(jù)對象。
?　　在本例中，我們傳遞 clicked 項(xiàng)。在 SplitPage.xaml.cs代碼隱藏頁面中，
?　　我們需要使用剛剛從項(xiàng)目頁面?zhèn)鬟f的 FeedData 對象執(zhí)行某些操作。為此，我們將覆蓋Page的OnNavigatedTo方法。
?　　該方法已添加到頁面模板代碼中，因此我們只需要對其進(jìn)行修改以便與我們的數(shù)據(jù)關(guān)聯(lián)。
?　　模板頁面包含一個(gè)名為 DefaultViewModel 的內(nèi)置視圖模型，我們可以將數(shù)據(jù)與之關(guān)聯(lián)。
?　　NavigationEventArgs.Parameter 屬性包含從項(xiàng)目頁面?zhèn)鬟f的數(shù)據(jù)對象。 我們將其轉(zhuǎn)換回 FeedData 對象，
?　　并將信息提要數(shù)據(jù)添加至具有關(guān)鍵字 Feed 的 DefaultViewModel，
?　　將 FeedData.Items 屬性添加至具有關(guān)鍵字 Items 的 DefaultViewModel。以下是更新的 OnNavigatedTo 方法：

protected override void OnNavigatedTo(NavigationEventArgs e){// TODO: Assign a bindable group to this.DefaultViewModel["Group"]// TODO: Assign a collection of bindable items to this.DefaultViewModel["Items"]FeedData feedData = e.Parameter as FeedData;if (feedData!=null){DefaultViewModel["Feed"] = feedData;DefaultViewModel["Items"] = feedData.Items;if (!UsingLogicalPageNavigation()){itemsViewSource.View.MoveCurrentToFirst();}}}

?

　　在 Visual Studio 頁面模板中，TODO 注釋表示我們從何處將我們的數(shù)據(jù)對象添加至具有關(guān)鍵字 Group 的 DefaultViewModel。
?　　由于我們使用的是關(guān)鍵字 Feed，因此我們需要更改頁面標(biāo)題中的綁定，以綁定到 Feed 屬性，而不是 Group。
?　　在 SplitPage.xaml 中，更改名為 pageTitle 的 TextBlock 的 Text 綁定以綁定到 Feed.Title，
?　　如下所示：?<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Feed.Title}" Style="{StaticResource PageHeaderTextStyle}"/>

?　　要導(dǎo)航回項(xiàng)目頁面，Visual Studio 頁面模板包含相應(yīng)的代碼來處理 BackButton 的 Click 事件，并調(diào)用 Frame.GoBack 方法。
?　　我們需要再做一些更改才能完成向我們添加到組中的新頁面添加功能的操作。將這些代碼添加到應(yīng)用中后，
?　　我們便可以繼續(xù)對我們的應(yīng)用進(jìn)行風(fēng)格和動(dòng)畫設(shè)置。
?　　在 ItemsPage.xaml 中，頁面標(biāo)題綁定到具有關(guān)鍵字 AppName 的靜態(tài)資源。將此資源中的文本更新到博客中，如下所示。
?? 　　<x:String x:Key="AppName">Refactor's Blog</x:String>

　　更新SplitPage.xaml 中，將名為 titlePanel 的網(wǎng)格更改為跨 2 個(gè)列，Xaml代碼如下：

View Code <!-- 后退按鈕和頁標(biāo)題--><Grid x:Name="titlePanel" Grid.ColumnSpan="2"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Buttonx:Name="backButton"Click="GoBack"IsEnabled="{Binding DefaultViewModel.CanGoBack, ElementName=pageRoot}"Style="{StaticResource BackButtonStyle}"/><TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Feed.Title}" Style="{StaticResource PageHeaderTextStyle}"/></Grid>

　　 同樣在 SplitPage.xaml 中，我們需要更改用來顯示所選博客文章的標(biāo)題和內(nèi)容的布局。Xaml代碼如下：

View Code <!-- 選定項(xiàng)的詳細(xì)信息--><ScrollViewerx:Name="itemDetail"AutomationProperties.AutomationId="ItemDetailScrollViewer"Grid.Column="1"Grid.Row="1"Padding="70,0,120,0"DataContext="{Binding SelectedItem, ElementName=itemListView}"Style="{StaticResource VerticalScrollViewerStyle}"><Grid x:Name="itemDetailGrid" ><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}"/><Border x:Name="contentViewBorder" BorderBrush="Gray" BorderThickness="2" Grid.Row="1" Margin="0,15,0,20"><Grid><WebView x:Name="contentView" /><Rectangle x:Name="contentViewRect" /></Grid></Border></Grid></ScrollViewer>

　　 在 SplitPage.xaml.cs 中，向 ItemListView_SelectionChanged 事件處理程序添加代碼，
?　　使用所選博客文章的內(nèi)容填充 WebView，代碼如下：

View Code private void itemView_ItemClick(object sender, ItemClickEventArgs e){// Navigate to the split page, configuring the new page// by passing the clicked item (FeedItem) as a navigation parameterthis.Frame.Navigate(typeof(SplitPage), e.ClickedItem);}

?　　在 DetailPage.xaml 中，我們需要將標(biāo)題文本綁定到博客文章標(biāo)題，并添加一個(gè) WebView 控件以顯示博客頁面。
?　　Xaml代碼如下：

View Code <!-- 后退按鈕和頁標(biāo)題--><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/><TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1"/><Border x:Name="contentViewBorder" BorderBrush="Gray" BorderThickness="2" Grid.Row="1" Margin="120,15,20,20"><WebView x:Name="contentView" /></Border></Grid>

?　　在 DetailPage.xaml.cs 中，將代碼添加到 OnNavigatedTo 方法中，代碼如下：　　

View Code protected override void OnNavigatedTo(NavigationEventArgs e){// Add this code to navigate the web view to the selected blog post.FeedItem feedItem = e.Parameter as FeedItem;if (feedItem != null){this.contentView.Navigate(feedItem.Link);this.DataContext = feedItem;}}

?

19.以上操作基本完成，為了能使程序正常運(yùn)行，請按如下操作：

　　a)注意注釋掉LayoutAwarePage中的OnNavigatedFrom方法：
???????? protected override void OnNavigatedFrom(NavigationEventArgs e)
??????? {
??????????? /*var frameState = SuspensionManager.SessionStateForFrame(this.Frame);
??????????? var pageState = new Dictionary<String, Object>();
??????????? this.SaveState(pageState);
??????????? frameState[_pageKey] = pageState;*/
??????? }
??
?　　b)更改StandardStyles.xaml文件中鍵值為VerticalScrollViewerStyle的屬性：
???? 　　<Style x:Key="VerticalScrollViewerStyle" TargetType="ScrollViewer">
??????? 　　<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
??????? 　　<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
??????? 　　<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
??????? 　　<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
??????? 　　<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
??? 　　</Style>
?
　　?c)Standard250x250ItemTemplate的屬性：
???? 　　<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
??? 　　<DataTemplate x:Key="Standard250x250ItemTemplate">
??????? 　　<Grid HorizontalAlignment="Left" Width="250" Height="250">
??????????? 　　<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
??????????????? 　　<Image Source="../Assets/myLogo.jpg" Stretch="UniformToFill"/>
??????????? 　　</Border>
??????????? 　　<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
??????????????? 　　<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"

　　　　　　　　　　Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
??????????????? 　　<TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}"
　　　　　　　　　　Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
??????????? 　　　　</StackPanel>
??????? 　　　　</Grid>
??? 　　　　</DataTemplate>

20.程序截圖：

點(diǎn)擊其中一個(gè)轉(zhuǎn)到下一個(gè)頁面,如圖:

未完待續(xù)，敬請期待....

總結(jié)

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

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