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

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

SimpleScrollBar コントロール テンプレートを使用すると、Microsoft Expression Blend でスクロール バーの外観を簡単にカスタマイズできます。

SimpleScrollBar スタイルの外観をカスタマイズするには

  1. Expression Blend で、アートボード上に SimpleScrollBar を描画します。

    tip noteヒント :

    Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。

  2. [オブジェクトとタイムライン] パネルのスクロール バーを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。

    コピーの作成の詳細については、「リソースの作成」を参照してください。

    tip noteヒント :

    テンプレートの編集モードを終了して、ドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [スコープを <オブジェクト名> に戻す] Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。

    既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

  3. [オブジェクトとタイムライン] で IncreaseRepeat オブジェクトをクリックし、[プロパティ] パネルの [ブラシ] で、Background プロパティおよび BorderBrush プロパティの Alpha 属性 (カラー パレットの右側に "A" と表示) を 0% に設定します。

  4. [オブジェクトとタイムライン] パネルで IncreaseArrow パス オブジェクトをクリックし、Stroke プロパティおよび Fill プロパティを白の [単色ブラシ] Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.40).png に設定します。Stroke プロパティを設定するときは、まず [詳細オプション] Cc294792.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png をクリックしてから [リセット] をクリックし、バインドを解除する必要があります。

  5. [オブジェクトとタイムライン] パネルで IncreaseRepeat オブジェクトを右クリックし、[テンプレートの編集] をポイントして、次のいずれかの操作を行います。

    • 手順 2 で [現在のテンプレートの編集] を選択した場合は、ここでも [現在のテンプレートの編集] をクリックし、SimpleStyles.xaml に保管されている SimpleRepeatButton コントロール テンプレートを編集します。

    • 手順 2 で [コピーして編集] を選択した場合は、ここでも [コピーして編集] をクリックして SimpleRepeatButton コントロール テンプレートのコピーを作成し、それを SimpleScrollBar スタイルのテンプレートと同じ場所に保存します。

  6. SimpleRepeatButton の編集スコープの [トリガー] で IsMouseOver = True および IsPressed = True というイベント トリガーを削除します。このためには、各トリガーを選択し、[トリガーの削除] Cc294792.d31907a6-867b-4e16-b860-f07c9531fbd7(ja-jp,Expression.40).png をクリックします。

  7. 次のいずれかの方法で、SimpleScrollBar テンプレートの編集スコープに戻ります。

    • 手順 5 で [テンプレートの編集] を選択したために SimpleStyles.xaml ドキュメントを編集している場合は、アートボードの上部にあるメイン ドキュメントのタブ (Window1.xaml タブなど) をクリックします。ScrollBar オブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックし、前に編集していた ScrollBar テンプレートに戻ります。

    • メイン ドキュメントを編集している場合は、[スコープを <オブジェクト名> に戻す] Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。

  8. DecreaseRepeat オブジェクトで、前の手順を繰り返します。

  9. [オブジェクトとタイムライン] で GridRoot オブジェクトをクリックしてアクティブ化します。[ツール] パネルの Border コントロールをクリックして、GridRoot オブジェクトの内部に Border オブジェクトを描画します。[オブジェクトとタイムライン] パネルで新しい Border オブジェクトを右クリックして [自動サイズ設定] をポイントし、[ページ幅に合わせる] をクリックして、オブジェクトのサイズが自動的に調整されるようにします。

  10. [オブジェクトとタイムライン] パネルで新しい Border オブジェクトを選択した状態で、[プロパティ] パネルの [外観] にある CornerRadius プロパティを 4,4,4,4 に変更します。これにより、罫線の角が丸められます。

  11. [オブジェクトとタイムライン] パネルの [Thumb] オブジェクトを右クリックし、[テンプレートの編集] をポイントして [コピーして編集] をクリックします。SimpleThumbStyle スタイルの編集スコープで、Rectangle オブジェクトをクリックし、Fill プロパティを濃い灰色の [単色ブラシ] Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.40).png に変更して、Margin プロパティを左右とも 2 に設定します。

  12. F5 キーを押してアプリケーションをテストし、変更結果を確認します。

関連項目

概念

SimpleScrollBar

Copyright ©2011 by Microsoft Corporation. All rights reserved.