スライダー コントロールのスタイル処理のヒント

  • [アーティクル]

Ee371160.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(JA-JP,Expression.30).png

[Slider] コントロールは、ある範囲の値を示すときに使用します。コントロールの現在の値は、「Thumb」というオブジェクトの位置で示します。

他のコントロールと同様に、[Slider] コントロールも既定の外観を変更できます。既定の [Slider] コントロールは、次のように表示されます。

Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(JA-JP,Expression.30).png

Slider コントロールのプロパティ

[Slider] コントロールの方向 (縦か横) を指定するには、[プロパティ] パネルの [共通プロパティ] にある [Direction] プロパティを設定します。また、[IsDirectionReversed] プロパティで、数値の方向を反転することができます。値の範囲は、[Minimum] プロパティと [Maximum] プロパティで設定します。[Value] プロパティで設定する現在の値は、[Minimum] プロパティと [Maximum] プロパティで設定した最小値と最大値の間でなければなりません。[共通プロパティ] カテゴリには、この他にも [LargeChange] や [SmallChange] などのプロパティがあります。

これらのプロパティを設定するには、次の方法があります。

  • オブジェクトのプロパティを設定する   アートボードに Slider オブジェクトを描いた後で、そのプロパティを直接設定します。複数の [Slider] コントロールで同じ値を使用する場合は、これらのプロパティをスタイルとして設定します。

  • プロパティをスタイルとして設定する   [Slider] オブジェクトのプロパティをスタイル Ee371160.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(JA-JP,Expression.30).png として設定すると、このスタイルを使用するすべての [Slider] オブジェクトのプロパティが同じ値になります。特定のオブジェクトの値を上書きすることもできます。

    詳細については、「スタイルの作成」を参照してください。

[Slider] コントロールの外観は状態に応じて変化します。各状態の外観を変更するには、テンプレート編集モードにして、[状態] パネルで状態を選択します。

詳細については、下の表と「コントロール用ビジュアル状態の定義」を参照してください。

Slider テンプレートのパーツ

[Slider] コントロールは、「Slider テンプレート」というテンプレートを 1 つ使用します。このテンプレートの各パーツによって、テンプレートが適用される [Slider] オブジェクトの外観と動作が決まります。

[Slider] コントロールの見栄えをよくするために他のオブジェクトをテンプレートに入れることはできますが、次の表にあるパーツは、コントラクトで定義されている動作しか行えません。

テンプレートのパーツを見るには、テンプレートを変更するときに [パーツ] パネルを開きます。

Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(JA-JP,Expression.30).png

パーツ名

オブジェクトの種類

説明

Ee371160.25182a96-9a69-478a-9cfe-5b360e6a9bea(JA-JP,Expression.30).png HorizontalTemplate

Ee371160.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(JA-JP,Expression.30).png VerticalTemplate

FrameworkElement

縦 (または横) の [Slider] コントロールの外観を決めるオブジェクトを含むレイアウト パネル。

これは、必須のパーツです。

Ee371160.f0c1ff71-7814-42ba-806b-7ea92d616e69(JA-JP,Expression.30).png HorizontalTrackLargeChangeDecreaseRepeatButton

Ee371160.eb6fad93-f17e-4f62-a926-8c8651862891(JA-JP,Expression.30).png VerticalTrackLargeChangeDecreaseRepeatButton

RepeatButton

[Slider] オブジェクトがクリックされたときに、その [Value] プロパティの値を減らすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[LargeChange] プロパティで指定した値だけ小さくなります。

Ee371160.a5d608f2-bba2-48c5-8b15-2c115db86acc(JA-JP,Expression.30).png HorizontalThumb

Ee371160.15de085f-48f5-41dd-a286-e3dcb4cfd18b(JA-JP,Expression.30).png VerticalThumb

Thumb

トラック上で [Slider] コントロールの現在の値に相当する場所を示すオブジェクト。

これは、必須のパーツです。

Ee371160.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(JA-JP,Expression.30).png HorizontalTrackLargeChangeIncreaseRepeatButton

Ee371160.1aa736bd-cd0d-4514-a5e4-b495d11d4870(JA-JP,Expression.30).png VerticalTrackLargeChangeIncreaseRepeatButton

RepeatButton

[Slider] オブジェクトがクリックされたときに、その [Value] プロパティの値を増やすオブジェクト。1 回クリックするたびに、[Value] プロパティの値が、[LargeChange] プロパティで指定した値だけ大きくなります。

Slider コントロールの状態

既定では、[Slider] コントロールは、次の表にある CommonStates 状態グループの 4 つの状態のいずれかになります。これらの状態は、Slider テンプレートを変更するときに、[状態] パネルで見ることができます。

状態名

説明

Normal

[Slider] コントロールに対してユーザーが何も行わず、単に表示されているだけの状態。

MouseOver

ユーザーが [Slider] コントロールの上にポインターを動かしたときの状態。

