原文:背水一戰(zhàn) Windows 10 (55) - 控件（集合類）: SemanticZoom, ISemanticZoomInformation

[源碼下載]

背水一戰(zhàn) Windows 10 (55) - 控件（集合類）: SemanticZoom, ISemanticZoomInformation

作者：webabcd


介紹
背水一戰(zhàn) Windows 10 之 控件（集合類）

• SemanticZoom
• ISemanticZoomInformation

示例
1、SemanticZoom 的示例
Controls/CollectionControl/SemanticZoomDemo/SemanticZoomDemo.xaml

<Pagex: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 時(shí)，右下角會(huì)有個(gè)小按鈕），默認(rèn)值為 falseZoomedInView - 放大后的視圖（需要實(shí)現(xiàn) ISemanticZoomInformation 接口）ZoomedOutView - 縮小后的視圖（需要實(shí)現(xiàn) ISemanticZoomInformation 接口）IsZoomedInViewActive - ZoomedInView 視圖是否為當(dāng)前的活動(dòng)視圖，默認(rèn)值為 trueCanChangeViews - 是否可以在兩個(gè)視圖之間切換（如果禁止的話則用戶將無法切換視圖，程序通過 IsZoomedInViewActive 或 ToggleActiveView() 來切換的話則會(huì)拋出異常），默認(rèn)值為 true如果需要通過縮放手勢(shì)來切換 ZoomedInView 和 ZoomedOutView 的話，別忘了設(shè)置 ScrollViewer.ZoomMode="Enabled"注：1、ListViewBase 實(shí)現(xiàn)了 ISemanticZoomInformation 接口，其通過綁定 CollectionViewSource 數(shù)據(jù)即可使 SemanticZoom 中的兩個(gè)視圖進(jìn)行有關(guān)聯(lián)的切換2、以下以 ListViewBase 和 SemanticZoom 和 CollectionViewSource 相結(jié)合為例，說明其行為a) ZoomedInView 用于顯示全部數(shù)據(jù)，包括組標(biāo)題和每組的詳細(xì)數(shù)據(jù)，點(diǎn)擊組標(biāo)題會(huì)進(jìn)入到 ZoomedOutView 視圖b) ZoomedOutView 用于只顯示組標(biāo)題，單擊組標(biāo)題會(huì)進(jìn)入到 ZoomedInView 視圖，并自動(dòng)定位到對(duì)應(yīng)的組3、關(guān)于如何自定義 ISemanticZoomInformation 實(shí)現(xiàn)，請(qǐng)參見 /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"><!--上下文數(shù)據(jù)為 ICollectionViewGroup 類型，其 Group 屬性保存著組對(duì)象（本例中 Group 就是每組的 NavigationModel 類型的對(duì)象）ListViewBase 實(shí)現(xiàn)了 ISemanticZoomInformation 接口，其在 StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) 時(shí)，通過 source.Item 獲取到的是一個(gè) ICollectionViewGroup 類型的數(shù)據(jù)，其有兩個(gè)屬性：Group 和 GroupItems。關(guān)于 ISemanticZoomInformation 接口請(qǐng)參見：/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, 請(qǐng)參見 /Controls/BaseControl/ControlDemo/）* ToggleActiveView() - 在 ZoomedInView, ZoomedOutView 兩個(gè)視圖之間切換* ViewChangeStarted - 視圖切換開始時(shí)觸發(fā)的事件 * ViewChangeCompleted - 視圖切換完成時(shí)觸發(fā)的事件* * * CollectionViewSource - 對(duì)集合數(shù)據(jù)啟用分組支持* Source - 數(shù)據(jù)源* View - 獲取視圖對(duì)象，返回一個(gè)實(shí)現(xiàn)了 ICollectionView 接口的對(duì)象* IsSourceGrouped - 數(shù)據(jù)源是否是一個(gè)被分組的數(shù)據(jù)* ItemsPath - 數(shù)據(jù)源中，子數(shù)據(jù)集合的屬性名稱* * ICollectionView - 支持?jǐn)?shù)據(jù)分組是 ICollectionView 的作用之一* CollectionGroups - 組數(shù)據(jù)集合*/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);// 構(gòu)造數(shù)據(jù)源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 數(shù)據(jù)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

