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 コントロール テンプレートを使用したカスタム スクロール バーの作成に相当します。
ヒント : |
---|
以下の手順を実行する際に [デザイン] ビューと [コード] ビューの両方の変化を確認するには、[分割ビュー] をクリックします。 |
新しい Microsoft Silverlight プロジェクトを開きます。[コード] ビューで次のコードを見つけ、終了スラッシュ (
/
) を削除します。<Grid x:Name="LayoutRoot" Background="White"/>
次のコードをコピーし、新しいプロジェクトで、手順 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>
貼り付けたコードの後に Grid の終了タグ (
</Grid>
) を追加します。[オブジェクトとタイムライン] パネルで verticalscrollbar を右クリックして、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [ScrollBar]、[OK] の順にクリックします。
[コード] ビューで、前の手順で貼り付けたコードが新しい ScrollBar コントロールのコードで置き換えられたことを確認します (
<Grid x:Name="verticalscrollbar">
で始まるコードを探します)。さらに、Microsoft Expression Blend によって verticalscrollbar が新しい ScrollBar スタイルに変換され、そのテンプレートが verticalscrollbar に適用されていることがわかります (<Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">
を探します)。ヒント : [オブジェクトとタイムライン] パネルで、[UserControl] が [テンプレート] で置き換えられていることを確認します。
verticalscrollbar をテンプレートのルートにするには、[オブジェクトとタイムライン] パネルで verticalscrollbar を右クリックして [ScrollBar パーツの作成] をクリックし、[VerticalRoot] をクリックします。verticalscrollbar の名前が VerticalRoot に変更されていることに注意してください。
行を Root パーツ グリッドに追加するには、[デザイン] ビューでコントロールの左側にある青いルーラーをクリックして、以下の図に示すように行を追加します。
図に示すように行を追加する場合、パーツには正しい行に配置されます。Track の RowSpan は 5 になり、smalldecrease は Row 0 に、thumb は Row 2 に、および smallincrease は Row 4 に配置されます。
メモ : 番号は 0 から始まるので、5 つの行には 0 ~ 4 の番号が付けられます。
次に、テンプレートの一部としてアートワークの要素を定義する必要があります。要素を定義すると、値を特定のプロパティに割り当てることができます。
[オブジェクトとタイムライン] パネルで smalldecrease を右クリックして、[ScrollBar パーツの作成]、 [VerticalSmallDecrease] の順にクリックします。[パーツの作成] ダイアログ ボックスで、[OK] をクリックします。
smalldecrease 要素が、ScrollBar コントロール テンプレートの VerticalSmallDecrease パーツである RepeatButton の型に変換されます。
既定では、パーツに対して ContentPresenter が作成されます。この例では ContentPresenter は使用しないので、[オブジェクトとタイムライン] パネルで [ContentPresenter] を右クリックし、[削除] をクリックして削除できます。
VerticalSmallDecrease パーツのプロパティを設定するには、[オブジェクトとタイムライン] パネルで [smalldecrease] をクリックして、[プロパティ] パネルを開きます。[Layout] カテゴリで [Width] と [Height] を「7」 に設定します。
状態を VerticalSmallDecrease パーツに追加するには、[状態] パネルで [MouseOver] をクリックします。[プロパティ] パネルで [Fill] を「#FFCCCCCC」に設定します。[状態] パネルに戻り、[ベース] をクリックして状態の記録を終了します。
メモ : 状態の記録は、ドキュメント ウィンドウの左上隅にある記録モード インジケーター をクリックして終了することもできます。
[状態] パネルで [Pressed] をクリックします。[プロパティ] パネルで [Fill] を「#FFE5E5E5」****に設定します。[状態] パネルに戻り、[ベース] をクリックします。
[状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。
[オブジェクトとタイムライン] パネルの [Grid] をクリックします。[プロパティ ] パネルの [ブラシ] カテゴリで、[単色ブラシ] をクリックして [アルファ] プロパティを「1」****に設定します。
[オブジェクトとテンプレート] パネルの [スコープを <オブジェクト名> に戻す] をクリックするか、アートボードの最上部にある階層リンク バーで [VerticalSmallDecrease] をクリックして、ScrollBar コントロール [ScrollBarStyle1 (ScrollBar Template)] のテンプレート編集モードに戻ります。
手順 7 ~ 12 を smallincrease 要素に対して繰り返します。
テンプレートの一部として thumb を定義するには、[オブジェクトとタイムライン] パネルで thumb を右クリックし、[ScrollBar パーツの作成]、[Vertical Thumb] の順にクリックします。[パーツの作成] ダイアログ ボックスで、[OK] をクリックします。
VerticalThumb パーツのプロパティを設定するには、[スコープを <オブジェクト名> に戻す] をクリックして、[オブジェクトとタイムライン] パネルで [VerticalThumb] をクリックし、ScrollBar コントロール [ScrollBarStyle1 (ScrollBar Template)] のテンプレート編集モードに戻ります。[プロパティ] パネルの [レイアウト] カテゴリで [Width] および [Height] を「7」に設定します。[Margin] の値を次のように設定します。
[左]: 5
[右]: 5
[上]: 0
[下]: 0
[詳細プロパティ] をクリックして、[MinHeight] を「7」に設定します。Thumb が常に表示されるように、高さの最小値が割り当てられます。
状態を thumb パーツに追加するには、アートボードの最上部にある階層リンク バーの [thumb] をクリックして、Thumb テンプレート [ThumbStyle1(ThumbTemplate)] に戻ります。[状態] パネルで [MouseOver] をクリックします。[プロパティ] パネルで [Fill] を「#FFCCCCCC」に設定します。[状態] パネルに戻り、[ベース] をクリックします。
[状態] パネルで [Pressed] をクリックします。[プロパティ] パネルで [Fill] を「#FFE5E5E5」****に設定します。[状態] パネルに戻り、[ベース] をクリックします。
[状態] パネルで [Normal] をクリックし、[切り替え効果の追加]、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] ボックスに 「.2」 と入力して、[ベース] をクリックします。
[オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す] をクリックして、 [ScrollBarStyle1 (ScrollBar Template)] に戻ります。[オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[パーツ] パネルで [VerticalLargeDecrease] をダブルクリックして、そのパーツを作成し、VerticalRoot の子にします。[プロパティ] パネルで [Row] を「1」に設定し、[Opacity] を「0」****に設定します。
[オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[パーツ] パネルで [VerticalLargeIncrease] をダブルクリックして、そのパーツを作成し、[VerticalRoot] の子にします。[プロパティ] パネルで [Row] を「3」に設定し、[Opacity] を「0」****に設定します。
行 0、1、2、および 4 に対して、[比例サイズ] アイコン を 2 回クリックして、[自動サイズ] アイコン を表示します。行 3 に対して、[比例サイズ] アイコン が表示されていることを確認します。この場合、行の高さは、[自動サイズ]、[自動サイズ]、[自動サイズ]、[比例サイズ]、および [自動サイズ] に設定されます。自動サイズ設定行の各区切り線をクリックして、[プロパティ] パネルの [詳細プロパティの表示] をクリックします。[MinHeight] 値の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。
[オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。[状態] パネルで [Disabled] をクリックします。[プロパティ] パネルで [Opacity] を 50 に設定します。
Ctrl + Shift + B キーを押してプロジェクトをビルドします。ビルドが完了したら、F5 キーを押してプロジェクトを実行し、スクロール バーをテストします。
参照
Silverlight ScrollBar コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー) 」を参照してください。
関連項目
タスク
概念
一般的な Silverlight コントロールのスタイル処理のヒント
SimpleScrollBar
テンプレートを使用するコントロールのスタイルの設定
Copyright ©2011 by Microsoft Corporation. All rights reserved.