ScrollViewer コントロールのスタイル処理のヒント

  • [アーティクル]

Ee341456.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png

[ScrollViewer] コントロールは、スクロール可能な領域を示すオブジェクトです。この領域にはどのようなオブジェクトも配置することができます。たとえば、ListBox テンプレート内にはアイテム一覧を表示する ItemsPresenter が含まれている [ScrollViewer] コントロールがあります。

他のコントロールと同様に、[ScrollViewer] コントロールも既定の外観を変更できます。既定の [ScrollViewer] コントロールは、次のように表示されます。

Ee341456.0fb6390c-a631-4f14-8f23-be3723f99405(JA-JP,Expression.30).png

ScrollViewer コントロールのプロパティ

[ScrollViewer] コントロール内で [ScrollBar] オブジェクトを表示または非表示にするには、[HorizontalScrollBarVisibility] プロパティと [VerticalScrollBarVisibility] プロパティを設定します。これらのプロパティは、[プロパティ] パネルの [レイアウト] カテゴリの [詳細プロパティの表示] Ee341456.de239c9d-42ce-4f5e-83b9-5f9924c0431f(JA-JP,Expression.30).png をクリックすると表示されます。

これらのプロパティを設定するには、次の方法があります。

  • オブジェクトのプロパティを設定する   アートボードに [ScrollViewer] オブジェクトを描いた後で、そのプロパティを直接設定します。複数の [ScrollViewer] オブジェクトで同じ値を使用する場合は、これらのプロパティをスタイルとして設定します。

  • プロパティをスタイルとして設定する   [ScrollViewer] オブジェクトのプロパティをスタイル Ee341456.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(JA-JP,Expression.30).png として設定すると、このスタイルを使用するすべての [ScrollViewer] オブジェクトのプロパティが同じ値になります。特定のオブジェクトの値を上書きすることもできます。

    詳細については、「スタイルの作成」を参照してください。

[ScrollViewer] コントロール内にアイテムを表示するには、[オブジェクトとタイムライン] でアイテムを選択して、アクティブなコンテナーにし、新しいオブジェクトを描画するか、既存のオブジェクトを [ScrollViewer] コントロールに移動します。

[ScrollViewer] コントロールでデータのコレクション内にあるアイテムを表示する場合は、代わりに [ListBox] コントロールを使用することを検討してください。

詳細については、「データへのオブジェクトのバインド」および「サンプル データの作成」を参照してください。

ScrollViewer テンプレートのパーツ

[ScrollViewer] コントロールは外観を定義するために 「ScrollViewer テンプレート」というテンプレートを 1 つ使用します。このテンプレートの各パーツによって、テンプレートが適用される [ScrollViewer] オブジェクトの外観と動作が決まります。

[ScrollViewer] コントロールの見栄えをよくするために他のオブジェクトをテンプレートに入れることはできますが、次の表にあるパーツは、コントラクトで定義されている動作しか行えません。

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。

Ee341456.6b56bb85-3531-440a-8432-7bb0d1e99d83(JA-JP,Expression.30).png

パーツ名

オブジェクトの種類

説明

ScrollContentPresenter

ScrollContentPresenter

[ScrollViewer] コントロールのコンテンツを表示するオブジェクト。

これは、必須のパーツです。

HorizontalScrollBar

ScrollBar

[ScrollViewer] コントロールの下側にある [ScrollBar] オブジェクト。

VerticalScrollBar

ScrollBar

[ScrollViewer] コントロールの右側にある [ScrollBar] オブジェクト。

ScrollViewer コントロールの状態

既定では [ScrollViewer] コントロールには、状態が定義されていません。独自の状態を作成したり、[ListBox] コントロールなど、テンプレートで [ScrollViewer] コントロールを含むコントロールの状態を使用したりできます。

詳細については、「ユーザー コントロールのビジュアル状態および切り替え時間の定義」および「ListBox コントロールのスタイル処理のヒント」を参照してください。

オブジェクトを [ScrollViewer] コントロールに変換するには

