背水一战 Windows 10 (49) - 控件（集合类）: Pivot, Hub

[源码下载]

[align=center]背水一战 Windows 10 (49) - 控件（集合类）: Pivot, Hub[/align]

作者：webabcd

介绍
背水一战 Windows 10 之 控件（集合类）

Pivot

Hub

示例
1、Pivot 的示例
Controls/CollectionControl/PivotDemo.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.PivotDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.CollectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
Pivot - Pivot 控件
Title, TitleTemplate - 标题
LeftHeader, LeftHeaderTemplate - 左侧 header
RightHeader, RightHeaderTemplate - 右侧 header
HeaderTemplate - PivotItem 的 Header 的 DataTemplate
SelectionChanged - 选中的 item 发生变化时触发的事件
PivotItemUnloading - Pivot 内的某个 PivotItem 准备变成选中项时触发的事件
PivotItemLoaded - Pivot 内的某个 PivotItem 已经变成选中项时触发的事件
PivotItemUnloading - Pivot 内的某个 PivotItem 准备从选中项变为非选中项时触发的事件
PivotItemUnloaded - Pivot 内的某个 PivotItem 已经从选中项变为非选中项时触发的事件

PivotItem - PivotItem 控件
Header - 用于指定 PivotItem 的 Header，需要通过 Pivot.HeaderTemplate 来设置其 DataTemplate
-->

<Pivot Name="pivot" Title="pivot title" Margin="5"
SelectionChanged="pivot_SelectionChanged"
PivotItemLoading="pivot_PivotItemLoading" PivotItemLoaded="pivot_PivotItemLoaded" PivotItemUnloading="pivot_PivotItemUnloading" PivotItemUnloaded="pivot_PivotItemUnloaded">
<Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red" />
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.LeftHeader>
<TextBlock Text="left header" />
</Pivot.LeftHeader>
<Pivot.RightHeader>
<TextBlock Text="right header" />
</Pivot.RightHeader>

<PivotItem Header="pivot item header 1">
<TextBlock Text="pivot item content 1" />
</PivotItem>
<PivotItem Header="pivot item header 2">
<TextBlock Text="pivot item content 2" />
</PivotItem>
<PivotItem Header="pivot item header 3">
<TextBlock Text="pivot item content 3" />
</PivotItem>
</Pivot>

<Button Name="btnLock" Content="对 pivot 锁定或解除锁定" Margin="5" Click="btnLock_Click" />

<StackPanel Orientation="Horizontal">
<TextBlock Name="lblMsg1" Margin="5" />
<TextBlock Name="lblMsg2" Margin="5" />
</StackPanel>

</StackPanel>
</Grid>
</Page>

Controls/CollectionControl/PivotDemo.xaml.cs

/*
* Pivot - Pivot 控件（继承自 ItemsControl, 请参见 /Controls/CollectionControl/ItemsControlDemo/）
*     IsLocked - 是否锁定 Pivot，锁定后只会显示当前选中的 item，而不能切换
*     SelectedItem - 当前选中的 item
*     SelectedIndex - 当前选中的 item 的索引位置
*
* PivotItem - PivotItem 控件（继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/）
*/

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.CollectionControl
{
public sealed partial class PivotDemo : Page
{
public PivotDemo()
{
this.InitializeComponent();
}

private void btnLock_Click(object sender, RoutedEventArgs e)
{
pivot.IsLocked ^= true;
}

private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// e.RemovedItems - 本次事件中，被取消选中的项
// e.AddedItems - 本次事件中，新被选中的项

lblMsg1.Text = "SelectionChangedEventArgs.AddedItems: " + (e.AddedItems[0] as PivotItem).Header.ToString();
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "Pivot.SelectedIndex: " + pivot.SelectedIndex;
lblMsg1.Text += Environment.NewLine;
lblMsg1.Text += "Pivot.SelectedItem: " + (pivot.SelectedItem as PivotItem).Header.ToString();
}

// 某 PivotItem 准备变成选中项
private void pivot_PivotItemLoading(Pivot sender, PivotItemEventArgs args)
{
// args.Item - 相关的 PivotItem 对象

lblMsg2.Text += "pivot_PivotItemLoading: " + args.Item.Header.ToString();
lblMsg2.Text += Environment.NewLine;
}

// 某 PivotItem 已经变成选中项
private void pivot_PivotItemLoaded(Pivot sender, PivotItemEventArgs args)
{
lblMsg2.Text += "pivot_PivotItemLoaded: " + args.Item.Header.ToString();
lblMsg2.Text += Environment.NewLine;
}

// 某 PivotItem 准备从选中项变为非选中项
private void pivot_PivotItemUnloading(Pivot sender, PivotItemEventArgs args)
{
lblMsg2.Text += "pivot_PivotItemUnloading: " + args.Item.Header.ToString();
lblMsg2.Text += Environment.NewLine;
}

// 某 PivotItem 已经从选中项变为非选中项
private void pivot_PivotItemUnloaded(Pivot sender, PivotItemEventArgs args)
{
lblMsg2.Text += "pivot_PivotItemUnloaded: " + args.Item.Header.ToString();
lblMsg2.Text += Environment.NewLine;
}
}
}

