開篇之前，如果大家對Windows 8.1中Hub控件要興趣的話，推薦王磊老師關于這方面的部落格
連結：重新想象 Windows 8.1 Store Apps (75) - 新增控件: Hub
我也是看了王磊老師部落格中很多關于Windows 8.1的内容，然後依葫蘆畫瓢在Windows Phone 8.1中試手的，感覺大部
分都是差不多的。
下面就手機上使用Hub，說一下我的收獲
第一的就是多頁面的展示，頁面之間的滑動平移，現在看到這個發現我之前寫的一篇兩個頁面滑動平移的部落格簡直糗
爆了，不管怎樣，雖然之前寫的不可取，但是還是内容還是有一定的學習作用的。
但是Hub控件一個頁面右端突出第二個頁面一小塊内容以提醒使用者右邊還有内容的做法，是否喜歡要見仁見智了
Hub控件感覺就是那種如何在一個畫面中呈現很多内容，但不通過畫面跳轉的方式呈現給大家盡可能多的内容的控
件，大家隻需要左滑即可，但我想如果内容不是靜态的，而是從資料庫或者保持在本地的一些xml檔案抑或到網上獲
取的話，應該要考慮加載的時間和緩存的問題，一想到這些我就頭疼了，深層次的東西暫時不清楚，但總是想着要怎
麼優化實作呢。不管怎麼說總不能一口吞個大西瓜吧，那不得撐死還感覺不到飽就挂了怎麼行。先學會怎麼簡單地運用再說。理想與現實畢竟有距離的，一步一步來吧。
1.首先要認識Hub的結構，認識之後才能把架構搭好，這是基礎
結構：Hub->HubSection->DataTemplate
Hub，HubSection都有各自的Header，Hub的Header是HubSection各自共享的，也就是說在HubSection之間來回切換的
過程中總是會看到Hub的Header的，類似于一個總标題。
在HubSection下一層是不可以直接寫這種TextBlock，Grid之類的元素的，必須要先寫DataTemplate
也就是說必須是<Hub><HubSection><DataTemplate>.........</DataTemplate></HubSection></Hub>這樣的順序
2.Hub的屬性和方法
a.DefaultSectionIndex屬性，起始值為0，代表Hub下的第一個HubSection
設為不同的整數值n，App啟動後的起始畫面便是對應的第n+1個HubSection，如果n-1大于HubSection的個數便會報錯
b.SectionHeaderClick方法，注意這是Hub的方法，不是HubSection的方法
主要的作用是給每個HubSection的Header添加點選事件
3.HubSection的屬性和方法
IsHeaderInteractive屬性，預設為false
作用是讓HubSection的Header可以點選。是以說，一旦你不設定這個，上面那個Hub的SectionHeaderClick寫的再怎
麼天花亂墜都是沒用的了。
下面貼出我的代碼：
XAML:
<Page
x:Class="TestUnion.HubTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestUnion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<x:String x:Key="a">織田信長</x:String>
<x:String x:Key="b">豐成秀吉</x:String>
<x:String x:Key="c">德川家康</x:String>
<x:String x:Key="d">淺井長政</x:String>
<x:String x:Key="e">明智光秀</x:String>
<x:String x:Key="f">池田恒興</x:String>
<x:String x:Key="g">石田三成</x:String>
</Page.Resources>
<Grid Background="Coral">
<!--注意這裡Hub設定了DefaultSectionIndex屬性和SectionHeaderClick方法-->
<!--DefaultSectionIndex="0"說明初始的以下第一個HubSection，也就是ComboBox的那個-->
<!--Hub的Header這裡設為了HubTest-->
<Hub x:Name="hub" Header="HubTest" DefaultSectionIndex="0" SectionHeaderClick="hub_SectionHeaderClick">
<!--注意這裡的HubSection設定了IsHeaderInteractive屬性為true-->
<!--是以上面的SectionHeaderClick才能起作用，否則點選還是沒有作用-->
<HubSection x:Name="firstHub" FontSize="30" Header="First HubSection" IsHeaderInteractive="True">
<DataTemplate>
<Grid>
<ComboBox PlaceholderText="請選擇一位日本戰國英雄">
<ComboBoxItem>織田信長</ComboBoxItem>
<ComboBoxItem>豐成秀吉</ComboBoxItem>
<ComboBoxItem>德川家康</ComboBoxItem>
<ComboBoxItem>淺井長政</ComboBoxItem>
<ComboBoxItem>明智光秀</ComboBoxItem>
<ComboBoxItem>池田恒興</ComboBoxItem>
<ComboBoxItem>石田三成</ComboBoxItem>
</ComboBox>
</Grid>
</DataTemplate>
</HubSection>
<HubSection x:Name="secondHub" Header="Second HubSection" IsHeaderInteractive="True">
<DataTemplate>
<StackPanel>
<ListBox>
<ListBoxItem>織田信長</ListBoxItem>
<ListBoxItem>豐城秀吉</ListBoxItem>
<ListBoxItem>德川家康</ListBoxItem>
<ListBoxItem>淺井長政</ListBoxItem>
<ListBoxItem>明智光秀</ListBoxItem>
<ListBoxItem>池田恒興</ListBoxItem>
<ListBoxItem>石田三成</ListBoxItem>
</ListBox>
</StackPanel>
</DataTemplate>
</HubSection>
<HubSection x:Name="thirdHub" Header="Third HubSection" IsHeaderInteractive="True">
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/1.jpg" Width="80" Height="80" Stretch="UniformToFill" />
<TextBlock Text="{StaticResource a}" FontSize="50" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/2.jpg" Width="80" Height="80" Stretch="UniformToFill" />
<TextBlock Text="{StaticResource b}" FontSize="50" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/3.jpg" Width="80" Height="80" Stretch="UniformToFill" />
<TextBlock Text="{StaticResource c}" FontSize="50" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/5.jpg" Width="80" Height="80" Stretch="UniformToFill" />
<TextBlock Text="{StaticResource d}" FontSize="50" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</HubSection>
<HubSection x:Name="forthHub" Header="Forth HubSection" IsHeaderInteractive="True">
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</StackPanel>
<StackPanel>
<AppBarButton Icon="Forward" Label="Forward" />
<AppBarButton Icon="Back" Label="Back" />
</StackPanel>
<StackPanel>
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Stop" Label="Stop" />
</StackPanel>
<StackPanel>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Cut" Label="Cut" />
</StackPanel>
</StackPanel>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
.CS：點選HubSection的Header引發的事件處理
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白頁”項模闆在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介紹
namespace TestUnion
{
/// <summary>
/// 可用于自身或導航至 Frame 内部的空白頁。
/// </summary>
public sealed partial class HubTest : Page
{
public HubTest()
{
this.InitializeComponent();
}
/// <summary>
/// 在此頁将要在 Frame 中顯示時進行調用。
/// </summary>
/// <param name="e">描述如何通路此頁的事件資料。
/// 此參數通常用于配置頁。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private async void hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
{
switch(e.Section.Name)
{
case "firstHub":
await new MessageDialog("first").ShowAsync();
break;
case "secondHub":
await new MessageDialog("second").ShowAsync();
break;
case "thirdHub":
await new MessageDialog("third").ShowAsync();
break;
case "forthHub":
await new MessageDialog("forth").ShowAsync();
break;
default:
break;
}
}
}
}
下面是運作之後的截圖：
初始界面：因為上面Hub設定了DefaultSectionIndex=0，是以是第一個HubSection
然後左滑依次是第二個，第三個，第四個HubSection
點選第三個HubSectin的Header，即Third HubSection：
總結，其實這個和你剛開始建立項目，讓你選擇的中心應用程式的模闆類似(如下圖，注意圖中右下角的縮略圖，你
會發現差不多的其實)，如果建立的是那個模闆項目其實就差不多，不過那個裡面這邊到那邊的資源的引用，各種頁
面之間的調用綁定，讓我很頭疼，還不如自己寫呢，自己寫的自己思路更清晰，并且更容易熟悉和掌握。