セマンティックズーム

[アーティクル]
06/02/2023

セマンティックズームを使用すると、ユーザーは同じコンテンツを 2 種類のビューで表示できるようになるので、グループ化された大きなデータセット内を迅速に移動できるようになります。

拡大表示は、コンテンツのメイン表示です。これは、個別のデータ項目を表示するためのメインビューです。
縮小表示は、同じコンテンツの上位レベルの表示です。通常、グループ化されたデータセットのグループヘッダーは、このビューで表示します。

たとえば、アドレス帳を表示しているときに、表示を縮小して "W" の文字にすばやく移動したり、文字を拡大表示して、その文字に関連付けられた名前を調べたりすることができます。

機能:

縮小表示ビューのサイズは、セマンティックズームコントロールの境界によって制限されます。
グループヘッダーをタップするとビューが切り替わります。ピンチしてビューを切り替える方法を有効にできます。
アクティブなヘッダーによりビューが切り替わります。

適切なコントロールの選択

SemanticZoom コントロールは、グループ化されたデータセットを表示する際、データが大きすぎて 1 ページや 2 ページでは表示しきれない場合に使用します。

セマンティックズームと光学式ズームを混同しないように気を付けてください。操作方法と基本的な動作 (ズーム係数に基づいて詳しく表示したり簡単に表示したりする動作) は同じですが、光学式ズームでは、コンテンツ領域またはオブジェクトの倍率調整を写真のように行います。光学式ズームを行うコントロールについて詳しくは、ScrollViewer コントロールの説明をご覧ください。

Recommendations

アプリでセマンティックズームを使うときは、ズームレベルごとに項目のレイアウトとパン方向が変わらないようにする必要があります。レイアウトとパン操作は、ズームレベルに関係なく一貫して予測できるものにしてください。
セマンティックズームを使ってすばやくコンテンツにジャンプできるようにするため、縮小モードでのページや画面の数は 3 つまでに制限します。パンが多すぎると、セマンティックズームの実用性が損なわれます。
セマンティックズームを使ってコンテンツの範囲を変更しないでください。たとえば、フォトアルバムをファイルエクスプローラーのフォルダー表示に切り替えないでください。
各ビューに不可欠な構造とセマンティクスを使います。
グループ化したコレクションの項目にはグループ名を使います。
グループ化せずに並べ替えたコレクションには並べ替え順序を使います (日付の場合は時系列順、名前の一覧の場合はアルファベット順など)。

例

WinUI ギャラリー

コントロールギャラリー内の SemanticZoom セクションは、コントロールの種類がグループ化されたセクションをユーザーがすばやく拡大および縮小できるナビゲーションエクスペリエンスを示しています。

WinUI ギャラリーで使用されるセマンティックズームの例

フォトアプリ

フォトアプリで使われるセマンティックズームの例です。写真は月ごとにグループ化されています。既定のグリッドビューで月ヘッダーを選択すると、月の一覧ビューにズームアウトして、すばやく移動できます。

フォトアプリで使われるセマンティックズーム

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 コントロールには、独自の視覚的表現はありません。 SemanticZoom は、コンテンツを表示する 2 つのコントロール (通常は ListView コントロールと GridView コントロール) 間の切り替えを管理する、ホストコントロールです。開発者は、これらのビューコントロールを SemanticZoom の ZoomedInView プロパティと ZoomedOutView プロパティに設定します。

セマンティックズームに必要な 3 つの要素は次のとおりです。

グループ化されたデータソース。 (グループは、拡大表示されたビューの GroupStyle 定義によって定義されます。)
項目レベルのデータを表示する拡大表示ビュー。
グループレベルのデータを表示する縮小表示ビュー。

セマンティックズームを使用する前に、グループ化されたデータに対してリストビューを使用する方法を理解する必要があります。詳細については、「リストビューとグリッドビュー」を参照してください。

注意

SemanticZoom コントロールのズームインビューとズームアウトビューを定義するには、 ISemanticZoomInformation インターフェイスを実装する任意の 2 つのコントロールを使用できます。 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 コントロールを対話型形式で表示します。

セマンティックズーム

適切なコントロールの選択

Recommendations

例

WinUI ギャラリー

フォトアプリ

UWP と WinUI 2

セマンティックズームの作成

拡大表示ビューの定義

縮小表示ビューの定義

表示の同期

サンプルコードを入手する

フィードバック

その他のリソース

セマンティック ズーム

適切なコントロールの選択

Recommendations

例

WinUI ギャラリー

フォト アプリ

UWP と WinUI 2

セマンティック ズームの作成

拡大表示ビューの定義

縮小表示ビューの定義

表示の同期

サンプル コードを入手する

関連記事

フィードバック

その他のリソース

セマンティックズーム

フォトアプリ

セマンティックズームの作成

サンプルコードを入手する