SemanticZoom コントロールの追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

SemanticZoom コントロールを使うと、拡大表示と縮小表示という 2 種類の方法で同じコンテンツを表示することができます。ここでは、SemanticZoom コントロールを使う方法を示します。

SemanticZoom コントロールの縮小表示と拡大表示

セマンティック ズームの概要と JavaScript と HTML を使ってセマンティック ズームを実装する方法については、このビデオをご覧ください。

セマンティック ズームを行うには、ピンチ操作 (指を互いに近づけて縮小、離して拡大) をするか、Ctrl キーを押しながらマウスのスクロール ホイールをスクロールしたり、Ctrl キーを押しながら + キーまたは - キーを押したりします。 SemanticZoom では、拡大表示ビューの表示時に縮小ボタンも表示されます。

コンテンツのセマンティック ズーム

セマンティック ズームは、コンテンツのパンをすばやく行うのに便利です。次の図のように、縮小表示でコンテンツをタップすると、拡大表示に切り替わり、タップしたポイントにパンされます。

縮小表示 (コンテンツ全体がタッチ ターゲット):

縮小され、コンテンツ全体がタッチ ターゲットになっています。

コンテンツのセクション上をタップ:

コンテンツのセクション上をタップ。

拡大表示に切り替わり、タップした領域にパン:

拡大表示に切り替わり、タップした領域にパンされます。

セマンティック ズーム間の切り替えは、スムーズなクロスフェード アニメーションで行われます。これはタッチの既定の動作であり、カスタマイズできません。

このセクションの内容

トピック 説明

クイック スタート: SemanticZoom の追加

SemanticZoom コントロールを使って、拡大表示と縮小表示という 2 種類の方法で同じコンテンツを表示する方法について説明します。

SemanticZoom テンプレート

SemanticZoom コントロールの縮小表示用の ListView と共に使うことができる項目テンプレートです。