开篇之前，如果大家对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：
总结，其实这个和你刚开始新建项目，让你选择的中心应用程序的模板类似(如下图，注意图中右下角的缩略图，你
会发现差不多的其实)，如果新建的是那个模板项目其实就差不多，不过那个里面这边到那边的资源的引用，各种页
面之间的调用绑定，让我很头疼，还不如自己写呢，自己写的自己思路更清晰，并且更容易熟悉和掌握。