語意式縮放Semantic zoom

語意式縮放可讓使用者在相同內容的兩個不同檢視之間切換,這樣就能快速瀏覽大型分組資料集。Semantic zoom lets the user switch between two different views of the same content so that they can quickly navigate through a large set of grouped data.

  • 放大檢視是內容的主要檢視。The zoomed-in view is the main view of the content. 這是您顯示個別資料項目的主要檢視。This is the main view where you show individual data items.
  • 縮小檢視是相同內容的高階檢視。The zoomed-out view is a higher-level view of the same content. 您通常會在此檢視中顯示分組資料集的群組標頭。You typically show the group headers for a grouped data set in this view.

例如,使用者檢視通訊錄時,可縮小以快速跳到字母 "W",然後放大該字母以查看與其相關的名稱。For example, when viewing an address book, the user could zoom out to quickly jump to the letter "W", and zoom in on that letter to see the names associated with it.

重要 APISemanticZoom 類別ListView 類別GridView 類別Important APIs: SemanticZoom class, ListView class, GridView class

功能Features:

  • 縮小檢視的大小受限於語意式縮放控制項的範圍。The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
  • 點選群組標題會切換檢視。Tapping on a group header toggles views. 可以啟用捏合在檢視之間切換。Pinching as a way to toggle between views can be enabled.
  • 使用中的標題可在檢視之間切換。Active headers switch between views.

這是正確的控制項嗎?Is this the right control?

當您需要顯示的分組資料集大到無法全部顯示在一或兩個頁面上時,請使用 SemanticZoom 控制項。Use a SemanticZoom control when you need to show a grouped data set that's large enough that it can't all be shown on one or two pages.

請勿混淆語意式縮放與視覺化縮放。Don't confuse semantic zooming with optical zooming. 雖然它們共用相同的互動和基本行為 (根據縮放係數顯示較多或較少的詳細資料),但視覺化縮放是指內容區域或物件 (例如相片) 的倍率調整。While they share both the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph. 如需執行視覺化縮放的控制項相關資訊,請參閱 ScrollViewer 控制項。For info about a control that performs optical zooming, see the ScrollViewer control.

範例Examples

XAML 控制項庫XAML Controls Gallery
XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請按一下這裡開啟應用程式並查看 SemanticZoom 運作情形If you have the XAML Controls Gallery app installed, click here to open the app and see the SemanticZoom in action.

XAML 控制項庫XAML Controls Gallery

控制項庫中的 [SemanticZoom] 區段會示範瀏覽體驗,讓使用者能夠快速放大和縮小控制項類型的群組區段。The SemanticZoom section within the Controls Gallery demonstrates a navigation experience that allows users to quickly zoom in and out of grouped sections of control types.

XAMl 控制項庫中使用的語意式縮放範例

相片應用程式Photos app

以下是相片 app 中使用的語意式縮放。Here's a semantic zoom used in the Photos app. 相片是依月份分組。Photos are grouped by month. 選取預設方格檢視中的月份標頭時,會縮小月份清單檢視以供快速瀏覽。Selecting a month header in the default grid view zooms out to the month list view for quicker navigation.

相片 app 中使用的語意式縮放

建立語意式縮放Create a semantic zoom

SemanticZoom 控制項沒有屬於自己的任何視覺化呈現方式。The SemanticZoom control doesn't have any visual representation of its own. 它是一個主控制項,可管理另外 2 個提供內容檢視的控制項,通常是 ListViewGridView 控制項。It's a host control that manages the transition between 2 other controls that provide the views of your content, typically ListView or GridView controls. 您會將檢視控制項設定為 SemanticZoom 的 ZoomedInViewZoomedOutView 屬性。You set the view controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.

語意式縮放需要的 3 個元素為︰The 3 elements you need for a semantic zoom are:

  • 分組的資料來源。A grouped data source. (群組是由放大檢視中的 GroupStyle 定義所定義。)(Groups are defined by the GroupStyle definition in the zoomed-in view.)
  • 可顯示項目層級資料的放大檢視。A zoomed-in view that shows the item-level data.
  • 可顯示群組層級資料的縮小檢視。A zoomed-out view that shows the group-level data.

使用語意式縮放之前,您應該了解如何使用具有分組資料的清單檢視。Before you use a semantic zoom, you should understand how to use a list view with grouped data. 如需詳細資訊,請參閱清單檢視和方格檢視For more info, see List view and grid view.

注意  若要定義 SemanticZoom 控制項的放大檢視和縮小檢視,您可以使用實作 ISemanticZoomInformation 介面的任兩個控制項。Note  To define the zoomed-in view and the zoomed-out view of the SemanticZoom control, you can use any two controls that implement the ISemanticZoomInformation interface. XAML 架構提供 3 個實作此介面的控制項︰ListView、GridView 及 Hub。The XAML framework provides 3 controls that implement this interface: ListView, GridView, and Hub.

