SimpleSlider

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

アートボード上の SimpleSlider コントロール

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

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 を使用し、方向に基づいてテンプレートを切り替えることができます。この例については、システム Slider コントロールの既定のテンプレートを参照してください。

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

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

コントロール テンプレートのプロパティ トリガーは、プロパティの変更にコントロールを対応させるために使用されます。[トリガー] パネルのアイテムをクリックすると、トリガーがアクティブになると変更されるプロパティを表示できます。たとえば、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 バインドを使用します。

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

関連項目

タスク

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.