/** 開發(fā)一個(gè)實(shí)現(xiàn)了 ISemanticZoomInformation 接口的自定義 FlipView* 由于本例僅用于 SemanticZoom 中 ZoomedInView 的演示，所以并沒有實(shí)現(xiàn) ISemanticZoomInformation 的全部邏輯* 兩個(gè) ISemanticZoomInformation 對(duì)象之間交互的核心邏輯就是通過 SemanticZoomLocation source 獲取數(shù)據(jù)，通過 SemanticZoomLocation destination 設(shè)置數(shù)據(jù)* * * ISemanticZoomInformation - 用于 SemanticZoom 的 ZoomedInView 和 ZoomedOutView（說明詳見本例中的注釋）* SemanticZoomLocation - 用于設(shè)置或獲取 ISemanticZoomInformation 在 SemanticZoom 中的狀態(tài)（說明詳見本例中的注釋）*/using Windows.UI.Xaml.Controls; using Windows10.Common;namespace Windows10.Controls.CollectionControl.SemanticZoomDemo {public class MyFlipView : FlipView, ISemanticZoomInformation{public MyFlipView(): base(){}/// <summary>/// 視圖完成了變化后調(diào)用，比如視圖完成了顯示或隱藏之后都會(huì)調(diào)用這個(gè)（與 InitializeViewChange() 是一對(duì)）/// </summary>public void CompleteViewChange() { }/// <summary>/// 完成 ZoomedInView -> ZoomedOutView 的切換時(shí)調(diào)用（與 StartViewChangeFrom() 是一對(duì)）/// </summary>public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }/// <summary>/// 完成 ZoomedOutView -> ZoomedInView 的切換時(shí)調(diào)用（與 StartViewChangeTo() 是一對(duì)）/// </summary>public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination) { }/// <summary>/// 視圖將要發(fā)生變化時(shí)調(diào)用，比如視圖將要被顯示或?qū)⒁浑[藏之前都會(huì)先調(diào)用這個(gè)（與 CompleteViewChange() 是一對(duì)）/// </summary>public void InitializeViewChange() { }/// <summary>/// 是否為活動(dòng)視圖/// </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 的切換時(shí)調(diào)用（與 CompleteViewChangeFrom() 是一對(duì)）/// </summary>public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination) { }/// <summary>/// 開始 ZoomedOutView -> ZoomedInView 的切換時(shí)調(diào)用（與 CompleteViewChangeTo() 是一對(duì)）/// </summary>/// <param name="source">在 ZoomedOutView 時(shí)被選中的數(shù)據(jù)</param>/// <param name="destination">需要傳遞給 ZoomedInView 的數(shù)據(jù)</param>public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination){/** 注：* 1、ListViewBase 實(shí)現(xiàn)了 ISemanticZoomInformation 接口，其通過綁定 CollectionViewSource 數(shù)據(jù)即可使 SemanticZoom 中的兩個(gè)視圖進(jìn)行有關(guān)聯(lián)地切換，參見 /Controls/CollectionControl/SemanticZoomDemo/SemanticZoomDemo.xaml* 2、對(duì)于 ListViewBase 來說，它運(yùn)行到這里時(shí)，通過 source.Item 獲取到的是一個(gè) ICollectionViewGroup 類型的數(shù)據(jù)，其有兩個(gè)屬性：Group 和 GroupItems*/// 獲取在 ZoomedOutView 中被選中的項(xiàng)，即被選中的父親NavigationModel model = source.Item as NavigationModel;// 將此父親的所有子數(shù)據(jù)傳遞給 ZoomedInView，接下來會(huì)執(zhí)行 MakeVisible() 方法destination.Item = model.Items;}/// <summary>/// 開始 ZoomedOutView -> ZoomedInView 之后，會(huì)調(diào)用此方法/// 一般在此處重整 ZoomedInView 的數(shù)據(jù)源，或者滾動(dòng) ZoomedInView 中的內(nèi)容到指定的項(xiàng)以對(duì)應(yīng) ZoomedOutView 中被選中的數(shù)據(jù)/// </summary>/// <param name="item">由 StartViewChangeTo() 方法傳遞給 ZoomedInView 的數(shù)據(jù)</param>public void MakeVisible(SemanticZoomLocation item){// 將 FlipView 的數(shù)據(jù)源指定為被選中的父親的所有子數(shù)據(jù)this.ItemsSource = item.Item;}} }

Controls/CollectionControl/SemanticZoomDemo/ISemanticZoomInformationDemo.xaml

<Pagex: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 類結(jié)合使用（本例開發(fā)了一個(gè)實(shí)現(xiàn)了 ISemanticZoomInformation 接口的自定義 FlipView，參見 MyFlipView.cs）* ZoomedInView 用自定義的 FlipView 演示，ZoomedOutView 用 GridView 演示* * * 注：* ListViewBase 實(shí)現(xiàn)了 ISemanticZoomInformation 接口，所以可以在 SemanticZoom 的兩個(gè)視圖間有關(guān)聯(lián)地切換。如果想讓其它控件也實(shí)現(xiàn)類似的功能，就必須使其實(shí)現(xiàn) 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);// 綁定數(shù)據(jù)gridView.ItemsSource = items;}// 獲取數(shù)據(jù)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
[源碼下載]

總結(jié)

以上是生活随笔為你收集整理的背水一战 Windows 10 (55) - 控件（集合类）: SemanticZoom, ISemanticZoomInformation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。