2、Hub 的示例
Controls/CollectionControl/HubDemo.xaml

<Page
x:Class="Windows10.Controls.CollectionControl.HubDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.CollectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">

<TextBlock Name="lblMsg" Margin="10 0 10 10" Width="200" TextWrapping="Wrap" HorizontalAlignment="Left" />

<SemanticZoom Margin="210 0 10 10">
<SemanticZoom.ZoomedInView>

<!--
Hub - Hub 控件
DefaultSectionIndex - hub 初始化时，被选中的 HubSection 的索引位置
Header, HeaderTemplate - hub 的 header
Orientation - hub 的子元素们的排列方式（Horizontal, Vertical）
Sections - hub 的 HubSection（[ContentProperty(Name = "Sections")]）
SectionHeaderClick - 点击 HubSection 右上角的“查看更多”按钮时触发的事件
SectionsInViewChanged - 可视区中的 HubSection 发生变化时触发的事件

HubSection - HubSection 控件
Header, HeaderTemplate - HubSection 的 header
ContentTemplate - HubSection 的控件模板（[ContentProperty(Name = "ContentTemplate")]）
IsHeaderInteractive - 是否显示 HubSection 右上角的“查看更多”按钮
-->

<Hub Name="hub" Orientation="Horizontal" Header="hub title" DefaultSectionIndex="1" SectionHeaderClick="hub_SectionHeaderClick" SectionsInViewChanged="hub_SectionsInViewChanged">
<HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 1">
<DataTemplate>
<TextBlock Text="hub section content 1" />
</DataTemplate>
</HubSection>
<HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 2">
<DataTemplate>
<TextBlock Text="hub section content 2" />
</DataTemplate>
</HubSection>
<HubSection Background="Orange" IsHeaderInteractive="False" Header="hub section header 3">
<DataTemplate>
<TextBlock Text="hub section content 3" />
</DataTemplate>
</HubSection>
<HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 4">
<DataTemplate>
<TextBlock Text="hub section content 4" />
</DataTemplate>
</HubSection>
<HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 5">
<DataTemplate>
<TextBlock Text="hub section content 5" />
</DataTemplate>
</HubSection>
<HubSection Background="Orange" IsHeaderInteractive="True" Header="hub section header 6">
<DataTemplate>
<TextBlock Text="hub section content 6" />
</DataTemplate>
</HubSection>
</Hub>
</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>
<ListView x:Name="listView"/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

</Grid>
</Page>

Controls/CollectionControl/HubDemo.xaml.cs

/*
* Hub - Hub 控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）
*     SectionsInView - 用于获取当前可视区中显示的全部 HubSection 集合
*     SectionHeaders - 用于获取当前可视区中显示的全部 HubSection 对象的 Header 集合
*
* HubSection - HubSection 控件（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/）
*
*
* 注：
* Hub 实现了 ISemanticZoomInformation 接口，所以可以在 SemanticZoom 的两个视图间有关联地切换。关于 ISemanticZoomInformation 请参见 /Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml
*/

using System;
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.CollectionControl
{
public sealed partial class HubDemo : Page
{
public HubDemo()
{
this.InitializeComponent();

this.Loaded += HubDemo_Loaded;
}

private void HubDemo_Loaded(object sender, RoutedEventArgs e)
{
// 拿到所有 HubSection 的 header 集合
List<string> headers = new List<string>();
foreach (HubSection section in hub.Sections)
{
if (section.Header != null)
{

headers.Add(section.Header.ToString());
}
}

listView.ItemsSource = headers;
}

private void hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
{
// 获取通过点击 HubSection 右上角的“查看更多”按钮而被选中的 HubSection 对象
lblMsg.Text = "hub_SectionHeaderClick: " + e.Section.Header.ToString();
}

private void hub_SectionsInViewChanged(object sender, SectionsInViewChangedEventArgs e)
{
lblMsg.Text = "";

// 此次在 hub 中移出的 HubSection
if (e.RemovedSections.Count > 0)
{
lblMsg.Text += "hub_SectionsInViewChanged RemovedSections: " + e.RemovedSections[0].Header.ToString();
lblMsg.Text += Environment.NewLine;
}

// 此次在 hub 中移入的 HubSection
if (e.AddedSections.Count > 0)
{
lblMsg.Text += "hub_SectionsInViewChanged AddedSections: " + e.AddedSections[0].Header.ToString();
lblMsg.Text += Environment.NewLine;
}

lblMsg.Text += "hub.SectionsInView: ";
lblMsg.Text += Environment.NewLine;
// 可视区中显示的全部 HubSection
foreach (var item in hub.SectionsInView)
{
lblMsg.Text += item.Header.ToString();
lblMsg.Text += Environment.NewLine;
}
}
}
}

OK
[源码下载]