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

[源碼下載]

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

作者：webabcd


介紹
背水一戰 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 時，右下角會有個小按鈕），默認值為 falseZoomedInView - 放大后的視圖（需要實現 ISemanticZoomInformation 接口）ZoomedOutView - 縮小后的視圖（需要實現 ISemanticZoomInformation 接口）IsZoomedInViewActive - ZoomedInView 視圖是否為當前的活動視圖，默認值為 trueCanChangeViews - 是否可以在兩個視圖之間切換（如果禁止的話則用戶將無法切換視圖，程序通過 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

<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 類結合使用（本例開發了一個實現了 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
[源碼下載]

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。