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

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

[源码下载]

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

时间: 2017-09-21

背水一战 Windows 10 (49) - 控件(集合类): Pivot, Hub的相关文章

背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

原文:背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid [源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl 的布局控件) ItemsStackPa

背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid

原文:背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid [源码下载] 背水一战 Windows 10 (54) - 控件(集合类): ItemsControl 的布局控件 - OrientedVirtualizingPanel, VirtualizingStackPanel, WrapGrid 作者:webabcd 介绍背

背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项

原文:背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 [源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ListViewBase) 基础知识 拖动项 示例1.ListViewBase 的基础知识Controls/CollectionControl/ListViewBaseDe

背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制

原文:背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制 [源码下载] 背水一战 Windows 10 (57) - 控件(集合类): ListViewBase - 增量加载, 分步绘制 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ListViewBase) 增量加载 分步绘制(大数据量流畅滚动) 示例1.ListViewBase 的增量加载Controls/CollectionControl/L

背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

原文:背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter [源码下载] 背水一战 Windows 10 (50) - 控件(集合类): ItemsControl - 基础知识, 数据绑定, ItemsPresenter, GridViewItemPresenter, ListViewItemPresenter

背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter

原文:背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter [源码下载] 背水一战 Windows 10 (52) - 控件(集合类): ItemsControl - 自定义 ItemsControl, 自定义 ContentPresenter 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl) 自定义 ItemsContr

背水一战 Windows 10 (48) - 控件(集合类): FlipView

原文:背水一战 Windows 10 (48) - 控件(集合类): FlipView [源码下载] 背水一战 Windows 10 (48) - 控件(集合类): FlipView 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) FlipView 示例FlipView 的示例Controls/CollectionControl/FlipViewDemo.xaml <Page x:Class="Windows10.Controls.CollectionCont

背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组

原文:背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 [源码下载] 背水一战 Windows 10 (51) - 控件(集合类): ItemsControl - 项模板选择器, 数据分组 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类 - ItemsControl) 项模板选择器 数据分组 示例1.ItemsControl 的项模板选择器Controls/CollectionControl/Ite

背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation

原文:背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation [源码下载] 背水一战 Windows 10 (55) - 控件(集合类): SemanticZoom, ISemanticZoomInformation 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合类) SemanticZoom ISemanticZoomInformation 示例1.SemanticZoom 的示例C