次の方法で共有

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

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

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

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

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

    Cc294792.alert_tip(ja-jp,Expression.10).gifヒント :

    簡易スタイルを使用するには、アセット ライブラリ Cc294792.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [コントロール] タブで [簡易スタイル] をクリックします。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

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

    Cc294792.alert_tip(ja-jp,Expression.10).gifヒント :

    テンプレートの編集モードを終了し、ドキュメントのスコープに戻るには、[上へスコープ] ボタン Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png をクリックします。このボタンは、[組み合わせ] パネルの要素ツリーの上にあります。

    既存テンプレートのテンプレート編集モードに戻るには、[オブジェクトとタイムライン] でテンプレートを編集する要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

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

  4. [オブジェクトとタイムライン] で [IncreaseArrow] パス要素をクリックし、[Stroke] プロパティおよび [Fill] プロパティを白の [単色ブラシ] Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(ja-jp,Expression.10).png に設定します。[Stroke] プロパティについては、最初に [詳細プロパティ オプション] ボタン Cc294792.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(ja-jp,Expression.10).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.10).png ボタンをクリックします。

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

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

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

  8. DecreaseRepeat 要素に対して前の手順を繰り返します。

  9. [オブジェクトとタイムライン] で [GridRoot] 要素をダブルクリックしてアクティブにし、ツールボックスの [Border] コントロールをクリックして、GridRoot の内部に Border を描画します。[オブジェクトとタイムライン] で新しい Border 要素を右クリックして [自動サイズ設定] をポイントし、[ページ幅に合わせる] をクリックして、自動サイズ変更します。

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

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

  12. アプリケーションを実行して (F5)、効果を確認してください。

関連項目

概念

SimpleScrollBar