SimpleScrollBar

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

アートボード上の SimpleScrollBar コントロール

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

SimpleScrollBar コントロール テンプレートは、次の要素で構成されています。

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

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

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

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

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

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

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

使用されるブラシ

SimpleScrollBar テンプレートは、Foreground プロパティ用にシステム ブラシ リソースを 1 つだけ使用します。その他のブラシ リソースは、SimpleScrollBar が使用する SimpleRepeatButton、SimpleThumbStyle、SimpleScrollRepeatButtonStyle などのテンプレート内で参照されます。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) 専用のコントロールの 1 つです。

関連項目

タスク

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.