背水一戰 Windows 10 (55) - 控制項（集合類）: ItemsControl - SemanticZoom, ISemanticZoomInformation

背水一戰 Windows 10 之控制項（集合類 - ItemsControl）: SemanticZoom, ISemanticZoomInformation ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（集合類 - ItemsControl）

SemanticZoom
ISemanticZoomInformation

示例
1、SemanticZoom 的示例
Controls/CollectionControl/SemanticZoomDemo/SemanticZoomDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.SemanticZoomDemo.SemanticZoomDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl.SemanticZoomDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:common="using:Windows10.Common">

    <Grid Background="Transparent">

        <StackPanel Orientation="Horizontal" Margin="5" VerticalAlignment="Top">
            <Button Name="btnToggleActiveView" Content="ToggleActiveView" Click="btnToggleActiveView_Click" />
            <TextBlock Name="lblMsg" Margin="10 0 0 0" />
        </StackPanel>
        
        <!--
            SemanticZoom - SemanticZoom 控制項
                IsZoomOutButtonEnabled - 是否顯示用於切換視圖的按鈕（在 ZoomedInView 時，右下角會有個小按鈕），預設值為 false
                ZoomedInView - 放大後的視圖（需要實現 ISemanticZoomInformation 介面）
                ZoomedOutView - 縮小後的視圖（需要實現 ISemanticZoomInformation 介面）
                IsZoomedInViewActive - ZoomedInView 視圖是否為當前的活動視圖，預設值為 true
                CanChangeViews - 是否可以在兩個視圖之間切換（如果禁止的話則用戶將無法切換視圖，程式通過 IsZoomedInViewActive 或 ToggleActiveView() 來切換的話則會拋出異常），預設值為 true
        
            如果需要通過縮放手勢來切換 ZoomedInView 和 ZoomedOutView 的話，別忘了設置 ScrollViewer.ZoomMode="Enabled"
        
        
            註：
            1、ListViewBase 實現了 ISemanticZoomInformation 介面，其通過綁定 CollectionViewSource 數據即可使 SemanticZoom 中的兩個視圖進行有關聯的切換
            2、以下以 ListViewBase 和 SemanticZoom 和 CollectionViewSource 相結合為例，說明其行為
                a) ZoomedInView 用於顯示全部數據，包括組標題和每組的詳細數據，點擊組標題會進入到 ZoomedOutView 視圖
                b) ZoomedOutView 用於只顯示組標題，單擊組標題會進入到 ZoomedInView 視圖，並自動定位到對應的組
            3、關於如何自定義 ISemanticZoomInformation 實現，請參見 /Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml
        -->

        <SemanticZoom Name="semanticZoom" Margin="5 50 5 5" 
                      ScrollViewer.ZoomMode="Enabled"
                      IsZoomOutButtonEnabled="True" IsZoomedInViewActive="False" CanChangeViews="True">
            
            <SemanticZoom.ZoomedInView>
                <GridView x:Name="gridViewDetails" Margin="5" ItemsSource="{x:Bind MyData.View}">
                    <GridView.ItemTemplate>
                        <DataTemplate x:DataType="common:NavigationModel">
                            <Grid Width="120" Background="Orange">
                                <TextBlock TextWrapping="Wrap" Text="{x:Bind Title}" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate x:DataType="common:NavigationModel">
                                    <TextBlock Text="{x:Bind Title}" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="gridViewSummary" Margin="5" ItemsSource="{x:Bind MyData.View.CollectionGroups}">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Orange" Width="100" Height="100">
                                <!--
                                    上下文數據為 ICollectionViewGroup 類型，其 Group 屬性保存著組對象（本例中 Group 就是每組的 NavigationModel 類型的對象）
                                    ListViewBase 實現了 ISemanticZoomInformation 介面，其在 StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) 時，通過 source.Item 獲取到的是一個 ICollectionViewGroup 類型的數據，其有兩個屬性：Group 和 GroupItems。關於 ISemanticZoomInformation 介面請參見：/Controls/CollectionControl/SemanticZoomDemo/MyFlipView.cs
                                -->
                                <TextBlock TextWrapping="Wrap" Text="{Binding Group.Title}" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
            
        </SemanticZoom>
    </Grid>
</Page>

Controls/CollectionControl/SemanticZoomDemo/SemanticZoomDemo.xaml.cs

