<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>

/* * 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;        }    }}

<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>

/* * 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;            }        }    }}