ScrollBar コントロールのスタイル設定のヒント

組み込みの ScrollBar コントロール テンプレートを使用して、カスタム ScrollBar テンプレートを作成できます。既定の ScrollBar コントロール テンプレートは、次のように表示されます。

ScrollBar テンプレートのパーツ

ScrollBar テンプレートには、2 つのパーツ セット (垂直方向のスクロール バー用のセットと水平方向のスクロール バー用のセット) が含まれます。パーツ名には、スクロール バーの方向に応じて、"vertical" または "horizontal" という語が接頭辞として付けられます。

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

パーツ名	オブジェクトの種類
VerticalRoot  HorizontalRoot	FrameworkElement
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton
VerticalThumb  HorizontalThumb	Thumb
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton

スクロール バーのヒント

ルート パーツ

これは、必須のパーツです。Root パーツには、特定の方向で ScrollBar を形成するすべての要素が含まれています。

Root を作成するには、サイズが [自動サイズ]、[自動サイズ]、[自動サイズ]、[比例サイズ]、[自動サイズ] の 5 つの列 (水平方向の場合) または行 (垂直方向の場合) を含む、HorizontalRoot または VerticalRoot という名前のグリッドを作成します。

Thumb パーツ

これは、必須のパーツです。Thumb はスクロール バーの移動可能な要素です。

Thumb を表す 1 つまたは複数のオブジェクトを Thumb コントロール (HorizontalThumb または VerticalThumb) にするには、Thumb パーツを Root パーツの中央の列または行に配置し、列 (または行) のサイズが Thumb に合わせて変更されるように Thumb パーツの Width プロパティおよび Height プロパティを設定します。

Margin プロパティを Thumb に対して設定しないでください。同じ効果を得るには、Thumb テンプレートのルート オブジェクトの余白を設定します。

トラック

Thumb が往復する経路をトラックといいます。トラックは、パーツではないので、必ずしも設定する必要はありません。

トラックを含めるには、トラックを表す 1 つまたは複数のオブジェクトを Root パーツの 5 つの列 (または行) すべてに行き渡るように配置するか、中央の 3 つの列 (または行) に行き渡るように配置します。

1 つのオブジェクトが複数の列 (または行) に行き渡るようにするには、そのオブジェクトを選択し、[プロパティ] パネルで [ColumnSpan] プロパティまたは [RowSpan] プロパティを設定します。

トラックに沿って Thumb を大きく動かす

ユーザーが Thumb のいずれかの側をクリックすると Thumb が大きく動くようにするには、RepeatButton コントロールを Thumb パーツのいずれかの側の 2 つの列 (または行) に配置して、VerticalLargeDecrease と VerticalLargeIncrease (または HorizontalLargeDecrease と HorizontalLargeIncrease) という名前を付けます。RepeatButtons が非表示で機能するように、Opacity を 0 に設定します。または、Opacity が 0 の単一のオブジェクトを含むテンプレートを RepeatButton コントロールに適用することもできます。

トラックに沿って Thumb を小さく動かす

ユーザーがトラックのいずれかの側のボタンをクリックすると Thumb が小さく動くようにするには、これらのボタンを表すオブジェクトを RepeatButton コントロールにして、VerticalSmallDecrease と VerticalSmallIncrease (または HorizontalSmallDecrease と HorizontalSmallIncrease) という名前を付けます。これらのオブジェクトを最後の 2 つの列 (または行) に配置します。

ScrollBar テンプレートの状態

ScrollBar コントロール テンプレートで状態を使用することもできます。既定では、ScrollBar コントロールは、CommonStates 状態グループにある次の 3 つの状態の 1 つになります。

状態名	説明
Normal	ScrollBar コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。
MouseOver	ユーザーが ScrollBar コントロールの上にポインターを動かしたときの状態。
Disabled	IsEnabled プロパティが False に設定されているときの ScrollBar コントロールの状態。

ヒント :
使用可能な状態を表示するには、ScrollBar テンプレートを変更するときに [状態] パネルを開きます。

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録モード インジケーター  をクリックするか、[状態] パネルで [ベース] を選択します。

詳細については、「コントロール用ビジュアル状態の定義」を参照してください。

