<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>

/* * 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();        }    }}

/* * 开发一个实现了 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;        }    }}

<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>

/* * 演示 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;        }    }}