Disabled

[IsEnabled] プロパティを [False] に設定したときの状態。

[Slider] コントロールは、次の FocusStates 状態グループに属する状態のいずれかになることができます。

状態名

説明

Unfocused

[Slider] コントロールがキーボードでフォーカスされていないときの状態。

Focused

[Slider] コントロールがキーボードでフォーカスされたときの状態。たとえば、アプリケーション内でユーザーが Tab キーを押してフォーカスを切り替えていき、[Slider] コントロールにフォーカスが移った場合が相当します。
Ee371160.alert_tip(JA-JP,Expression.30).gifヒント :

状態グループは、コントロールの表示状態を論理的に分類したものです。1 つのグループに属する複数の状態を同時に表示することはできません。たとえば、CommonStates グループには、ユーザーがマウスなどの入力デバイスで行う操作に関係のある状態が含まれています。1 つのグループ内で一度に表示できる状態は 1 つだけですが、別々のグループに属する状態を同時に表示することはできます。

状態を 1 つ選択すると、その状態の変更の記録が開始されます。状態の記録を無効にするには、記録ボタン Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(JA-JP,Expression.30).png をクリックするか、[状態] パネルで [ベース] を選択します。2 つの状態がアクティブになったときのコントロールの外観を変更するには、1 つのグループに属する状態のプレビューを固定しておき、別のグループに属する状態を変更します。

オブジェクトを Slider コントロールに変換するには

[Slider] コントロールのテンプレートを変更するには、次のいずれかの操作を行います。

  • アートボードに [Slider]Ee371160.bf689d92-3c74-4218-815c-e98c930ac189(JA-JP,Expression.30).png を描いてから、既定のテンプレートのコピーを作成します。

    詳細については、「テンプレートの作成または変更」を参照してください。

  • [Slider] コントロールにするオブジェクトを描くかアートをインポートして、その外観をデザインしてから、[コントロールの作成] コマンドを使用します。