テンプレートのバインド

Background、BorderBrush、Foreground、BorderThickness、および Padding プロパティは、テンプレートにバインドすることができます。詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

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

次の図は、VerticalThumb、VerticalSmallDecrease、および VerticalSmallIncrease パーツの MouseOver 状態と Pressed 状態を含むスクロール バーのデザイン見本図（カンプ）です。

Normal

MouseOver

Pressed

Disabled

この例では、次の手順 1 で XAML コードを使用します。これは、上の図の ScrollBar コントロール テンプレートを使用したカスタム スクロール バーの作成に相当します。

ヒント :
以下の手順を実行する際に [デザイン] ビューと [コード] ビューの両方の変化を確認するには、[分割ビュー] をクリックします。

1. 新しい Microsoft Silverlight プロジェクトを開きます。[コード] ビューで次のコードを見つけ、終了スラッシュ (/) を削除します。

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. 貼り付けたコードの後に Grid の終了タグ (</Grid>) を追加します。

4. [オブジェクトとタイムライン] パネルで verticalscrollbar を右クリックして、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [ScrollBar]、[OK] の順にクリックします。

   [コード] ビューで、前の手順で貼り付けたコードが新しい ScrollBar コントロールのコードで置き換えられたことを確認します (<Grid x:Name="verticalscrollbar"> で始まるコードを探します)。さらに、Microsoft Expression Blend によって verticalscrollbar が新しい ScrollBar スタイルに変換され、そのテンプレートが verticalscrollbar に適用されていることがわかります (<Style x:Key="ScrollBarStyle1" TargetType="ScrollBar"> を探します)。

   ヒント :
   [オブジェクトとタイムライン] パネルで、[UserControl] が [テンプレート] で置き換えられていることを確認します。

5. verticalscrollbar をテンプレートのルートにするには、[オブジェクトとタイムライン] パネルで verticalscrollbar を右クリックして [ScrollBar パーツの作成] をクリックし、[VerticalRoot] をクリックします。verticalscrollbar の名前が VerticalRoot に変更されていることに注意してください。

6. 行を Root パーツ グリッドに追加するには、[デザイン] ビューでコントロールの左側にある青いルーラーをクリックして、以下の図に示すように行を追加します。

   

   図に示すように行を追加する場合、パーツには正しい行に配置されます。Track の RowSpan は 5 になり、smalldecrease は Row 0 に、thumb は Row 2 に、および smallincrease は Row 4 に配置されます。

   メモ :
   番号は 0 から始まるので、5 つの行には 0 ～ 4 の番号が付けられます。

   次に、テンプレートの一部としてアートワークの要素を定義する必要があります。要素を定義すると、値を特定のプロパティに割り当てることができます。

7. [オブジェクトとタイムライン] パネルで smalldecrease を右クリックして、[ScrollBar パーツの作成]、 [VerticalSmallDecrease] の順にクリックします。[パーツの作成] ダイアログ ボックスで、[OK] をクリックします。

   smalldecrease 要素が、ScrollBar コントロール テンプレートの VerticalSmallDecrease パーツである RepeatButton の型に変換されます。

8. 既定では、パーツに対して ContentPresenter が作成されます。この例では ContentPresenter は使用しないので、[オブジェクトとタイムライン] パネルで [ContentPresenter] を右クリックし、[削除] をクリックして削除できます。

9. VerticalSmallDecrease パーツのプロパティを設定するには、[オブジェクトとタイムライン] パネルで [smalldecrease] をクリックして、[プロパティ] パネルを開きます。[Layout] カテゴリで [Width] と [Height] を「7」 に設定します。

