次の方法で共有

Blend での Silverlight コントロールの ScrollBar コントロールのスタイル処理のヒント

  • [アーティクル]

JJ170487.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,VS.120).png

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

JJ170487.3a7948bb-14c7-46cd-8098-11ee8579802d(ja-jp,VS.120).png

ScrollBar テンプレートのパーツ

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

ヒント

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

JJ170487.ea64f295-e640-448b-a3ef-c28ae681e977(ja-jp,VS.120).png

パーツ名

オブジェクトの種類

JJ170487.B1_1(ja-jp,VS.120).png VerticalRoot

JJ170487.B1_2(ja-jp,VS.120).png HorizontalRoot

FrameworkElement

JJ170487.B1_3(ja-jp,VS.120).png VerticalSmallDecrease

JJ170487.B1_4(ja-jp,VS.120).png HorizontalSmallDecrease

RepeatButton

JJ170487.B1_5(ja-jp,VS.120).png VerticalLargeDecrease

JJ170487.B1_6(ja-jp,VS.120).png HorizontalLargeDecrease

RepeatButton

JJ170487.B1_7(ja-jp,VS.120).png VerticalThumb

JJ170487.B1_8(ja-jp,VS.120).png HorizontalThumb

Thumb

JJ170487.B1_9(ja-jp,VS.120).png VerticalLargeIncrease

JJ170487.97fa60b9-0caf-4387-9225-b57510d32209(ja-jp,VS.120).png HorizontalLargeIncrease

RepeatButton

JJ170487.B1_11(ja-jp,VS.120).png VerticalSmallIncrease

JJ170487.B1_12(ja-jp,VS.120).png HorizontalSmallIncrease

RepeatButton

スクロール バーのヒント

JJ170487.collapse_all(ja-jp,VS.120).gifルート パーツ

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

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

JJ170487.b6e16f2c-0ce1-4bc1-919f-e135448a6bd9(ja-jp,VS.120).png

JJ170487.collapse_all(ja-jp,VS.120).gifThumb パーツ

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

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

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

JJ170487.collapse_all(ja-jp,VS.120).gifトラック

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

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

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

JJ170487.collapse_all(ja-jp,VS.120).gifトラックに沿って Thumb を大きく動かす

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

JJ170487.collapse_all(ja-jp,VS.120).gifトラックに沿って Thumb を小さく動かす

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

ScrollBar テンプレートの状態

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

状態名

説明

Normal

ScrollBar コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。

MouseOver

ユーザーが ScrollBar コントロールの上にポインターを動かしたときの状態。

Disabled

IsEnabled プロパティが False に設定されたときの ScrollBar コントロールの状態。

ヒント

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

状態を 1 つ選択すると、その状態の変更の記録が開始されます。 状態の記録を無効にするには、記録モード インジケーター JJ170487.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,VS.120).png をクリックするか、[状態] パネルで [ベース] を選択します。

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

テンプレートのバインド

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

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

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

Normal

Normal 状態の ScrollBar

MouseOver

MouseOver 状態の ScrollBar

Pressed

Pressed 状態の ScrollBar

Disabled

Disabled 状態の ScrollBar

この例では、次の手順 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"> で始まるコードを探します)。 さらに、Blend for Visual Studio によって 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. 既定では、Blend により、パーツに対して ContentPresenter が作成されます。 この例では ContentPresenter は使用しないので、[オブジェクトとタイムライン] パネルで [ContentPresenter] を右クリックし、[削除] をクリックして削除できます。

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

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

    注意

    状態の記録は、ドキュメント ウィンドウの左上隅にある記録モード インジケーター JJ170487.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,VS.120).png をクリックして終了することもできます。

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

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

  11. [オブジェクトとタイムライン] パネルの [Grid] をクリックします。 [プロパティ] パネルの [ブラシ] カテゴリで、[単色ブラシ] JJ170487.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,VS.120).png をクリックして [アルファ] プロパティを「1」に設定します。

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

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

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

  14. VerticalThumb パーツのプロパティを設定するには、[スコープを <オブジェクト名> に戻す] JJ170487.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックして、[オブジェクトとタイムライン] パネルで [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. [オブジェクトとタイムライン] パネルの [スコープを <オブジェクト名> に戻す] JJ170487.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,VS.120).png をクリックして、[ScrollBarStyle1 (ScrollBar Template)] に戻ります。 [オブジェクトとタイムライン] パネルで、[VerticalRoot] をクリックします。 [パーツ] パネルで [VerticalLargeDecrease] をダブルクリックして、そのパーツを作成し、VerticalRoot の子にします。 [プロパティ] パネルで [Row] を「1」に設定し、[Opacity] を「0」に設定します。

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

  18. 行 0、1、2、および 4 に対して、[比例サイズ] アイコン JJ170487.1b4edaf6-b6a8-4498-80dc-949375fa610d(ja-jp,VS.120).png を 2 回クリックして、[自動サイズ] アイコン JJ170487.aa9ec064-22f8-4b62-9eed-3f4772362d22(ja-jp,VS.120).png を表示します。 行 3 に対して、[比例サイズ] アイコン が表示されていることを確認します。 この場合、行の高さは、[自動サイズ]、[自動サイズ]、[自動サイズ]、[比例サイズ]、および [自動サイズ] に設定されます。 自動サイズ設定行の各区切り線をクリックして、[プロパティ] パネルの [詳細プロパティの表示] をクリックします。 [MinHeight] 値の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。

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

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

参照

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

参照

処理手順

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

概念

Blend での一般的な Silverlight コントロールのスタイル処理のヒント

SimpleScrollBar (Blend での WPF サポート)