SimpleSlider

  • [アーティクル]

This page applies to WPF projects only

スライダーは、[Thumb] コントロールを移動することにより、さまざまな値から選択できるようにするためのシンプル コントロールです。既定では、スライダーは水平方向に表示されますが、Microsoft Expression Blend の [プロパティ] パネルの [共通プロパティ] にある [Orientation] プロパティを設定することによって、垂直方向に表示することができます。スライダーの値を設定するには、[Minimum]、[Maximum]、および [Value] プロパティを使用します。

[SimpleSlider] コントロールのアートボード ビュー

Cc295377.50295968-6423-4517-9479-ed886201b731(JA-JP,Expression.30).png

コントロール テンプレートの構成要素

SimpleSlider コントロール テンプレートには、次のアイテムが含まれます。

  • GridRoot という名前の Grid パネル : スライダー内に複数の子要素を保持するために使用します。また、[Grid] パネルを使用すると、テンプレートに複数の要素を簡単に追加できるので便利です。[GridRoot] は 3 行から構成され、上の行には TopTick 要素、中央の行には [Thumb] 要素、下の行には [BottomTick] 要素が保持されます。

  • TopTick および BottomTick という名前の TickBar 要素 SimpleSlider : スライダーに目盛を表示するために使用します。それぞれの [Visibility] プロパティは、既定で [Collapsed] に設定されます。[TickBar] 要素は、このテンプレートが適用されるスライダー コントロールに設定されたプロパティに基づいて、表示する目盛の数を決定します。[TickBar] 要素には、編集可能なテンプレートは用意されていませんが、スライダー コントロールの [Foreground] プロパティを設定することによって、目盛の表示に使用するブラシを設定できます (この [TickBar] は、スライダー コントロールの [Foreground] プロパティにテンプレート バインドされます)。

  • Border 要素 : [BorderThickness] プロパティが含まれています。このプロパティは、このテンプレートの適用先ボタン コントロールの [BorderThickness] プロパティにテンプレート バインドできます。

  • PART_Track という名前の Track 要素 : バーに沿って [Thumb] 要素を表示するために使用します。ユーザーは、[Thumb] 要素をドラッグできます。[Thumb] 要素は、既定では編集可能な SimpleThumbStyle テンプレートを使用します。

  • 2 つの RepeatButton 要素 : PART_Track 要素内に含まれ、ユーザーが [Thumb] コントロールの隣をクリックすると、スライダーの値を大きく変化させることができるようにします。変化の段階値は、スライダーの [LargeChange] プロパティ (テンプレートではありません) で指定することができます。[SmallChange] プロパティによって指定された段階値は、ユーザーが方向キーを使用して [Thumb] コントロールを移動するときに使用されます。

  • レイアウト変換 : スライダーを水平方向に表示するために使用します。この方法は、2 つの異なるテンプレートを編集する必要がある場合と比べて、編集が簡単です。ただし、2 つの方向のデザインを区別する必要がある場合は、別々のテンプレートが必要になります。この場合、Expression Blend の XAML ビューの <Style> 要素で Setter を使用し、方向に基づいてテンプレートを切り替えることができます。この例については、システム [ScrollBar] コントロールの既定のテンプレートを参照してください。

    Cc295377.alert_caution(JA-JP,Expression.30).gif注意 :

    名前が "PART_" で開始する要素は、コントロールを実装するコードから参照されるため、名前を変更しないでください。

    オブジェクト ビュー : SimpleSlider コントロールの基本パーツ (テンプレート)

    Cc295377.29dedf1c-7f1c-41d0-82a6-8bfccb4eb726(JA-JP,Expression.30).png

使用されるプロパティ トリガー

コントロール テンプレートのプロパティ トリガーは、プロパティの変更にコントロールを対応させるために使用されます。[トリガー] パネルのアイテムをクリックすると、トリガーがアクティブになると変更されるプロパティを表示できます。たとえば、SimpleSlider テンプレートでは、[TickPlacement] プロパティに基づいて [TickBar] 要素を表示するのに、トリガーが使用されます。これにより、[TopTick] および [BottomTick] 要素の表示が設定されます。水平および垂直の方向も、SimpleSlider テンプレートのトリガーで構成されます。これは、スライダーを 90°回転させるレイアウト変換を適用して行います。Track では方向の変更が自動的に行われるため、二度回転しないように強制的に戻されます。

使用されるブラシ

SimpleSlider テンプレートでは、SimpleStyles.xaml リソース ディクショナリの次に示すブラシ リソースが使用されます。

  • [Background] プロパティの設定には、アクティブなトリガーが存在しないときは [LightBrush] を使用して、[IsEnabled] が [False] のときは [DisabledBackgroundBrush] を使用します。

  • [BorderBrush] プロパティの設定には、アクティブなトリガーが存在しないときは [NormalBorderBrush] を使用して、[IsEnabled] が [False] のときは [DisabledBorderBrush] を使用します。

  • [TopTick] 要素の [Foreground] プロパティの設定には、[GlyphBrush] を使用します。

  • SimpleThumb テンプレートの [Fill] プロパティの設定には、[NormalBrush] を使用して、[Stroke] プロパティの設定には、[NormalBorderBrush] を使用します。

ベスト プラクティスおよびデザイン ガイドライン

  • 一般に、コントロールに視覚要素を追加する予定がある場合は、テンプレートのルートとして [Grid] コントロールを使用してください。Expression Blend は、既定では [Grid] コントロールなどのレイアウト パネルを検索してアクティブにします。これにより、アートボードに追加される新しい要素がレイアウト パネルの子要素になります。

  • 必要に応じて、SimpleSlider テンプレートにトリガーを追加するか、PART_Track 要素を変更してスライダーの外観を工夫することができます。ただし、名前が "PART_" で始まる要素は、コントロールを実装するコードから参照されるため、名前を変更しないでください。[Thumb] および [RepeatButton] は、[Track] 内の適切な要素に配置する必要があります。[Track] コントロールは、[Thumb] 要素を [Slider] の値に基づいて配置することができます。[RepeatButton] は、スライダーの値の増減に Command バインドを使用します。

  • SimpelSlider テンプレートを編集するときに、[トリガー] パネルを使用して、[TickBar] 要素を強制的に表示することができます。たとえば、SimpleSlider テンプレートでは、[TickPlacement] が [Both] に設定されているときに、両方の [TickBar] 要素の [Visibility] プロパティを [Visible] に設定すると、どちらも表示されます。

関連項目

タスク

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