编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China 头条阅读 学淘股 China Travel
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> WinRT-Metro -> 背水一战 Windows 10 (55) -> 正文阅读

[WinRT-Metro]背水一战 Windows 10 (55)

[源码下载]
背水一战 Windows 10 (55) - 控件(集合类): ItemsControl - SemanticZoom, ISemanticZoomInformation
作者:webabcd
介绍
背水一战 Windows 10 之 控件(集合类 - ItemsControl)
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
[源码下载]
  WinRT-Metro 最新文章
背水一战 Windows 10 (76)
背水一战 Windows 10 (75)
uwp ListView列表滑动特效
背水一战 Windows 10 (74)
背水一战 Windows 10 (73)
背水一战 Windows 10 (72)
背水一战 Windows 10 (21)
背水一战 Windows 10 (18)
Win10 UWP 开发系列:使用SplitView实现汉堡
UWP中新加的数据绑定方式x:Bind分析总结
上一篇文章           查看所有文章
加:2017-06-22 15:05:23  更:2017-06-22 15:05:25 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 头条阅读 学淘股 China Travel 日历 万年历 2020年2日历
2020-2-22 17:51:51
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识