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

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

[源码下载]

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

作者：webabcd


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

• SemanticZoom
• ISemanticZoomInformation

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

<Pagex: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 时，右下角会有个小按钮），默认值为 falseZoomedInView - 放大后的视图（需要实现 ISemanticZoomInformation 接口）ZoomedOutView - 缩小后的视图（需要实现 ISemanticZoomInformation 接口）IsZoomedInViewActive - ZoomedInView 视图是否为当前的活动视图，默认值为 trueCanChangeViews - 是否可以在两个视图之间切换（如果禁止的话则用户将无法切换视图，程序通过 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

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

总结

以上是生活随笔为你收集整理的背水一战 Windows 10 (55) - 控件（集合类）: SemanticZoom, ISemanticZoomInformation的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。