背水一戰 Windows 10 (49) - 控制項（集合類）: Pivot, Hub

背水一戰 Windows 10 之控制項（集合類）: 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
[源碼下載]