[コントロールの作成] コマンドを使用する場合は、次の手順に従って、[Slider] テンプレートに必要なオブジェクトをすべて作成します。

  1. [Slider] コントロールの外観を定義するすべてのオブジェクトをグループにして、[Grid] コントロールに配置します。

  2. 新しい [Grid] コントロールを選択して、[ツール] メニューの [コントロールの作成] をクリックします。

  3. 表示されたダイアログ ボックスで [Slider] を選択してテンプレートに名前を付け、テンプレートの保存場所を選択します。

    保存場所については、「リソースの作成」を参照してください。

  4. [OK] をクリックすると、Microsoft Expression Blend がテンプレート編集モードになり、[Slider] コントロールを構成しているオブジェクトが表示されます。

  5. [Slider] コントロールのテンプレートには、縦方向と横方向の [Slider] オブジェクトで使用するパーツが含まれています。テンプレートのオブジェクトに [パーツ] パネルにあるすべてのパーツを割り当てることも、どちらか一方向の [Slider] コントロール用のパーツを割り当てることもできます。オブジェクトが 1 セットしかないけれども、両方の向きの [Slider] コントロールのテンプレートをデザインしたい場合は、オブジェクトを複製してから別の方向のパーツを割り当てます。

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

    テンプレートのオブジェクトに、[パーツ] パネルの横方向用のパーツだけを割り当てた場合に、そのテンプレートが適用される [Slider] オブジェクトが縦向きに設定されていると、アートボードにパーツが表示されなくなります。[Slider] オブジェクトの方向を変更するには、アートボードの上端にある階層リンク バーの [Slider] をクリックして [Slider] オブジェクトの編集スコープに戻り、[Orientation] プロパティを [Vertical] に設定してから、階層リンク バーの 3 番目のボタンをクリックしてテンプレート編集モードに切り替えます。

  6. 次の手順に従って、HorizontalTemplate (または VerticalTemplate) パーツ用のオブジェクトを作成します。

    1. 新しい [Grid] レイアウト パネル Ee371160.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png を作成して、3 列 (または 3 行) 追加します。列 (または 行) のサイズ調整方法を、左 (または上) から順に [Auto]、[Auto]、[*] に設定します。

      詳細については、「行または列の追加と削除」および「行または列のサイズ オプションの変更」を参照してください。

    2. [Grid] オブジェクトを右クリックして [Slider パーツの作成] をポイントし、[HorizontalTemplate] (または [VerticalTemplate]) をクリックします。

  7. [Thumb] オブジェクトが往復する経路をトラックといいます。トラックは、テンプレートのパーツではないので、必ずしも設定する必要はありません。設定する場合は、トラック用のオブジェクトを [HorizontalTemplate] (または [VerticalTemplate]) オブジェクトの 3 列 (または 3 行) 全部にまたがるように配置します。

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

    1 つのオブジェクトが複数の列 (または行) に行き渡るようにするには、そのオブジェクトを選択し、[プロパティ] パネルで [RowSpan] (または [ColumnSpan]) プロパティを設定します。

  8. [Thumb] オブジェクト自体で独自のテンプレートを使用できるので、次の手順に従って、使用するオブジェクトを [Thumb] コントロールに変換します。

    1. [Thumb] オブジェクト用のオブジェクトをグループにして、レイアウト パネルに配置します。

    2. このレイアウト パネルを、[HorizontalTemplate] (または [VerticalTemplate) オブジェクトの中央の行 (または列) に動かします。

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

      オブジェクトを特定の列 (または行) に配置するには、そのオブジェクトを選択し、[プロパティ] パネルで [Column] (または [Row]) プロパティを設定します。先頭の行 (または列) の番号は 0 です。

    3. レイアウト パネルを右クリックして [Slider パーツの作成] をポイントし、[HorizontalThumb] (または [VerticalThumb]) をクリックします。

    4. [パーツの作成] ダイアログ ボックスで、テンプレートの保存場所を選択します。

    5. Thumb オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。たとえば、[状態] パネルで、[Thumb] オブジェクトの状態に応じた外観を設定します。[Thumb] オブジェクトに余白を付ける場合は、ルート オブジェクトの [Margin] プロパティを設定します。

    6. [オブジェクトとタイムライン] パネルの [上へスコープ] Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックするか、アートボードの上端にある階層リンク バーの [VerticalThumb] (または [HorizontalThumb) をクリックして、[Slider] コントロールのテンプレート編集モードに戻ります。

    7. [Thumb] オブジェクトに合わせて、中央の列 (または行) のサイズが自動的に変更されるように、[Thumb] オブジェクトの [Width] プロパティと [Height] プロパティを設定します。

  9. ユーザーがトラックの端のボタンをクリックすると [Thumb] オブジェクトが少しずつ動くようにするには、次の手順に従います。

    1. トラックの端のボタンにするオブジェクトをグループにして、レイアウト パネルに配置します。

    2. このレイアウト パネルを、[HorizontalTemplate] オブジェクトの 1 列目 (または [VerticalTemplate) オブジェクトの 1 行目) に動かします。

    3. レイアウト パネルを右クリックして [Slider パーツの作成] をポイントし、[HorizontalTrackLargeChangeDecreaseRepeatButton] (または [VerticalTrackLargeChangeDecreaseRepeatButton]) をクリックします。

    4. [パーツの作成] ダイアログ ボックスで、テンプレートの保存場所を選択します。

    5. [RepeatButton] オブジェクトのテンプレート編集モードのまま、必要な変更を加えます。たとえば、[ContentPresenter] オブジェクトを削除します。[RepeatButton] オブジェクトに余白を付ける場合は、ルート オブジェクトの [Margin] プロパティを設定します。

    6. [オブジェクトとタイムライン] パネルの [上へスコープ] Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックするか、アートボードの上端にある階層リンク バーの [HorizontalTrackLargeChangeDecreaseRepeatButton] (または [VerticalTrackLargeChangeDecreaseRepeatButton) をクリックして、[Slider] コントロールのテンプレート編集モードに戻ります。

    7. [プロパティ] パネルの [レイアウト] にあるプロパティを変更して、[RepeatButton] オブジェクトが目的の場所に表示されるようにします。オブジェクトが重なり合って見えなくなっている場合は、位置と順序を調節します。

      詳細については、「オブジェクトの重なり順の変更」を参照してください。

    8. 上の手順を [HorizontalTrackLargeChangeIncreaseRepeatButton] (または [VerticalTrackLargeChangeIncreaseRepeatButton]) オブジェクトで繰り返します。この場合は、オブジェクトを [HorizontalTemplate] オブジェクトの最後の列 (または [VerticalTemplate] オブジェクトの最後の行) に移動します。

  10. このモードで、テンプレートの変更を続けます。たとえば、オブジェクトの追加や変更を行ったり、[状態] パネルで状態を選択して、この状態のテンプレートの外観を変更したりできます。

  11. 必要に応じて、このテンプレートを使うことになる [Slider] オブジェクトの次のプロパティと、オブジェクトのブラシ プロパティをバインドします。

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

  12. テンプレート編集モードを終了するには、アートボードの上端にある階層リンク バーの [Slider] をクリックするか、[オブジェクトとタイムライン] パネルの [上へスコープ]Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png をクリックします。

    新しく作成した Slider テンプレートを別の [Slider] オブジェクトに適用する方法については、「リソースの適用と削除」を参照してください。

参照

Microsoft Silverlight の [Slider] コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー)」を参照してください。

関連項目

タスク

ユーザー入力またはその他の内部値へのオブジェクトのバインド

概念

一般的な Silverlight コントロールのスタイル処理のヒント

SimpleSlider

テンプレートをサポートするコントロールのスタイル処理