スクロール ビューアー コントロールScroll viewer controls

1 つの領域には収まらない UI コンテンツがある場合は、スクロール ビューアー コントロールを使用します。When there is more UI content to show than you can fit in an area, use the scroll viewer control.

重要な API:ScrollViewer クラスScrollBar クラスImportant APIs: ScrollViewer class, ScrollBar class

スクロール ビューアーにより、ビューポート (表示可能な領域) の境界外のコンテンツを拡張表示できるようになります。Scroll viewers enable content to extend beyond the bounds of the viewport (visible area). ユーザーはこのコンテンツを表示するために、タッチ、マウス ホイール、キーボード、ゲームパッドでスクロール ビューアーのサーフェスを操作します。またはマウスやペン カーソルでスクロール ビューアーのスクロールバーを操作します。Users reach this content by manipulating the scroll viewer surface through touch, mousewheel, keyboard, or a gamepad, or by using the mouse or pen cursor to interact with the scroll viewer's scrollbar. 以下の画像に、スクロール ビューアー コントロールの例をいくつか示します。This image shows several examples of scroll viewer controls.

標準的なスクロールバー コントロールを示すスクリーンショット

状況によって、スクロール ビューアーのスクロールバーは 2 つの視覚化を使用します (以下の画像参照)。左がパン インジケーター、右が従来のスクロールバーです。Depending on the situation, the scroll viewer's scrollbar uses two different visualizations, shown in the following illustration: the panning indicator (left) and the traditional scrollbar (right).

標準的なスクロールバーとパン インジケーター コントロールの外観のサンプル

スクロール ビューアーはユーザーの入力方式を理解して、どの視覚化を表示すればよいか判断します。The scroll viewer is conscious of the user’s input method and uses it to determine which visualization to display.

  • たとえば、スクロールバーが直接操作されずに領域がスクロールされると、パン インジケーターが表示されて現在のスクロール位置が示されます。When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
  • マウスかペン カーソルがパン インジケーターの上に移動すると、パン インジケーターが従来のスクロール バーに変形します。When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar. スクロールバーのつまみをドラッグすると、スクロール領域が操作されます。Dragging the scrollbar thumb manipulates the scrolling region.

スクロールバーの動作

注意

スクロールバーは、表示されると ScrollViewer 内のコンテンツの上部に 16 ピクセルでオーバーレイされます。When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollViewer. UX を適切に設計するには、このオーバーレイによってインタラクティブなコンテンツが隠れないようにする必要があります。In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. また、UX を重複させないようにするには、スクロールバーを考慮してビューポートの端のパディングを 16 ピクセル残すようにしてください。Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、ScrollViewer の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the ScrollViewer in action.

スクロール ビューアーを作成するCreate a scroll viewer

ページに垂直スクロールを追加するには、スクロール ビューアーでページのコンテンツをラップします。To add vertical scrolling to your page, wrap the page content in a scroll viewer.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <ScrollViewer>
        <StackPanel>
            <TextBlock Text="My Page Title" Style="{StaticResource TitleTextBlockStyle}"/>
            <!-- more page content -->
        </StackPanel>
    </ScrollViewer>
</Page>

この XAML は、水平スクロールを有効にする、スクロール ビューアーに画像を配置、およびズームを有効にする方法を示します。This XAML shows how to enable horizontal scrolling, place an image in a scroll viewer and enable zooming.

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10"
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

コントロール テンプレートにおける ScrollViewerScrollViewer in a control template

ScrollViewer コントロールが他のコントロールの複合パートとして存在するのは一般的です。It's typical for a ScrollViewer control to exist as a composite part of other controls. ScrollViewer パーツは、サポートのための ScrollContentPresenter クラスと共に、ホスト コントロールのレイアウト スペースが展開されたコンテンツのサイズより小さく制限されている場合にのみ、スクロールバーと、ビューポートを表示します。A ScrollViewer part, along with the ScrollContentPresenter class for support, will display a viewport along with scrollbars only when the host control's layout space is being constrained smaller than the expanded content size. 多くの場合、リストがこれに該当するため、ListViewGridView テンプレートは常に ScrollViewer を含めます。This is often the case for lists, so ListView and GridView templates always include a ScrollViewer. TextBoxRichEditBox もまたテンプレートに ScrollViewer を含みます。TextBox and RichEditBox also include a ScrollViewer in their templates.

ScrollViewer パーツがコントロール内に存在するとき、ホスト コントロールには通常、特定の入力イベントとコンテンツをスクロールできるようになる操作に対するイベント処理が組み込まれています。When a ScrollViewer part exists in a control, the host control often has built-in event handling for certain input events and manipulations that enable the content to scroll. たとえば、GridView がスワイプ ジェスチャを解釈すると、これにより、コンテンツは水平方向にスクロールします。For example, a GridView interprets a swipe gesture and this causes the content to scroll horizontally. ホスト コントロールが受け取る入力イベントと直接操作は、コントロールで処理されると見なされ、PointerPressed などのより低レベルのイベントは発生せず、どの親コンテナーにもバブル ルーティングされません。The input events and raw manipulations that the host control receives are considered handled by the control, and lower-level events such as PointerPressed won't be raised and won't bubble to any parent containers either. コントロール クラスとイベントの On* 仮想メソッドをオーバーライドするか、コントロールを再テンプレート化することで、組み込みのコントロール処理の一部を変更することができます。You can change some of the built-in control handling by overriding a control class and the On* virtual methods for events, or by retemplating the control. ただし、いずれの場合も、元の既定の動作を再現するのは簡単ではありません。この動作では、通常、コントロールはイベントやユーザーの入力動作と入力ジェスチャに予期したとおりに対応します。But in either case it's not trivial to reproduce the original default behavior, which is typically there so that the control reacts in expected ways to events and to a user's input actions and gestures. そのため、入力イベントの発生が本当に必要かどうかを検討することをお勧めします。So you should consider whether you really need that input event to fire. コントロールで処理されない他の入力イベントや入力ジェスチャがあるかどうかを調査して、アプリやコントロール操作の設計では、それらを使う場合があります。You might want to investigate whether there are other input events or gestures that are not being handled by the control, and use those in your app or control interaction design.

