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

2021-05-12 19:27

阅读：506

标签：linq template 返回之一 fonts one complete height string

原文:背水一战 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 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">
                                
                                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 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()
        {

        }

        /// 
        /// 视图完成了变化后调用，比如视图完成了显示或隐藏之后都会调用这个（与 InitializeViewChange() 是一对）
        /// 
        public void CompleteViewChange() { }

        /// 
        /// 完成 ZoomedInView -> ZoomedOutView 的切换时调用（与 StartViewChangeFrom() 是一对）
        /// 
        public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// 
        /// 完成 ZoomedOutView -> ZoomedInView 的切换时调用（与 StartViewChangeTo() 是一对）
        /// 
        public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// 
        /// 视图将要发生变化时调用，比如视图将要被显示或将要被隐藏之前都会先调用这个（与 CompleteViewChange() 是一对）
        /// 
        public void InitializeViewChange() { }

        /// 
        /// 是否为活动视图
        /// 
        public bool IsActiveView { get; set; }

        /// 
        /// 是否为 ZoomedInView 视图
        /// 
        public bool IsZoomedInView { get; set; }

        /// 
        /// 所属的 SemanticZoom
        /// 
        public SemanticZoom SemanticZoomOwner { get; set; }

        /// 
        /// 开始 ZoomedInView -> ZoomedOutView 的切换时调用（与 CompleteViewChangeFrom() 是一对）
        /// 
        public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }

        /// 
        /// 开始 ZoomedOutView -> ZoomedInView 的切换时调用（与 CompleteViewChangeTo() 是一对）
        /// 
        /// 在 ZoomedOutView 时被选中的数据
        /// 需要传递给 ZoomedInView 的数据
        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;
        }

        /// 
        /// 开始 ZoomedOutView -> ZoomedInView 之后，会调用此方法
        /// 一般在此处重整 ZoomedInView 的数据源，或者滚动 ZoomedInView 中的内容到指定的项以对应 ZoomedOutView 中被选中的数据
        /// 
        /// 由 StartViewChangeTo() 方法传递给 ZoomedInView 的数据
        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 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
[源码下载]

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

标签：linq template 返回之一 fonts one complete height string

原文地址：http://www.cnblogs.com/lonelyxmas/p/7568302.html

上一篇：背水一战 Windows 10 (59) - 控件（媒体类）: Image, MediaElement

下一篇：VM WinSer2008虚拟机网络适配器丢失

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：背水一战 Windows 10 (55) - 控件（集合类）: SemanticZoom, ISemanticZoomInformation
文章链接：http://soscw.com/index.php/essay/84820.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章