試してみよう : SimpleSlider の Thumb 要素のカスタマイズ

  • [アーティクル]

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

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

SimpleSlider の Thumb 要素をカスタマイズするには

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

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

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

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

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

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

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

  3. [オブジェクトとタイムライン] で [Thumb] 要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[コピーの編集] をクリックします。

  4. Thumb テンプレートには既定で、Ellipse を含むグリッドが含まれます。Ellipse 要素を削除します。

  5. [オブジェクトとタイムライン] で [グリッド] 要素をダブルクリックし、子要素を追加できるようにします。

  6. ツールボックスの [ペン] ツール Cc295006.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.10).png を使用して、Grid 要素にパスを描画します。パスを変更するには、[個別選択] ツール Cc295006.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.10).png を使用してパス上の点を調整します。

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

    アートボードでズームインするには、アートボード下部の [ズーム] テキスト ボックス Cc295006.12524287-c48b-4cfc-b614-01951207239d(ja-jp,Expression.10).png を使用するか、Ctrl キーを押したまま、マウスのスクロール ボタンを使用します。
    Cc295006.alert_tip(ja-jp,Expression.10).gifヒント :

    [ペン] ツールを使用してパス要素を描画する代わりに、Microsoft Expression Design 2 からインポートしたアート リソース、またはプロジェクトに追加したイメージ ファイルを使用することもできます。

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

関連項目

概念

SimpleSlider