這個 XAML 會顯示 SemanticZoom 控制項的結構。This XAML shows the structure of the SemanticZoom control. 您會將其他控制項指派給 ZoomedInView 與 ZoomedOutView 屬性。You assign other controls to the ZoomedInView and ZoomedOutView properties.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->   
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->       
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

這裡的範例取自 XAML UI 基本知識範例的 SemanticZoom 頁面。The examples here are taken from the SemanticZoom page of the XAML UI Basics sample. 您可以下載範例以查看包括資料來源的完整程式碼。You can download the sample to see the complete code including the data source. 此語意式縮放使用 GridView 來提供放大檢視,並使用 ListView 來提供縮小檢視。This semantic zoom uses a GridView to supply the zoomed-in view and a ListView for the zoomed-out view.

定義放大檢視Define the zoomed-in view

以下是用於放大檢視的 GridView 控制項。Here's the GridView control for the zoomed-in view. 放大檢視應會顯示群組中的個別資料項目。The zoomed-in view should display the individual data items in groups. 這個範例顯示如何在格線內以影像與文字顯示項目。This example shows how to display the items in a grid with an image and text.

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}" 
              ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
              SelectionMode="None" 
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

群組標頭的外觀是在 ZoomedInGroupHeaderTemplate 資源中定義。The look of the group headers is defined in the ZoomedInGroupHeaderTemplate resource. 項目的外觀是在 ZoomedInTemplate 資源中定義。The look of the items is defined in the ZoomedInTemplate resource.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}" 
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}" 
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}" 
                       TextWrapping="Wrap" HorizontalAlignment="Left" 
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

定義縮小檢視Define the zoomed-out view

此 XAML 定義用於縮小檢視的 ListView 控制項。This XAML defines a ListView control for the zoomed-out view. 這個範例說明如何在清單中將群組標頭顯示為文字。This example shows how to display the group headers as text in a list.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}" 
              SelectionMode="None" 
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

外觀是在 ZoomedOutTemplate 資源中定義。The look is defined in the ZoomedOutTemplate resource.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}" 
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

同步檢視Synchronize the views

放大檢視與縮小檢視應該同步,讓使用者在縮小檢視中選取群組時,該群組的詳細資料能夠顯示在放大檢視中。The zoomed-in view and zoomed-out view should be synchronized, so if a user selects a group in the zoomed-out view, the details of that same group are shown in the zoomed-in view. 您可以使用 CollectionViewSource 或新增程式碼來同步檢視。You can use a CollectionViewSource or add code to synchronize the views.

繫結到相同 CollectionViewSource 的任何控制項將永遠具有相同的目前項目。Any controls that you bind to the same CollectionViewSource always have the same current item. 如果兩種檢視都使用相同的 CollectionViewSource 做為資料來源,CollectionViewSource 就會自動同步檢視。If both views use the same CollectionViewSource as their data source, the CollectionViewSource synchronizes the views automatically. 如需詳細資訊,請參閱 CollectionViewSourceFor more info, see CollectionViewSource.

如果您不使用 CollectionViewSource 來同步檢視,則應該處理 ViewChangeStarted 事件,並在事件處理常式中同步項目,如下所示。If you don't use a CollectionViewSource to synchronize the views, you should handle the ViewChangeStarted event and synchronize the items in the event handler, as shown here.

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">
private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}

建議Recommendations

  • 在您的應用程式中使用語意式縮放時,請不要隨縮放層級變更項目配置和移動瀏覽方向。When using semantic zoom in your app, be sure that the item layout and panning direction don't change based on the zoom level. 配置和移動瀏覽互動在縮放比例之間應該保持一致且可預測。Layouts and panning interactions should be consistent and predictable across zoom levels.
  • 語意式縮放可以讓使用者快速跳到內容,所以請將縮小檢視模式中頁面/畫面的數量限制為三個。Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. 過多的移動瀏覽會減少語意式縮放的實用性。Too much panning diminishes the practicality of semantic zoom.
  • 請避免使用語意式縮放來變更內容的範圍。Avoid using semantic zoom to change the scope of the content. 例如,相簿不應該切換到 [檔案總管] 的資料夾檢視。For example, a photo album shouldn't switch to a folder view in File Explorer.
  • 使用檢視所必要的結構和語意檢視。Use a structure and semantics that are essential to the view.
  • 使用群組集合中項目的群組名稱。Use group names for items in a grouped collection.
  • 針對未分組但已排序的集合使用排序 (例如依時間順序排序日期,或依字母順序排序名稱清單)。Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.

取得範例程式碼Get the sample code