背水一战 Windows 10 (49) - 控件（集合类）: Pivot, Hub
作者：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[] 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 > )
{
lblMsg.Text += "hub_SectionsInViewChanged RemovedSections: " + e.RemovedSections[].Header.ToString();
lblMsg.Text += Environment.NewLine;
} // 此次在 hub 中移入的 HubSection
if (e.AddedSections.Count > )
{
lblMsg.Text += "hub_SectionsInViewChanged AddedSections: " + e.AddedSections[].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
[源码下载]