10. 状態を VerticalSmallDecrease パーツに追加するには、[状態] パネルで [MouseOver] をクリックします。[プロパティ] パネルで [Fill] を「#FFCCCCCC」に設定します。[状態] パネルに戻り、[ベース] をクリックして状態の記録を終了します。

    メモ :
    状態の記録は、ドキュメント ウィンドウの左上隅にある記録モード インジケーター  をクリックして終了することもできます。

    [状態] パネルで [Pressed] をクリックします。[プロパティ] パネルで [Fill] を「#FFE5E5E5」****に設定します。[状態] パネルに戻り、[ベース] をクリックします。

    [状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。

11. [オブジェクトとタイムライン] パネルの [Grid] をクリックします。[プロパティ ] パネルの [ブラシ] カテゴリで、[単色ブラシ]  をクリックして [アルファ] プロパティを「1」****に設定します。

12. [オブジェクトとテンプレート] パネルの [スコープを <オブジェクト名> に戻す]  をクリックするか、アートボードの最上部にある階層リンク バーで [VerticalSmallDecrease] をクリックして、ScrollBar コントロール [ScrollBarStyle1 (ScrollBar Template)] のテンプレート編集モードに戻ります。

    手順 7 ～ 12 を smallincrease 要素に対して繰り返します。

13. テンプレートの一部として thumb を定義するには、[オブジェクトとタイムライン] パネルで thumb を右クリックし、[ScrollBar パーツの作成]、[Vertical Thumb] の順にクリックします。[パーツの作成] ダイアログ ボックスで、[OK] をクリックします。

14. VerticalThumb パーツのプロパティを設定するには、[スコープを <オブジェクト名> に戻す]  をクリックして、[オブジェクトとタイムライン] パネルで [VerticalThumb] をクリックし、ScrollBar コントロール [ScrollBarStyle1 (ScrollBar Template)] のテンプレート編集モードに戻ります。[プロパティ] パネルの [レイアウト] カテゴリで [Width] および [Height] を「7」に設定します。[Margin] の値を次のように設定します。

    • [左]: 5

    • [右]: 5

    • [上]: 0

    • [下]: 0

    [詳細プロパティ] をクリックして、[MinHeight] を「7」に設定します。Thumb が常に表示されるように、高さの最小値が割り当てられます。

15. 状態を thumb パーツに追加するには、アートボードの最上部にある階層リンク バーの [thumb] をクリックして、Thumb テンプレート [ThumbStyle1(ThumbTemplate)] に戻ります。[状態] パネルで [MouseOver] をクリックします。[プロパティ] パネルで [Fill] を「#FFCCCCCC」に設定します。[状態] パネルに戻り、[ベース] をクリックします。

    [状態] パネルで [Pressed] をクリックします。[プロパティ] パネルで [Fill] を「#FFE5E5E5」****に設定します。[状態] パネルに戻り、[ベース] をクリックします。

    [状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。

16. [オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す]  をクリックして、 [ScrollBarStyle1 (ScrollBar Template)] に戻ります。[オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[パーツ] パネルで [VerticalLargeDecrease] をダブルクリックして、そのパーツを作成し、VerticalRoot の子にします。[プロパティ] パネルで [Row] を「1」に設定し、[Opacity] を「0」****に設定します。

17. [オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[パーツ] パネルで [VerticalLargeIncrease] をダブルクリックして、そのパーツを作成し、[VerticalRoot] の子にします。[プロパティ] パネルで [Row] を「3」に設定し、[Opacity] を「0」****に設定します。

18. 行 0、1、2、および 4 に対して、[比例サイズ] アイコン を 2 回クリックして、[自動サイズ] アイコン を表示します。行 3 に対して、[比例サイズ] アイコン が表示されていることを確認します。この場合、行の高さは、[自動サイズ]、[自動サイズ]、[自動サイズ]、[比例サイズ]、および [自動サイズ] に設定されます。自動サイズ設定行の各区切り線をクリックして、[プロパティ] パネルの [詳細プロパティの表示] をクリックします。[MinHeight] 値の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。

    

19. [オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[状態] パネルで [Disabled] をクリックします。[プロパティ] パネルで [Opacity] を 50 に設定します。

20. Ctrl + Shift + B キーを押してプロジェクトをビルドします。ビルドが完了したら、F5 キーを押してプロジェクトを実行し、スクロール バーをテストします。

参照

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

関連項目

タスク

ユーザー入力またはその他の内部値へのオブジェクトのバインド

概念

一般的な Silverlight コントロールのスタイル処理のヒント
SimpleScrollBar
テンプレートを使用するコントロールのスタイルの設定

Copyright ©2011 by Microsoft Corporation. All rights reserved.