次の方法で共有

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

  • [アーティクル]

This page applies to WPF projects only

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

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

  1. Expression Blend で、アートボードに SimpleScrollBar オブジェクトを描画します。

    Cc294792.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

    Cc294792.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

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

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

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

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

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

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

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

    • メイン ドキュメントを編集している場合は、[上へスコープ] Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

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

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

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

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

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

関連項目

概念

SimpleScrollBar