重新想象 Windows 8 Store Apps (13)

h0945466

　　[源码下载]




重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom　　
作者：webabcd

介绍
重新想象 Windows 8 Store Apps 之 SemanticZoom

• 演示 SemanticZoom 的应用
  
• 通过 ISemanticZoomInformation 接口实现自定义 SemanticZoom 的 View
  

　　
示例
1、演示 SemanticZoom 的应用
Index.xaml




























































































　　Index.xaml.cs



/*
* 本页为此 app 的导航页，同时用于演示：
* 1、ItemsControl 控件如何分组
* 2、SemanticZoom 控件的应用
*
*
* SemanticZoom - 用于关联两个有语义关系的视图
*     ZoomedInView - 放大后的视图，详细数据
*     ZoomedOutView - 缩小后的视图，概述数据
*     IsZoomedInViewActive - ZoomedInView 是否为当前正在显示的视图
*     CanChangeViews - 是否可在两个视图间切换
*     IsZoomOutButtonEnabled - 是否显示用于切换视图的按钮
*     ToggleActiveView() - 切换视图
*     ViewChangeStarted - 视图开始切换时触发的事件
*     ViewChangeCompleted - 视图切换完成时触发的事件
*     
*
* ItemsControl - 一个用于呈现集合数据的控件（GridView, ListView, FlipView, ListBox 等均直接或间接地继承了 ItemsControl）
*     ItemsControl 控件提供了分组功能
*     
* CollectionViewSource - 对集合数据启用分组支持
*     Source - 数据源
*     View - 获取视图对象，返回一个实现了 ICollectionView 接口的对象
*     IsSourceGrouped - 数据源是否是一个被分组的数据
*     ItemsPath - 数据源中，子数据集合的属性名称
*     
* ICollectionView - 支持数据分组
*     CollectionGroups - 组数据集合
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;
using XamlDemo.Common;
namespace XamlDemo
{
public sealed partial class Index : Page
{
// 本页所用到的 GridView 的水平方向上的滚动值
private double _scrollViewerHorizontalOffset = 0;
public Index()
{
this.InitializeComponent();
XElement root = XElement.Load("SiteMap.xml");
var items = LoadData(root);
// 构造数据源
CollectionViewSource groupedNavigationData = new CollectionViewSource();
groupedNavigationData.IsSourceGrouped = true;
groupedNavigationData.Source = items;
groupedNavigationData.ItemsPath = new PropertyPath("Items");
// 绑定数据
gridViewDetails.ItemsSource = groupedNavigationData.View; // 全部数据
gridViewSummary.ItemsSource = groupedNavigationData.View.CollectionGroups; // 关联的组数据集合
// 必须缓存此页
this.NavigationCacheMode = NavigationCacheMode.Required;
gridViewDetails.Loaded += gridViewDetails_Loaded;
}
// 导航到其它页之前，保存本页所用到的 GridView 的水平方向上的滚动值
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
var scrollViewer = Helper.GetVisualChild(gridViewDetails);
_scrollViewerHorizontalOffset = scrollViewer.HorizontalOffset;
}
// GridView 加载之后，指定其水平方向上的滚动值
void gridViewDetails_Loaded(object sender, RoutedEventArgs e)
{
var scrollViewer = Helper.GetVisualChild(gridViewDetails);
scrollViewer.ScrollToHorizontalOffset(_scrollViewerHorizontalOffset);
}
// 获取数据
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();
}
// 导航到指定的 Demo 页
private void Grid_Tapped_1(object sender, TappedRoutedEventArgs e)
{
var model = (NavigationModel)(sender as Grid).Tag;
MainPage.Current.SubTitle = model.Title;
MainPage.Current.Container.Navigate(Type.GetType(model.Url));
}
// 根据屏幕的 height 调整 VariableSizedWrapGrid 的 MaximumRowsOrColumns
// 本例会自动 wrap ，所以不需要以下逻辑，在需要的场景下可以用之
private void VariableSizedWrapGrid_Loaded_1(object sender, RoutedEventArgs e)
{
/*
var screenHeight = Window.Current.Bounds.Height; // CoreWindow.GetForCurrentThread().Bounds.Height
var vswg = sender as VariableSizedWrapGrid;
vswg.MaximumRowsOrColumns = (int)((screenHeight - 200) / 75);
*/
}

class NavigationModel
{
public string Title { get; set; }
public string Url { get; set; }
public List Items { get; set; }
}
}
}
　　
2、演示如何自定义 SemanticZoom 视图
SemanticZoom/MyFlipView.cs



/*
* 开发一个实现了 ISemanticZoomInformation 接口的自定义 FlipView
*/
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace XamlDemo.Controls.SemanticZoom
{
public class MyFlipView : FlipView, ISemanticZoomInformation
{
public MyFlipView()
: base()
{
}
public void CompleteViewChange() { }
public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }
public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) { }
public void InitializeViewChange() { }
public bool IsActiveView { get; set; }
public bool IsZoomedInView { get; set; }
public Windows.UI.Xaml.Controls.SemanticZoom SemanticZoomOwner { get; set; }
public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }
///
/// ZoomedOutView -> ZoomedInView 时触发的事件
///
/// 在 ZoomedOutView 时被选中的数据
/// 需要传递给 ZoomedInView 的数据
public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)
{
/*
* 注：
* GridView 和 ListView 均实现了 ISemanticZoomInformation 接口
* 参见本 app 的关于 SemanticZoom 的 Demo，通过 CollectionViewSource 绑定数据即可使 SemanticZoom 中的两个视图进行有关联地切换
* 此时此处的 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;
}
}
}
　　SemanticZoom/CustomView.xaml
















































　　SemanticZoom/CustomView.xaml.cs



/*
* 演示如何自定义 SemanticZoom 视图
* 演示步骤：
* 1、在 ZoomedOutView 视图中的 GridView 中选中某一项
* 2、展开 ZoomedInView 视图后，其内的 FlipView 显示之前被选中项的所有子数据（需要开发一个实现了 ISemanticZoomInformation 接口的自定义 FlipView，参见 MyFlipView.cs）
*
* 注：
* GridView 和 ListView 均实现了 ISemanticZoomInformation 接口，所以可以在 SemanticZoom 的两个视图间有关联地切换
* 要让其它控件也实现类似的功能，就必须使其实现 ISemanticZoomInformation 接口
*/
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using Windows.UI.Xaml.Controls;
namespace XamlDemo.Controls.SemanticZoom
{
public sealed partial class CustomView : Page
{
public CustomView()
{
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();
}
}
public class NavigationModel
{
public string Title { get; set; }
public string Url { get; set; }
public List Items { get; set; }
}
}
　　
OK
[源码下载]