ScrollBar コントロールのスタイル処理のヒント
.png "Ee341375.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png")
ScrollBar コントロールは、ある範囲の値を示すときに使用します。コントロールの現在の値は、"Thumb" というオブジェクトの位置で示されます。ScrollBar オブジェクトは、他のコントロール (ListBox や ScrollViewer など) をスクロール可能にするために、これらのコントロールのテンプレートでよく使用します。
他のコントロールと同様に、ScrollBar コントロールも既定の外観を変更できます。既定の ScrollBar コントロールは、次のように表示されます。
.png "Ee341375.3a7948bb-14c7-46cd-8098-11ee8579802d(JA-JP,Expression.30).png")
ScrollBar コントロールのプロパティ
ScrollBar コントロールが縦にスクロールするか横にスクロールするかを指定するには、[プロパティ] パネルの [レイアウト] にある [Orientation] プロパティを設定します。ScrollBar コントロールが示す値の範囲は、[プロパティ] パネルの [共通プロパティ] にある [Minimum] プロパティと [Maximum] プロパティで設定します。[Value] プロパティで設定する現在の値は、[Minimum] プロパティと [Maximum] プロパティで設定した最小値と最大値の間でなければなりません。[共通プロパティ] カテゴリには、この他にも [LargeChange] や [SmallChange] などのプロパティがあります。
これらのプロパティを設定するには、次の方法があります。
オブジェクトのプロパティを設定する アートボードに RScrollBar オブジェクトを描いた後で、そのプロパティを直接設定します。複数の ScrollBar オブジェクトで同じ値を使用する場合は、これらのプロパティをスタイルとして設定します。
プロパティをスタイルとして設定する ScrollBar オブジェクトのプロパティをスタイル
.png "Ee341375.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(JA-JP,Expression.30).png")
として設定すると、このスタイルを使用するすべての ScrollBar オブジェクトのプロパティが同じ値になります。特定のオブジェクトの値を上書きすることもできます。詳細については、「スタイルの作成」を参照してください。
ScrollBar コントロールは、どの状態になっているかによって外観が変わります。各状態の外観を変更するには、テンプレート編集モードにして、[状態] パネルで状態を選択します。
詳細については、下の表と「コントロール用ビジュアル状態の定義」を参照してください。
ScrollBar テンプレートのパーツ
ScrollBar コントロールは、"ScrollBar テンプレート" というテンプレートを使用します。このテンプレートの各パーツによって、テンプレートが適用される ScrollBar オブジェクトの外観と動作が決まります。
ScrollBar コントロールの見栄えをよくするために他のオブジェクトをテンプレートに入れることはできますが、次の表にあるパーツは、コントラクトで定義されている動作しか行えません。
テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。
.png "Ee341375.ea64f295-e640-448b-a3ef-c28ae681e977(JA-JP,Expression.30).png")
パーツ名 |
オブジェクトの種類 |
説明 |
|---|---|---|
|
FrameworkElement |
縦 (または横) の ScrollBar コントロールの外観を決めるオブジェクトを含むレイアウト パネル。 これは、必須のパーツです。 |
|
RepeatButton |
ScrollBar オブジェクトがクリックされたときに、その [Value] プロパティの値を減らすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[SmallChange] プロパティで指定した値だけ小さくなります。 |
|
RepeatButton |
ScrollBar オブジェクトがクリックされたときに、その [Value] プロパティの値を減らすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[LargeChange] プロパティで指定した値だけ小さくなります。 これは、必須のパーツです。 .gif "ヒント") ヒント :
RepeatButton オブジェクトには設定できるプロパティがありますが、RepeatButton オブジェクトを構成するオブジェクトを追加、削除、変更する場合は、RepeatButton オブジェクトのテンプレートを開く必要があります。
|
|
Thumb |
バー上で ScrollBar コントロールの現在の値に相当する場所を示すオブジェクト。 これは、必須のパーツです。 ヒント :
Thumb オブジェクトには設定できるプロパティがありますが、Thumb オブジェクトを構成するオブジェクトを追加、削除、変更する場合は、Thumb オブジェクトのテンプレートを開く必要があります。
|
|
RepeatButton |
ScrollBar オブジェクトがクリックされたときに、その [Value] プロパティの値を増やすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[LargeChange] プロパティで指定した値だけ大きくなります。 これは、必須のパーツです。 |
|
RepeatButton |
ScrollBar オブジェクトがクリックされたときに、その [Value] プロパティの値を増やすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[SmallChange] プロパティで指定した値だけ大きくなります。 |
.png "Ee341375.25182a96-9a69-478a-9cfe-5b360e6a9bea(JA-JP,Expression.30).png")
VerticalRoot.png "Ee341375.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(JA-JP,Expression.30).png")
HorizontalRoot.png "Ee341375.f0c1ff71-7814-42ba-806b-7ea92d616e69(JA-JP,Expression.30).png")
VerticalSmallDecrease.png "Ee341375.eb6fad93-f17e-4f62-a926-8c8651862891(JA-JP,Expression.30).png")
HorizontalSmallDecrease.png "Ee341375.a5d608f2-bba2-48c5-8b15-2c115db86acc(JA-JP,Expression.30).png")
VerticalLargeDecrease.png "Ee341375.15de085f-48f5-41dd-a286-e3dcb4cfd18b(JA-JP,Expression.30).png")
HorizontalLargeDecrease.png "Ee341375.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(JA-JP,Expression.30).png")
VerticalThumb.png "Ee341375.1aa736bd-cd0d-4514-a5e4-b495d11d4870(JA-JP,Expression.30).png")
HorizontalThumb.png "Ee341375.272b5149-46f2-4633-ae61-88dfb9c58b7e(JA-JP,Expression.30).png")
VerticalLargeIncrease.png "Ee341375.97fa60b9-0caf-4387-9225-b57510d32209(JA-JP,Expression.30).png")
HorizontalLargeIncrease.png "Ee341375.b5acdd5b-dc01-4fec-a4b7-641b4cb36f50(JA-JP,Expression.30).png")
VerticalSmallIncrease.png "Ee341375.65bdc0a8-bb2a-4ad1-a136-70070743794a(JA-JP,Expression.30).png")
HorizontalSmallIncreaseScrollBar テンプレートの状態
既定では、ScrollBar コントロールは、次の3 つの状態のいずれかになります。これらの状態は、ScrollBar テンプレートを変更するときに、[状態] パネルで見ることができます。
状態名 |
説明 |
|---|---|
Normal |
ScrollBar コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。 |
MouseOver |
ユーザーが ScrollBar コントロールの上にポインターを動かしたときの状態。 |
Disabled |
IsEnabled プロパティを False に設定したときの状態。 |
状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン .png "Ee341375.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(JA-JP,Expression.30).png")
をクリックするか、[状態] パネルで [ベース] を選択します。
オブジェクトを ScrollBar コントロールに変換するには
ScrollBar コントロールのテンプレートを変更するには、次のいずれかの操作を行います。
アートボードに [ScrollBar]
.png "Ee341375.6513a026-499e-4296-8a67-7558b466bd33(JA-JP,Expression.30).png")
を描いてから、既定のテンプレートのコピーを作成します。詳細については、「テンプレートの作成または変更」を参照してください。
ScrollBar コントロールにするオブジェクトを描くかアートをインポートして、その外観をデザインしてから、[コントロールの作成] コマンドを使用します。
[コントロールの作成] コマンドを使用する場合は、次の手順に従って、ScrollBar テンプレートに必要なオブジェクトをすべて作成します。
まず、オブジェクトをグループにまとめてレイアウト パネルに配置します。そのレイアウト パネルを選択し、[ツール] メニューの [コントロールの作成] をクリックします。
表示されたダイアログ ボックスで [ScrollBar] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。
保存場所については、「リソースの作成」を参照してください。
[OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、ScrollBar コントロールを構成しているオブジェクトが表示されます。
ScrollBar コントロールのテンプレートには、縦方向と横方向の ScrollBar オブジェクトで使用するパーツが含まれています。テンプレートのオブジェクトに [パーツ] パネルにあるすべてのパーツを割り当てることも、どちらか一方向の ScrollBar コントロール用のパーツを割り当てることもできます。オブジェクトが 1 セットしかないけれども、両方の向きの ScrollBar コントロールのテンプレートをデザインしたい場合は、オブジェクトを複製してから別の方向のパーツを割り当てます。
ヒント :テンプレートのオブジェクトに、[パーツ] パネルの横方向用のパーツだけを割り当てた場合に、そのテンプレートが適用される ScrollBar オブジェクトが縦向きに設定されていると、アートボードにパーツが表示されなくなります。ScrollBar オブジェクトの方向を変更するには、アートボードの上端にある階層リンク バーの [ScrollBar] をクリックして ScrollBar オブジェクトの編集スコープに戻り、[Orientation] プロパティを [Horizontal] に設定してから、階層リンク バーの 3 番目のボタンをクリックしてテンプレート編集モードに切り替えます。
次の手順に従って、VerticalRoot (または HorizontalRoot) パーツ用のオブジェクトを作成します。
新しい [Grid] レイアウト パネル
.png "Ee341375.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png")
を作成して、5 列 (または 5 行) 追加します。列 (または 行) のサイズ調整方法を、左 (または上) から順に [Auto]、[Auto]、[Auto]、[*]、[Auto] に設定します。.png "Ee341375.b6e16f2c-0ce1-4bc1-919f-e135448a6bd9(JA-JP,Expression.30).png")
詳細については、「行または列の追加と削除」および「行または列のサイズ オプションの変更」を参照してください。
[Grid] オブジェクトを右クリックして [ScrollBar パーツの作成] をポイントし、[VerticalRoot] (または [HorizontalRoot]) をクリックします。
[Thumb] オブジェクトが往復する経路をトラックといいます。トラックは、テンプレートのパーツではないので、必ずしも設定する必要はありません。設定する場合は、トラック用のオブジェクトを [VerticalRoot] (または [HorizontalRoot]) オブジェクトに配置します。たとえば、5 列 (または 5 行) 全部に行き渡るように配置したり、中央の3 列 (または 3 行) だけに配置したりします。
ヒント :1 つのオブジェクトが複数の列 (または行) に行き渡るようにするには、そのオブジェクトを選択し、[プロパティ] パネルで [RowSpan] (または [ColumnSpan]) プロパティを設定します。
Thumb オブジェクト自体で独自のテンプレートを使用できるので、次の手順に従って、Thumb コントロールを構成するすべてのオブジェクトを変換します。
Thumb オブジェクト用のオブジェクトをグループにして、レイアウト パネルに配置します。
このレイアウト パネルを、[VerticalRoot] (または [HorizontalRoot) オブジェクトの中央の行 (または列) に動かします。
ヒント :オブジェクトを特定の列 (または行) に配置するには、そのオブジェクトを選択し、[プロパティ] パネルで [Row] (または [Column]) プロパティを設定します。先頭の行 (または列) の番号は 0 です。
レイアウト パネルを右クリックして [ScrollBar パーツの作成] をポイントし、[VerticalThumb] (または [HorizontalThumb]) をクリックします。
[パーツの作成] ダイアログ ボックスで、テンプレートの保存場所を選択します。
Thumb オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。たとえば、[状態] パネルで、Thumb オブジェクトの状態に応じた外観を設定します。Thumb オブジェクトに余白を付ける場合は、ルート オブジェクトの [Margin] プロパティを設定します。
[オブジェクトとタイムライン] パネルの [Scope Up]
.png "Ee341375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png")
をクリックするか、アートボードの上端にある階層リンク バーの [VerticalThumb] (または [HorizontalThumb) をクリックして、ScrollBar のテンプレート編集モードに戻ります。Thumb オブジェクトの [Width] プロパティと [Height] プロパティを [Auto] に設定し、[MinHeight] (または [MinWidth]) プロパティを 0 より大きな値に設定して、[Margin] プロパティを 0 に設定します。
ユーザーがトラックの端のボタンをクリックすると Thumb オブジェクトが少しずつ動くようにするには、次の手順に従います。
トラックの端のボタンにするオブジェクトをグループにして、レイアウト パネルに配置します。
このレイアウト パネルを、[VerticalRoot] の 1 行目 (または [HorizontalRoot) オブジェクトの 1 列目) に動かします。
レイアウト パネルを右クリックして [ScrollBar パーツの作成] をポイントし、[VerticalSmallDecrease] (または [HorizontalSmallDecrease]) をクリックします。
[パーツの作成] ダイアログ ボックスで、テンプレートの保存場所を選択します。
RepeatButton オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。たとえば、[ContentPresenter] オブジェクトを削除します。RepeatButton オブジェクトに余白を付ける場合は、ルート オブジェクトの [Margin] プロパティを設定します。
[オブジェクトとタイムライン] パネルの [Scope Up]
をクリックするか、アートボードの上端にある階層リンク バーの、[VerticalSmallDecrease] (または [HorizontalSmallDecrease) をクリックして、ScrollBar のテンプレート編集モードに戻ります。[プロパティ] パネルの [レイアウト] にあるプロパティを変更して、[RepeatButton] オブジェクトが目的の場所に表示されるようにします。オブジェクトが重なり合って見えなくなっている場合は、位置と順序を調節します。
詳細については、「オブジェクトの重なり順の変更」を参照してください。
上の手順を [VerticalSmallIncrease] (または [HorizontalSmallIncrease]) オブジェクトで繰り返します。この場合は、オブジェクトを [VerticalRoot] オブジェクトの最後の行 (または [HorizontalRoot] オブジェクトの最後の列) に移動します。
ユーザーが Thumb オブジェクトの上下または左右をクリックすると、Thumb オブジェクトが大きく動くするようにするには、次の手順に従います。
Thumb オブジェクトの両側の各行 (または列) に RepeatButton コントロールを描きます。
ScrollBar オブジェクトの値を減らす RepeatButton オブジェクトを右クリックして [ScrollBar パーツの作成] をポイントし、[VerticalLargeDecrease] (または [HorizontalLargeDecrease]) をクリックします。
ScrollBar オブジェクトの値を増やす RepeatButton オブジェクトを右クリックして [ScrollBar パーツの作成] をポイントし、[VerticalLargeIncrease] (または [HorizontalLargeIncrease]) をクリックします。
RepeatButton オブジェクトを見えなくする場合は、その [Opacity] プロパティを 0 に設定します。
ヒント :上の [VerticalSmallDecrease] (または [HorizontalSmallDecrease]) オブジェクトの場合と同じようにして、既存のオブジェクトを RepeatButton コントロールのテンプレートに変換してもかまいません。変換後の RepeatButton オブジェクトを、必ず Thumb オブジェクトの両側の行 (または列) に配置してください。
このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。
必要に応じて、このテンプレートを使うことになる ScrollBar オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。
Background
BorderBrush
Foreground
BorderThickness
詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。
テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの [ScrollBar] をクリックするか、[オブジェクトとタイムライン] パネルの [Scope Up]
をクリックします。新しく作成した ScrollBar テンプレートを別の ScrollBar オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。
参照
Microsoft Silverlight の ScrollBar コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight のコントロール ギャラリー)」を参照してください。