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

This page applies to WPF projects only

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    アートボードにズーム インするには、アートボードの下端にある [ズーム] テキスト ボックス Cc295006.12524287-c48b-4cfc-b614-01951207239d(JA-JP,Expression.30).png を使用するか、Ctrl キーを押しながらマウスのスクロール ボタンを回します。

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

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

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

関連項目

概念

SimpleSlider