[ScrollViewer] コントロールのテンプレートを変更するには、次のいずれかの操作を行います。

  • アートボードに [ScrollViewer] Ee341456.bf689d92-3c74-4218-815c-e98c930ac189(JA-JP,Expression.30).png を描いてから、既定のテンプレートのコピーを作成します。

    詳細については、「テンプレートの作成または変更」を参照してください。

  • [ScrollViewer] コントロールにするオブジェクトを描くかアートをインポートして、その外観をデザインしてから、[コントロールの作成] コマンドを使用します。

[コントロールの作成] コマンドを使用する場合は、次の手順に従って、ScrollViewer テンプレートに必要なオブジェクトをすべて作成します。

  1. [ScrollViewer] コントロールの外観を定義するすべてのオブジェクトをグループにして、[Grid] コントロールに配置します。

  2. 新しい [Grid] コントロールを選択して、[ツール] メニューの [コントロールの作成] をクリックします。

  3. 表示されたダイアログ ボックスで [ScrollViewer] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。

    保存場所については、「リソースの作成」を参照してください。

  4. [OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、[ScrollViewer] コントロールを構成しているオブジェクトが表示されます。このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。

  5. テンプレート内に作成した [ContentPresenter] オブジェクトを削除します。

  6. テンプレートの [ScrollContentPresenter] に割り当てるオブジェクトを追加するには、[パーツ] パネルの [ScrollContentPresenter] をダブルクリックします。新しい [ScrollContentPresenter] オブジェクトを目的の位置に移動します。

    Ee341456.alert_tip(JA-JP,Expression.30).gifヒント :

    または、[ScrollContentPresenter] オブジェクトを追加し、名前を [ScrollContentPresenter] に変更してから、[ScrollViewer] コントロールに変換することもできます。[コントロールの作成] コマンドでオブジェクトをコントロールに変換すると、名前と種類がテンプレート パーツと同じオブジェクトが自動的にそのパーツに変換されます。使用できるオブジェクトがない場合は、[パーツ] パネルのパーツの横にアイコン Ee341456.64d085f2-3d49-4b74-8070-4d7dae18dc28(JA-JP,Expression.30).png が表示され、使用されていないことが示されます。

    詳細については、「オブジェクトへのテンプレート パーツの割り当て」を参照してください。

  7. テンプレートの HorizontalScrollBar パーツや VerticalScrollBar パーツに使用するアートなどのオブジェクトがある場合は、次の操作を行います。

    1. オブジェクトの各セットをレイアウト パネルにグループ化します。

    2. 新しいレイアウト パネルのうちの 1 つを右クリックし、[ScrollViewer パーツの作成] をポイントし、[HorizontalScrollBar] または [VerticalScrollBar] をクリックします。

      オブジェクトが [ScrollBar] オブジェクトに置き換えられます。[ScrollBar] オブジェクトに適用するスタイルやテンプレートを作成するときに、元のオブジェクトが使われます。

    3. [パーツの作成] ダイアログ ボックスに、作成する ScrollBar スタイルの名前を入力し、スタイルを保存する場所を選択し、[OK] をクリックします。

    4. 新しい [ScrollBar] オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。

      詳細については、「ScrollBar コントロールのスタイル処理のヒント」を参照してください。

    ScrollViewer のテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルの [上へスコープ] Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックするか、アートボードの上端にある階層リンク バーの [HorizontalScrollBar] または [VerticalScrollBar] をクリックします。

  8. 必要に応じて、このテンプレートを使うことになる [ScrollViewer] オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。

    • Visibility   このプロパティを [Visible] プロパティにテンプレート バインドします。

    • Maximum   このプロパティを [Width] プロパティ ([HorizontalScrollBar] オブジェクトの場合) または [Height] プロパティ ([VerticalScrollBar] オブジェクトの場合) にテンプレート バインドします。

    詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

  9. 必要に応じて、テンプレート内のオブジェクトのブラシ プロパティをバインドします。

    • Background

    • BorderBrush

    • BorderThickness

  10. テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの をクリックするか、[オブジェクトとタイムライン] パネルの [上へスコープ] Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

    新しく作成した ScrollViewer テンプレートを別の [ScrollViewer] オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。

参照

Microsoft Silverlight の [ScrollViewer] コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」を参照してください。

関連項目

概念

一般的な Silverlight コントロールのスタイル処理のヒント

テンプレートをサポートするコントロールのスタイル処理

SimpleScrollBar