次の方法で共有

SimpleScrollBar

  • [アーティクル]

This page applies to WPF projects only

スクロール バーは、[Value] プロパティに応じた位置にバーのマーカーを表示するシンプル コントロールです。Microsoft Expression Blend では、[プロパティ] パネルの [レイアウト] にある [Orientation] プロパティを使用して、スクロール バーの方向を設定できます。[プロパティ] パネルの [共通プロパティ] で、スクロール バーの最小値、最大値、および現在の値を設定できます。現在の値は、最小値と最大値の間にする必要があります。

[SimpleScrollBar] コントロールのアートボード ビュー

Cc295211.db3af5e5-8b09-42e7-b541-543b3b2bbcb3(JA-JP,Expression.30).png

コントロール テンプレートの構成要素

SimpleScrollBar コントロール テンプレートには、次のアイテムが含まれます。

  • GridRoot という名前の Grid パネル : スクロール バー内に複数の子オブジェクトを保持するために使用します。また、[Grid] パネルを使用すると、テンプレートに複数の要素を簡単に追加できるので便利です。グリッドは 3 行で構成され、上の行と下の行は最大サイズが設定され、18 ピクセル以上に拡張できません (ピクセルとは、デバイスに依存しない単位であり、約 1/96 インチです)。中央の行のサイズはアスタリスク (*) で表され、ウィンドウに合わせて拡張されます。

  • DecreaseRepeat および IncreaseRepeat という名前の 2 つの RepeatButton オブジェクト : バー上のマーカーの位置を移動するために使用します。[RepeatButton] オブジェクトには、矢印を表示するコンテンツが含まれます。グリッドがそれぞれのルートとして使用されるので、[Path] オブジェクト ([DecreaseArrow] および [IncreaseArrow]) の編集と、他のコンテンツの追加を簡単に行えます。

  • PART_Track という名前の Track オブジェクト : バーに沿って [Thumb] オブジェクトを表示するために使用します。バーに表示されるパーツは、[PageDown] および [PageUp] という 2 つの [RepeatButton] として機能します。どちらも、個別に編集可能な SimpleScrollRepeatButtonStyle テンプレートを使用します。[Track] の IncreaseRepeatButton および DecreaseRepeatButton セクションでは、Command バインドを使用してスクロール バー クラスのコマンドを呼び出すことができます。[Thumb] オブジェクトは、個別に編集可能な SimpleThumbStyle テンプレートを使用します。

  • レイアウト変換 : スライダー バーを水平方向に表示するために使用します。この方法は、2 つの異なるテンプレートを編集する場合より、スタイルの編集が簡単です。ただし、2 つの方向のデザインを区別する必要がある場合は、個別のテンプレートが必要になります。この場合は、Expression Blend の [XAML] ビューの [Style] 要素で [Setter] 要素を使用し、方向に基づいてテンプレートを切り替えます。この例については、システム [ScrollBar] コントロールの既定のテンプレートを参照してください。

    Cc295211.alert_caution(JA-JP,Expression.30).gif注意 :

    名前が "PART_" で開始するオブジェクトは、コントロールを実装するコードから参照されるので、名前を変更しないでください。

    オブジェクト ビュー : [SimpleScrollBar] コントロールの基本パーツ (テンプレート)

    Cc295211.24716500-e135-474f-80cf-7091061569da(JA-JP,Expression.30).png

使用されるプロパティ トリガー

コントロール テンプレートのプロパティ トリガーは、プロパティの変更にコントロールを対応させるために使用されます。[トリガー] パネルのアイテムをクリックすると、トリガーがアクティブになると変更されるプロパティを表示できます。たとえば、SimpleScrollBar テンプレートでは、[Orientation] プロパティが "水平方向" のときは、複数のプロパティが進行状況バーの新しい方向に合わせて変更されます。

使用されるブラシ

SimpleScrollBar テンプレートは、[Foreground] プロパティ用にシステム ブラシ リソースを 1 つだけ使用します。他のブラシ リソースは、SimpleRepeatButton、SimpleThumbStyle、SimpleScrollRepeatButtonStyle テンプレートなど、[SimpleScrollBar] が使用するテンプレートで参照されます。[SimpleScrollBar] の外観を変更するには、これらのテンプレートで使用されるブラシを変更するか、新しくテンプレートを作成します。

ベスト プラクティスおよびデザイン ガイドライン

  • 一般に、コントロールに視覚要素を追加する予定がある場合は、テンプレートのルートとして [Grid] コントロールを使用してください。Expression Blend は、[Grid] コントロールなどのレイアウト パネルを見つけて既定でアクティブにします。これにより、アートボードに追加される新しいオブジェクトがレイアウト パネルの子オブジェクトになります。

  • SimpleScrollBar テンプレート は、ScrollViewer 用のテンプレートで使用されるスクロール バーに適用することができます。

  • SimpleScrollBar テンプレートでは他のテンプレートを使用するため、変更対象のテンプレートを見つけるまでに、さまざまなレベルのテンプレートを確認することが不便な場合があります。直接テンプレートを編集するには、[リソース] パネルのテンプレート名の横の [リソースの編集] ボタンをクリックします。スタイルの編集モードで、[オブジェクトとタイムライン] パネルの [Style] オブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。または、サブテンプレートへの参照を削除 ([プロパティ] パネルの [その他] にある [Style] プロパティをリセット) して、1 つのテンプレートですべてをデザインすることもできます。

  • コントロールを動作させるには、コントロールのクラスのコマンドを実行するコマンド バインドを保持し、コントロールとこれを表すクラスをバインドするための別の手段を備えておく必要があります。このようなバインドは、[IncreaseRepeat]、[DecreaseRepeat]、[PageUp]、および [PageDown] オブジェクトの [Command] プロパティとトリガー (Orientation=Horizontal) にあります。

  • 必要に応じて、SimpleScrollBar テンプレートにトリガーを追加するか、PART_Track オブジェクト内のオブジェクトを変更して、バーの外観を工夫します。この場合は、PART_Track オブジェクトの名前を変更しないでください。これらのオブジェクトは、コントロールを実装するコードから参照されているためです。PART_Track オブジェクトのパーツは、[Track.IncreaseRepeatButton]、[Track.DecreaseRepeatButton]、[Track.Thumb] などの特定のコントロール ヘッダーの下に配置されているので、PART_Track オブジェクトはこれらのパーツを見つけることができます。[Thumb] も、ドラッグ可能な Windows Presentation Foundation (WPF) コントロールです。

関連項目

タスク

試してみよう : SimpleScrollBar の外観のカスタマイズ