背水一战 Windows 10 (49)

[源码下载]

背水一战 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[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
[源码下载]