/*
 * SemanticZoom - SemanticZoom 控制項（繼承自 Control, 請參見 /Controls/BaseControl/ControlDemo/）
 *     ToggleActiveView() - 在 ZoomedInView, ZoomedOutView 兩個視圖之間切換
 *     ViewChangeStarted - 視圖切換開始時觸發的事件 
 *     ViewChangeCompleted - 視圖切換完成時觸發的事件
 *     
 * 
 * CollectionViewSource - 對集合數據啟用分組支持
 *     Source - 數據源
 *     View - 獲取視圖對象，返回一個實現了 ICollectionView 介面的對象
 *     IsSourceGrouped - 數據源是否是一個被分組的數據
 *     ItemsPath - 數據源中，子數據集合的屬性名稱
 *     
 * ICollectionView - 支持數據分組是 ICollectionView 的作用之一
 *     CollectionGroups - 組數據集合
 */

using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.SemanticZoomDemo
{
    public sealed partial class SemanticZoomDemo : Page
    {
        public CollectionViewSource MyData
        {
            get
            {
                XElement root = XElement.Load("SiteMap.xml");
                var items = LoadData(root);

                // 構造數據源
                CollectionViewSource source = new CollectionViewSource();
                source.IsSourceGrouped = true;
                source.Source = items;
                source.ItemsPath = new PropertyPath("Items");

                return source;
            }
        }

        public SemanticZoomDemo()
        {
            this.InitializeComponent();
        }

        private void btnToggleActiveView_Click(object sender, RoutedEventArgs e)
        {
            semanticZoom.ToggleActiveView();
        }

        // 解析 xml 數據
        private List<NavigationModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new NavigationModel
                        {
                            Title = (string)n.Attribute("title"),
                            Url = (string)n.Attribute("url"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }
    }
}

2、ISemanticZoomInformation 的示例
Controls/CollectionControl/SemanticZoomDemo/MyFlipView.cs

/*
 * 開發一個實現了 ISemanticZoomInformation 介面的自定義 FlipView
 * 由於本例僅用於 SemanticZoom 中 ZoomedInView 的演示，所以並沒有實現 ISemanticZoomInformation 的全部邏輯
 * 兩個 ISemanticZoomInformation 對象之間交互的核心邏輯就是通過 SemanticZoomLocation source 獲取數據，通過 SemanticZoomLocation destination 設置數據
 * 
 * 
 * ISemanticZoomInformation - 用於 SemanticZoom 的 ZoomedInView 和 ZoomedOutView（說明詳見本例中的註釋）
 * SemanticZoomLocation - 用於設置或獲取 ISemanticZoomInformation 在 SemanticZoom 中的狀態（說明詳見本例中的註釋）
 */

using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.SemanticZoomDemo
{
    public class MyFlipView : FlipView, ISemanticZoomInformation
    {
        public MyFlipView()
            : base()
        {

        }

        /// <summary>
        /// 視圖完成了變化後調用，比如視圖完成了顯示或隱藏之後都會調用這個（與 InitializeViewChange() 是一對）
        /// </summary>
        public void CompleteViewChange() { }

        /// <summary>
        /// 完成 ZoomedInView -> ZoomedOutView 的切換時調用（與 StartViewChangeFrom() 是一對）
        /// </summary>
        public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// <summary>
        /// 完成 ZoomedOutView -> ZoomedInView 的切換時調用（與 StartViewChangeTo() 是一對）
        /// </summary>
        public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// <summary>
        /// 視圖將要發生變化時調用，比如視圖將要被顯示或將要被隱藏之前都會先調用這個（與 CompleteViewChange() 是一對）
        /// </summary>
        public void InitializeViewChange() { }

        /// <summary>
        /// 是否為活動視圖
        /// </summary>
        public bool IsActiveView { get; set; }

        /// <summary>
        /// 是否為 ZoomedInView 視圖
        /// </summary>
        public bool IsZoomedInView { get; set; }

        /// <summary>
        /// 所屬的 SemanticZoom
        /// </summary>
        public SemanticZoom SemanticZoomOwner { get; set; }

        /// <summary>
        /// 開始 ZoomedInView -> ZoomedOutView 的切換時調用（與 CompleteViewChangeFrom() 是一對）
        /// </summary>
        public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// <summary>
        /// 開始 ZoomedOutView -> ZoomedInView 的切換時調用（與 CompleteViewChangeTo() 是一對）
        /// </summary>
        /// <param name="source">在 ZoomedOutView 時被選中的數據</param>
        /// <param name="destination">需要傳遞給 ZoomedInView 的數據</param>
        public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
        {
            /*
             * 註：
             * 1、ListViewBase 實現了 ISemanticZoomInformation 介面，其通過綁定 CollectionViewSource 數據即可使 SemanticZoom 中的兩個視圖進行有關聯地切換，參見 /Controls/CollectionControl/SemanticZoomDemo/SemanticZoomDemo.xaml
             * 2、對於 ListViewBase 來說，它運行到這裡時，通過 source.Item 獲取到的是一個 ICollectionViewGroup 類型的數據，其有兩個屬性：Group 和 GroupItems
             */


            // 獲取在 ZoomedOutView 中被選中的項，即被選中的父親
            NavigationModel model = source.Item as NavigationModel;

            // 將此父親的所有子數據傳遞給 ZoomedInView，接下來會執行 MakeVisible() 方法
            destination.Item = model.Items;
        }

        /// <summary>
        /// 開始 ZoomedOutView -> ZoomedInView 之後，會調用此方法
        /// 一般在此處重整 ZoomedInView 的數據源，或者滾動 ZoomedInView 中的內容到指定的項以對應 ZoomedOutView 中被選中的數據
        /// </summary>
        /// <param name="item">由 StartViewChangeTo() 方法傳遞給 ZoomedInView 的數據</param>
        public void MakeVisible(SemanticZoomLocation item)
        {
            // 將 FlipView 的數據源指定為被選中的父親的所有子數據
            this.ItemsSource = item.Item;
        }
    }
}

Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.SemanticZoomDemo.ISemanticZoomInformationDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl.SemanticZoomDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <Button Name="btnDisplayZoomedOutView" Content="切換至 ZoomedInView 視圖" Click="btnDisplayZoomedOutView_Click" VerticalAlignment="Top" Margin="10 0 10 10" />
        
        <SemanticZoom x:Name="semanticZoom" IsZoomedInViewActive="False" Margin="10 50 10 10">

            <SemanticZoom.ZoomedInView>
                <local:MyFlipView Name="flipView" Width="600" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" FontSize="32" />
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                    <FlipView.ItemContainerStyle>
                        <Style TargetType="FlipViewItem">
                            <Setter Property="Background" Value="Blue" />
                        </Style>
                    </FlipView.ItemContainerStyle>
                </local:MyFlipView>
            </SemanticZoom.ZoomedInView>

            <SemanticZoom.ZoomedOutView>
                <GridView Name="gridView">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Orange" Width="100" Height="100">
                                <TextBlock TextWrapping="Wrap" Text="{Binding Title}" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
            
        </SemanticZoom>
        
    </Grid>
</Page>

Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml.cs

/*
 * 演示 SemanticZoom 如何與自定義的 ISemanticZoomInformation 類結合使用（本例開發了一個實現了 ISemanticZoomInformation 介面的自定義 FlipView，參見 MyFlipView.cs）
 * ZoomedInView 用自定義的 FlipView 演示，ZoomedOutView 用 GridView 演示
 * 
 * 
 * 註：
 * ListViewBase 實現了 ISemanticZoomInformation 介面，所以可以在 SemanticZoom 的兩個視圖間有關聯地切換。如果想讓其它控制項也實現類似的功能，就必須使其實現 ISemanticZoomInformation 介面
 */

using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl.SemanticZoomDemo
{
    public sealed partial class ISemanticZoomInformationDemo : Page
    {
        public ISemanticZoomInformationDemo()
        {
            this.InitializeComponent();
            XElement root = XElement.Load("SiteMap.xml");
            var items = LoadData(root);

            // 綁定數據
            gridView.ItemsSource = items;
        }

        // 獲取數據
        private List<NavigationModel> LoadData(XElement root)
        {
            if (root == null)
                return null;

            var items = from n in root.Elements("node")
                        select new NavigationModel
                        {
                            Title = (string)n.Attribute("title"),
                            Url = (string)n.Attribute("url"),
                            Items = LoadData(n)
                        };

            return items.ToList();
        }

        private void btnDisplayZoomedOutView_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            semanticZoom.IsZoomedInViewActive = false;
        }
    }
}

OK
[源碼下載]