背水一战 Windows 10 (55)

ycvodzf

[源码下载]

背水一战 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
[源码下载]