語意式縮放

語意式縮放可讓使用者在相同內容的兩個不同檢視之間切換，以便他們快速流覽一組大型群組數據。

• 放大檢視是內容的主要檢視。 這是您顯示個別數據項的主要檢視。
• 縮小檢視是相同內容的較高層級檢視。 您通常會在此檢視中顯示群組數據集的群組標頭。

例如，檢視通訊簿時，使用者可以放大以快速跳到字母 「W」，並放大該字母以查看與其相關聯的名稱。

功能：

• 縮小檢視的大小受限於語意縮放控件的範圍。
• 點選群組標頭會切換檢視。 您可以啟用捏合來切換檢視。
• 作用中標頭會在檢視之間切換。

這是正確的控制項嗎？

當您需要顯示的分組資料集大到無法全部顯示在一或兩個頁面上時，請使用 SemanticZoom 控制項。

請勿混淆語意式縮放與光學縮放。 雖然它們共用相同的互動和基本行為（根據縮放因數顯示更多或更少的詳細數據），但光學縮放是指調整內容區域或物件，例如相片。 如需執行光學縮放之控件的資訊，請參閱 ScrollViewer 控件。

建議

• 在應用程式中使用語意式縮放時，請確定專案配置和移動流覽方向不會根據縮放層級變更。 版面配置和移動瀏覽互動應該在縮放層級之間保持一致且可預測。
• 語意式縮放可讓使用者快速跳至內容，因此將縮小模式中的頁面/畫面數目限制為三個。 太多行動瀏覽會降低語意式縮放的實用性。
• 避免使用語意式縮放來變更內容的範圍。 例如，相簿不應該切換至 檔案總管的資料夾檢視。
• 使用檢視不可或缺的結構和語意。
• 針對群組集合中的專案使用組名。
• 針對未分組但已排序的集合使用排序順序，例如日期的時序或名稱清單的字母順序。

範例

WinUI 資源庫

控制項庫中的 [SemanticZoom] 區段會示範瀏覽體驗，讓使用者能夠快速放大和縮小控制項類型的群組區段。

相片 App

以下是在相片應用程式中使用的語意式縮放。 相片會依月份分組。 在預設方格檢視中選取月份標頭會縮小至月份清單檢視，以便更快速流覽。

UWP 和 WinUI 2

重要

本文中的資訊和範例已針對使用 Windows 應用程式 SDK 和 WinUI 3 的應用程式進行優化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平臺特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控件所需的資訊。

此控件的 API 存在於 Windows.UI.Xaml.Controls 命名空間中。

• UWP API：SemanticZoom 類別、 ListView 類別、 GridView 類別
• 開啟 WinUI 2 資源庫應用程式，並查看 SemanticZoom 運作情形。 WinUI 2 資源庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

我們建議使用最新的 WinUI 2 來取得所有控制件的最新樣式和範本。

建立語意式縮放

• 重要 API：SemanticZoom 類別、 ListView 類別、 GridView 類別

開啟 WinUI 3 資源庫應用程式，並查看 SemanticZoom 運作情形。

WinUI 3 資源 庫 應用程式包含大部分 WinUI 3 控制件、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上 取得原始程式碼

SemanticZoom 控制項沒有屬於自己的任何視覺化呈現方式。 它是一個主控制項，可管理另外 2 個提供內容檢視的控制項，通常是 ListView 或 GridView 控制項。 您可以將檢視控件設定為 SemanticZoom 的 ZoomedInView 和 ZoomedOutView 屬性。

語意式縮放所需的 3 個元素如下：

• 分組的資料來源。 (群組是由放大檢視中的 GroupStyle 定義所定義。)
• 顯示專案層級數據的放大檢視。
• 顯示群組層級數據的縮小檢視。

使用語意式縮放之前，您應該先瞭解如何搭配群組數據使用清單檢視。 如需詳細資訊，請參閱清單檢視和方格檢視。

注意

若要定義 SemanticZoom 控制件的放大檢視和縮小檢視，您可以使用任何兩個實作 ISemanticZoomInformation 介面的控件。 XAML 架構提供 3 個實作此介面的控件：ListView、GridView 和 Hub。

此 XAML 會顯示 SemanticZoom 控制件的結構。 您可以將其他控件指派給 ZoomedInView 和 ZoomedOutView 屬性。

<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>

這裡的範例取自 WinUI 資源庫範例的 SemanticZoom 頁面。 您可以下載範例以查看包括資料來源的完整程式碼。 此語意式縮放會使用 GridView 來提供放大檢視和 ListView 來縮小檢視。

定義放大檢視

以下是放大檢視的 GridView 控制件。 放大檢視應該會顯示群組中的個別數據項。 此範例示範如何使用影像和文字在方格中顯示專案。

<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 資源中定義。 項目的外觀定義於資源中 ZoomedInTemplate 。

<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>

定義縮小檢視

此 XAML 會定義縮小檢視的 ListView 控件。 此範例示範如何將群組標頭顯示為清單中的文字。

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

外觀定義於資源中 ZoomedOutTemplate 。

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

同步檢視

放大檢視和縮小檢視應該同步處理，因此如果使用者在縮小檢視中選取群組，該群組的詳細數據會顯示在放大檢視中。 您可以使用 CollectionViewSource 或新增程式代碼來同步檢視。

系結至相同 CollectionViewSource 的任何控件一律具有相同的目前專案。 如果這兩個檢視使用與其數據源相同的 CollectionViewSource，則 CollectionViewSource 會自動同步處理檢視。 如需詳細資訊，請參閱 CollectionViewSource。

如果您未使用 CollectionViewSource 來同步檢視，您應該處理 ViewChangeStarted 事件並同步事件處理程式中的專案，如下所示。

<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;
    }
}

取得範例程式碼

• WinUI 資源庫範例 - 查看互動式格式的所有 XAML 控制件。

相關文章

• 瀏覽設計基本知識
• 清單檢視和方格檢視
• 項目容器與範本