Slider コントロールのスタイル設定のヒント

  • [アーティクル]

Ee371160.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(ja-jp,Expression.40).png

組み込みの Slider コントロール テンプレートを使用して、カスタム Slider テンプレートを作成できます。既定の Slider コントロール テンプレートは、次のように表示されます。

Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(ja-jp,Expression.40).png

Slider テンプレートのパーツ

Slider テンプレートには、2 つのパーツ セット (垂直方向のスライダー用のセットと水平方向のスライダー用のセット) が含まれます。パーツ名には、スライダーの方向に応じて、"vertical" または "horizontal" という語が接頭辞として付けられます。

tip noteヒント :

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

Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(ja-jp,Expression.40).png

パーツ名 オブジェクトの種類

Ee371160.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.40).png HorizontalTemplate

Ee371160.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.40).png VerticalTemplate

FrameworkElement

Ee371160.f0c1ff71-7814-42ba-806b-7ea92d616e69(ja-jp,Expression.40).png HorizontalTrackLargeChangeDecreaseRepeatButton

Ee371160.eb6fad93-f17e-4f62-a926-8c8651862891(ja-jp,Expression.40).png VerticalTrackLargeChangeDecreaseRepeatButton

RepeatButton

Ee371160.a5d608f2-bba2-48c5-8b15-2c115db86acc(ja-jp,Expression.40).png HorizontalThumb

Ee371160.15de085f-48f5-41dd-a286-e3dcb4cfd18b(ja-jp,Expression.40).png VerticalThumb

Thumb

Ee371160.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(ja-jp,Expression.40).png HorizontalTrackLargeChangeIncreaseRepeatButton

Ee371160.1aa736bd-cd0d-4514-a5e4-b495d11d4870(ja-jp,Expression.40).png VerticalTrackLargeChangeIncreaseRepeatButton

RepeatButton

スライダーのヒント

テンプレート パーツ

これは、必須のパーツです。template パーツには、特定の方向で Slider を形成するすべての要素が含まれています。

template を作成するには、サイズが [自動サイズ]、[自動サイズ]、[比例サイズ] の 3 つの列 (水平方向の場合) または行 (垂直方向の場合) を含む、HorizontalTemplate または VerticalTemplate という名前のグリッドを作成します。

Thumb パーツ

これは、必須のパーツです。Thumb はスライダーの移動可能な要素です。

Thumb を表す 1 つまたは複数のオブジェクトを Thumb コントロール (HorizontalThumb または VerticalThumb) にするには、Thumb パーツを Root パーツの中央の列 (または行) に配置します。次に、列 (または行) のサイズが Thumb に合わせて変更されるように Thumb パーツの Width プロパティと Height プロパティを設定します。

トラック

Thumb が往復する経路をトラックといいます。トラックは、パーツではないので、必ずしも設定する必要はありません。

トラックを含めるには、トラックを表す 1 つまたは複数のオブジェクトを Template パーツの 3 つの列 (または行) すべてに行き渡るように配置します。

トラックに沿って Thumb を大きく動かす

ユーザーが Thumb のいずれかの側をクリックすると Thumb が大きく動くようにするには、RepeatButton コントロールを Thumb パーツのいずれかの側の 2 つの列 (または行) に配置して、VerticalLargeDecrease と VerticalLargeIncrease (または HorizontalLargeDecrease と HorizontalLargeIncrease) という名前を付けます。RepeatButton が非表示で機能するように、Opacity を 0 に設定します。または、Opacity が 0 の単一のオブジェクトを含むテンプレートを RepeatButton コントロールに適用することもできます。

Slider コントロールの状態

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

状態名 説明

Normal

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

MouseOver

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

Disabled

IsEnabled プロパティが False に設定されているときの Slider コントロールの状態。

Slider コントロールは、[FocusStates] 状態グループに属する次の 2 つの状態のいずれかになります。

状態名 説明

Unfocused

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

Focused

Slider コントロールがキーボードでフォーカスされたときの状態。たとえば、アプリケーション内でユーザーが Tab キーを押してフォーカスを切り替えていき、Slider コントロールにフォーカスが移った場合が相当します。
tip noteヒント :

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

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

テンプレートのバインド

Background、BorderBrush、Foreground、BorderThickness、および Padding プロパティは、テンプレートにバインドすることができます。詳細については、「オブジェクト プロパティをテンプレートに反映させる」を参照してください。

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

次の図は、 HorizontalThumb パーツの MouseOver 状態と Pressed 状態を含むスライダーのデザイン見本図（カンプ）です。

Normal

Normal 状態の Slider

MouseOver

MouseOver 状態の Slider

Pressed

Pressed 状態の Slider

Disabled

Disabled 状態の Slider

この例では、次の手順 2 で XAML コードを使用します。これは、上の図の Slider コントロール テンプレートを使用したカスタム スクロール バーの作成に相当します。

tip noteヒント :

以下の手順を実行する際に [デザイン] ビューと [コード] ビューの両方の変化を確認するには、[分割ビュー] をクリックします。

  1. [コード] ビューで次のコードを見つけ、終了スラッシュ (/) を削除します。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 次のコードをコピーし、新しいプロジェクトで、手順 1 で見つけたコードの後に貼り付けます。

    <Grid Width="146" Height="17" >
<Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
<Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
</Grid>

  3. 貼り付けたコードの後に Grid の終了タグ (</Grid>) を追加します。

  4. [オブジェクトとタイムライン] パネルで Grid を右クリックして、[コントロールの作成] をクリックします。[コントロールの作成] ダイアログ ボックスで [Slider]、[OK] の順にクリックします。

    [コード] ビューで、前の手順で貼り付けたコードが新しい Slider のコードで置き換えられたことを確認します。さらに、Expression Blend により Grid から新しい Slider スタイルのテンプレートが作成され、そのテンプレートが Grid に適用されたことがわかります。

  5. 列を Template パーツ グリッドに追加するには、[デザイン] ビューでコントロールの上にある青いルーラーをクリックして、以下の図に示すように行を追加します。

    列のある Slider

    図に示すように行を追加する場合、パーツは正しい行に配置されます。Track の ColumnSpan は 3 になり、thumb は Column 1 に配置されます。

    Noteメモ :

    番号は 0 から始まるので、3 つの行には 0 ～ 2 の番号が付けられます。

  6. テンプレートのルートを HorizontalTemplate パーツにするには、[オブジェクトとタイムライン] パネルで [Grid] を右クリックして [Slider パーツの作成]、[HorizontalTemplate] の順にクリックします。Grid の名前が HorizontalTemplate に変更されていることに注意してください。

  7. [オブジェクトとタイムライン] パネルで thumb を右クリックして、[ScrollBar パーツの作成]、 [HorizontalThumb] の順にクリックします。

  8. 状態を [HorizontalThumb] パーツに追加するには、次の操作を行います。

    1. [オブジェクトとタイムライン] パネルの [Thumb] をクリックします。

    2. [状態] パネルで [MouseOver] をクリックします。

    3. [プロパティ] パネルで [Fill] を「#FFCCCCCC」に設定します。

    4. [状態] パネルに戻り、[ベース] をクリックして状態の記録を終了します。

      Noteメモ :

      状態の記録は、ドキュメント ウィンドウの左上隅にある記録モード インジケーター Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(ja-jp,Expression.40).png をクリックして終了することもできます。

  9. [状態] パネルで [MouseOver] を右クリックして、[状態のコピー先]、[Pressed] の順にクリックします。

  10. オフセットを作成するには、[状態] パネルで [States] が選択された状態で、[プロパティ] カテゴリの [変換] で [X] および [Y] を「1」****に設定します。[ベース] をクリックして状態の記録を終了します。

  11. [状態] パネルで [Normal] をクリックします。[切り替え効果の追加] をクリックして、[Normal to MouseOver] をクリックします。[切り替え効果の再生時間] を「.2」に設定します。[ベース] をクリックして状態の記録を終了します。

  12. [オブジェクトとタイムライン] パネルで [スコープを <オブジェクト名> に戻す] Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックして、Slider コントロール [SliderStyle1 (Slider Template)] のテンプレート編集モードに戻ります。

  13. [オブジェクトとタイムライン] パネルの [HorizontalThumb] をクリックします。[プロパティ] パネルの [レイアウト] カテゴリで、[Margin] の横にある [詳細オプション] をクリックして、[リセット] をクリックします。

  14. [オブジェクトとタイムライン] パネルで [HorizontalTemplate] をクリックします。[パーツ] パネルで [HorizontalTrackLargeChangeDecreaseRepeatButton] をダブルクリックして、そのパーツを作成し、HorizontalTemplate の子にします。[プロパティ] パネルの [外観] カテゴリで [Opacity] を「0」に設定します。

  15. [オブジェクトとタイムライン] パネルの [HorizontalTemplate] をクリックします。[パーツ] パネルで [HorizontalTrackLargeChangeIncreaseRepeatButton] をダブルクリックして、そのパーツを作成し、[HorizontalTemplate] の子にします。[プロパティ] パネルの [外観] カテゴリで [Opacity] を「0」****に設定します。

  16. 行 0 および 1 に対して、[比例サイズ] アイコン Ee371160.1b4edaf6-b6a8-4498-80dc-949375fa610d(ja-jp,Expression.40).png を 2 回クリックして、[自動サイズ] アイコンEe371160.aa9ec064-22f8-4b62-9eed-3f4772362d22(ja-jp,Expression.40).png を表示します。行 2 に対して、[比例サイズ] アイコン が表示されていることを確認します。中央列の区切り線をクリックして、[プロパティ] パネルで [詳細プロパティの表示] をクリックします。[MinHeight] 値の右側にある [詳細オプション] をクリックして、[リセット] をクリックします。

    列がリセットされた Slider

  17. [オブジェクトとタイムライン] パネルの [HorizontalTemplate] をクリックします。[状態] パネルで [Disabled] をクリックします。[プロパティ] パネルの [外観] カテゴリで [Opacity] を 50 に設定します。

  18. Ctrl + Shift + B キーを押してプロジェクトをビルドします。ビルドが完了したら、F5 キーを押してプロジェクトを実行し、スクロール バーをテストします。

参照

Silverlight の Slider コントロールのプロパティとイベントの詳細については、MSDN の「Silverlight Control Gallery (Silverlight コントロール ギャラリー) Ee371160.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

関連項目

タスク

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

概念

一般的な Silverlight コントロールのスタイル処理のヒント
SimpleSlider
テンプレートを使用するコントロールのスタイルの設定

Copyright ©2011 by Microsoft Corporation. All rights reserved.