ScrollViewer を含むコントロールが ScrollViewer パーツ内の動作やプロパティの一部に影響を与えることができるように、ScrollViewer ではスタイルで設定でき、テンプレートのバインドで使用できる多数の XAML 添付プロパティを定義します。To make it possible for controls that include a ScrollViewer to influence some of the behavior and properties that are from within the ScrollViewer part, ScrollViewer defines a number of XAML attached properties that can be set in styles and used in template bindings. 添付プロパティについて詳しくは、「添付プロパティの概要」をご覧ください。For more info about attached properties, see Attached properties overview.

ScrollViewer の XAML の添付プロパティScrollViewer XAML attached properties

ScrollViewer では、次の XAML 添付プロパティを定義します。ScrollViewer defines the following XAML attached properties:

これらの XAML 添付プロパティは、ListView または GridView で既定のテンプレートに ScrollViewer が存在しており、テンプレート パーツにアクセスすることなく、コントロールのスクロール動作に影響を与えられるようにするときなど、ScrollViewer が暗黙的である場合を想定したものです。These XAML attached properties are intended for cases where the ScrollViewer is implicit, such as when the ScrollViewer exists in the default template for a ListView or GridView, and you want to be able to influence the scrolling behavior of the control without accessing template parts.

たとえば、ListView の組み込みのスクロール ビューアーで垂直スクロールバーが常に表示されるようにする方法を次に示します。For example, here's how to make the vertical scrollbars always visible for a ListView's built in scroll viewer.

<ListView ScrollViewer.VerticalScrollBarVisibility="Visible"/>

ScrollViewer が XAML で明示的である場合、コード例に示すように、添付プロパティ構文を使用する必要はありません。For cases where a ScrollViewer is explicit in your XAML, as is shown in the example code, you don't need to use attached property syntax. 属性構文 (たとえば <ScrollViewer VerticalScrollBarVisibility="Visible"/>) を使うだけです。Just use attribute syntax, for example <ScrollViewer VerticalScrollBarVisibility="Visible"/>.

推奨と非推奨Do's and don'ts

  • できる限り、水平方向ではなく垂直方向のスクロールを設計してください。Whenever possible, design for vertical scrolling rather than horizontal.
  • コンテンツ領域が 1 つのビューポート境界 (垂直方向または水平方向) を超えている場合は、単一軸のパンを使います。Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal). コンテンツ領域が両方のビューポート境界 (垂直方向と水平方向) を超えている場合は、2 軸のパンを使います。Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).
  • リスト ビュー、グリッド ビュー、コンボ ボックス、リスト ボックス、テキスト入力ボックス、およびハブ コントロールの組み込みのスクロール機能を使います。Use the built-in scroll functionality in the list view, grid view, combo box, list box, text input box, and hub controls. こうしたコントロールでは、同時に表示する項目が多すぎる場合に、ユーザーが項目のリストを水平方向、垂直方向のいずれかにスクロールできます。With those controls, if there are too many items to show all at once, the user is able to scroll either horizontally or vertically over the list of items.
  • ユーザーがより大きな領域の周囲で両方向にパンすること、そしておそらくズームできるようにする場合、たとえばユーザーが (画面に適合するサイズに設定されたイメージではなく) フル サイズのイメージをパンおよびズームできるようにする場合には、スクロール ビューアー内にイメージを配置します。If you want the user to pan in both directions around a larger area, and possibly to zoom, too, for example, if you want to allow the user to pan and zoom over a full-sized image (rather than an image sized to fit the screen) then place the image inside a scroll viewer.
  • ユーザーが長いテキスト パスをスクロールする場合、垂直方向にのみスクロールするようにスクロール ビューアーを構成します。If the user will scroll through a long passage of text, configure the scroll viewer to scroll vertically only.
  • 1 つのオブジェクトのみを含める場合にスクロール ビューアーを使います。Use a scroll viewer to contain one object only. 1 つのオブジェクトをレイアウト パネルとし、その任意の数のオブジェクトを含めることができる点に注意してください。Note that the one object can be a layout panel, in turn containing any number of objects of its own.
  • ピボットのスクロール ロジックが競合するのを避けるため、スクロール ビューアー内にはピボット コントロールを配置しないでください。Don't place a Pivot control inside a scroll viewer to avoid conflicts with pivot's scrolling logic.

サンプル コードを入手するGet the sample code

開発者向け (XAML)For developers (XAML)