セマンティック ズームSemantic zoom

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

重要な API:SemanticZoom クラス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 コントロールは、グループ化されたデータ セットを表示する際、データが大きすぎて 1 ページや 2 ページでは表示しきれない場合に使用します。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.

写真アプリPhotos 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.

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

アドレス帳Address book

セマンティック ズームを使って簡単にナビゲートできるデータ セットの例として、アドレス帳があります。An address book is another example of a data set that can be much easier to navigate using semantic zoom. 縮小表示ビューを使用すると、必要な文字にすばやく移動できます (左の画像)。拡大表示ビューには、個別のデータ項目が表示されます (右の画像)。You can use the zoomed-out view to quickly jump to the letter you need (left image), while the zoomed-in view displays the individual data items (right image).

連絡先の一覧で使用されているセマンティック ズームの例

セマンティック ズームの作成Create a semantic zoom

SemanticZoomコントロールには、独自の視覚的表現はありません。The SemanticZoom control doesn’t have any visual representation of its own. SemanticZoom は、コンテンツを表示する 2 つのコントロール (通常は ListView コントロールと GridView コントロール) 間の切り替えを管理する、ホスト コントロールです。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 の ZoomedInView プロパティと ZoomedOutView プロパティに設定します。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
  • 項目レベルのデータを表示する拡大表示ビュー。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 インターフェイスを実装する任意のコントロールを 2 つ使用できます。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、およびハブ。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. 詳しくは、CollectionViewSource をご覧ください。For 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.
  • セマンティック ズームを使ってすばやくコンテンツにジャンプできるようにするため、縮小モードでのページや画面の数は 3 つまでに制限します。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