SimpleSlider
.png "このページは WPF プロジェクトにのみ適用されます。")
スライダは、Thumb コントロールを移動することにより、さまざまな値から選択できるようにするための簡易コントロールです。既定では、スライダは水平方向に表示されますが、Microsoft Expression Blend の [プロパティ] パネルの [共通プロパティ] にある [Orientation] プロパティを設定することによって、垂直方向に表示することができます。スライダの値を設定するには、Minimum、Maximum、および Value プロパティを使用します。
SimpleSlider コントロールのアートボード ビュー
.png "Cc295377.50295968-6423-4517-9479-ed886201b731(ja-jp,Expression.10).png")
コントロール テンプレートの構成要素
SimpleSlider コントロール テンプレートには、次のアイテムが含まれます。
GridRoot という名前の Grid パネル : スライダ内に複数の子要素を保持するために使用します。また、Grid を使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナは複数の要素を簡単にテンプレートに追加できます。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 要素内に含まれ、ユーザーがつまみのいずれかの側をクリックすると、スライダの値を大きく変化させることができるようにします。変化の段階値は、スライダの LargeChange プロパティ (テンプレートではありません) で指定することができます。SmallChange プロパティによって指定された段階値は、ユーザーが方向キーを使用してつまみを移動するときに使用されます。
レイアウト変換 : スライダを水平方向に表示するために使用します。この方法は、2 つの異なるテンプレートを編集する必要がある場合と比べて、編集が簡単です。ただし、2 つの方向のデザインを区別する必要がある場合は、別々のテンプレートが必要になります。この場合、Expression Blend の XAML ビューの <Style> 要素で Setter を使用し、方向に基づいてテンプレートを切り替えることができます。この例については、システム ScrollBar コントロールの既定のテンプレートを参照してください。
.gif "注意")
注意 :名前が "PART_" で開始する要素は、コントロールを実装するコードから参照されるため、名前を変更しないでください。
オブジェクト ビュー : SimpleSlider コントロールの基本パーツ (テンプレート)
.png "Cc295377.29dedf1c-7f1c-41d0-82a6-8bfccb4eb726(ja-jp,Expression.10).png")
.gif "Cc295377.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
使用されるプロパティ トリガ
コントロール テンプレートのプロパティ トリガは、プロパティの変更にコントロールを対応させるために使用されます。[組み合わせ] パネルの [トリガ] のアイテムをクリックすると、トリガがアクティブなときに変更されるプロパティを表示できます。たとえば、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 が "両方向" に設定されているときに、両方の TickBar 要素の Visibility プロパティをそれぞれ "表示" に設定すると、どちらも表示されます。
先頭に戻る