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

Posted 2020-10-07

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

[源码下载]

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

作者：webabcd


介绍
背水一战 Windows 10 之 控件（集合类）

• 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
[源码下载]