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

<Page

    x:Class="XamlDemo.Index"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <SemanticZoom x:Name="semanticZoom" HorizontalAlignment="Left">

            <!--

                放大后的视图，详细数据

            -->

            <SemanticZoom.ZoomedInView>

                <GridView x:Name="gridViewDetails" SelectionMode="None" IsSwipeEnabled="false" Padding="120 0 0 0">

                    <!--分组后，details 的数据模板-->

                    <GridView.ItemTemplate>

                        <DataTemplate>

                            <Grid Background="#022a56" Width="200" Height="65" Tapped="Grid_Tapped_1" Tag="{Binding}">

                                <TextBlock TextWrapping="Wrap" FontSize="14.667" Foreground="#ffffff" Padding="5 0"

                                   HorizontalAlignment="Left" VerticalAlignment="Center"

                                   Text="{Binding Title}"/>

                            </Grid>

                        </DataTemplate>

                    </GridView.ItemTemplate>

                    <!--分组的样式-->

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <!--分组后，header 的数据模板-->

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <TextBlock Text="{Binding Title}" FontSize="26.67" Height="30" Margin="0 0 0 20" />

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <!--分组后，每组数据（包括 header 和 details）的样式-->

                            <GroupStyle.ContainerStyle>

                                <Style TargetType="GroupItem">

                                    <Setter Property="Template">

                                        <Setter.Value>

                                            <ControlTemplate TargetType="GroupItem">

                                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

                                                    <Grid>

                                                        <Grid.RowDefinitions>

                                                            <RowDefinition Height="Auto"/>

                                                            <RowDefinition Height="*"/>

                                                        </Grid.RowDefinitions>

                                                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>

                                                        <!--

                                                            每组数据的 details 数据源来自 ICollectionViewGroup.GroupItems

                                                        -->

                                                        <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>

                                                    </Grid>

                                                </Border>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </GroupStyle.ContainerStyle>

                            <!--分组后，每组数据（包括 header 和 details）的 panel-->

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0 0 50 0" ItemHeight="75" Loaded="VariableSizedWrapGrid_Loaded_1" />

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                    <!--整体数据（一组数据算一个元素）的 panel-->

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <StackPanel Orientation="Horizontal" />

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                </GridView>

            </SemanticZoom.ZoomedInView>

            <!--

                缩小后的视图，概述数据

            -->

            <SemanticZoom.ZoomedOutView>

                <GridView Name="gridViewSummary" HorizontalAlignment="Left" Padding="120 0 0 0">

                    <GridView.ItemTemplate>

                        <DataTemplate>

                            <Grid Background="#022a56" Width="100" Height="100">

                                <!--

                                    每组数据的 header 数据源来自 ICollectionViewGroup.Group

                                -->

                                <TextBlock Text="{Binding Group.Title}" Foreground="#ffffff" Opacity="0.9" FontSize="14.667" Margin="5" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" />

                            </Grid>

                        </DataTemplate>

                    </GridView.ItemTemplate>

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <WrapGrid MaximumRowsOrColumns="8" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" />

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.ItemContainerStyle>

                        <Style TargetType="GridViewItem">

                            <Setter Property="Margin" Value="5 5 5 30" />

                            <Setter Property="HorizontalContentAlignment" Value="Center" />

                            <Setter Property="VerticalContentAlignment" Value="Center" />

                        </Style>

                    </GridView.ItemContainerStyle>

                </GridView>

            </SemanticZoom.ZoomedOutView>

        </SemanticZoom>

    </Grid>

</Page>

/*

 * 本页为此 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 = ;

        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<ScrollViewer>(gridViewDetails);

            _scrollViewerHorizontalOffset = scrollViewer.HorizontalOffset;

        }

        // GridView 加载之后，指定其水平方向上的滚动值

        void gridViewDetails_Loaded(object sender, RoutedEventArgs e)

        {

            var scrollViewer = Helper.GetVisualChild<ScrollViewer>(gridViewDetails);

            scrollViewer.ScrollToHorizontalOffset(_scrollViewerHorizontalOffset);

        }

        // 获取数据

        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();

        }

        // 导航到指定的 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<NavigationModel> Items { get; set; }

        }

    }

}

/*

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

        /// <summary>

        /// ZoomedOutView -> ZoomedInView 时触发的事件

        /// </summary>

        /// <param name="source">在 ZoomedOutView 时被选中的数据</param>

        /// <param name="destination">需要传递给 ZoomedInView 的数据</param>

        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;

        }

        /// <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="XamlDemo.Controls.SemanticZoom.CustomView"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XamlDemo.Controls.SemanticZoom"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <SemanticZoom x:Name="semanticZoom" IsZoomedInViewActive="False" Margin="120 0 0 0">

            <!--

                放大后的视图，详细数据

            -->

            <SemanticZoom.ZoomedInView>

                <local:MyFlipView x:Name="flipView" Width="600" Height="300" HorizontalAlignment="Left">

                    <FlipView.ItemTemplate>

                        <DataTemplate>

                            <TextBlock Text="{Binding Title}" FontSize="26.667" />

                        </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" HorizontalAlignment="Left">

                    <GridView.ItemTemplate>

                        <DataTemplate>

                            <Grid Background="#022a56" Width="100" Height="100">

                                <TextBlock Text="{Binding Title}" Foreground="#ffffff" Opacity="0.9" FontSize="14.667" Margin="5" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" />

                            </Grid>

                        </DataTemplate>

                    </GridView.ItemTemplate>

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <WrapGrid MaximumRowsOrColumns="8" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" />

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.ItemContainerStyle>

                        <Style TargetType="GridViewItem">

                            <Setter Property="Margin" Value="5 5 5 30" />

                            <Setter Property="HorizontalContentAlignment" Value="Center" />

                            <Setter Property="VerticalContentAlignment" Value="Center" />

                        </Style>

                    </GridView.ItemContainerStyle>

                </GridView>

            </SemanticZoom.ZoomedOutView>

        </SemanticZoom>

    </Grid>

</Page>

/*

 * 演示如何自定义 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<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();

        }

    }

    public class NavigationModel

    {

        public string Title { get; set; }

        public string Url { get; set; }

        public List<NavigationModel> Items { get; set; }

    }

}