WPF

C#WPFの道#18!Slider(スライダー)の書き方と使い方を解りやすく解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

Sliderとは?

Sliderとは、ボリュームのレベルを調整するようなコントロールで、目盛りとつまみのあるものです。ユーザーに任意の値を調整させるときなどに使えます。

コントロールのイメージ

Sliderの使い方

TickPlacement

目盛りの位置はTickPlacementプロパティで設定し、次の4種類から選べます。

  • Both
    • 上下に目盛りが表示される(画面左の1番目)
  • BottomRight
    • 下に目盛りが表示される(画面左の2番目)
  • None
    • 目盛りなし(画面左の3番目)
  • TopLeft
    • 上に目盛りが表示される(画面左の4番目)
  • 設定しないとき
    • Noneと同じ(画面左の5番目)

IsSnapToTickEnabled

近くの値にスナップするときはTrueにします。スナップとは例えば,移動の最小単位を10と設定している場合、カーソル移動で17を指定すると、一番近い最小単位の20が選択されます。

TickFrequency

カーソルでドラッグしながらレベルを調整するときの、増減する値を指定します。 

SmallChange

キーボードの矢印キーを押して、レベルを調整するとき増減する値を設定します。

LargeChange

スライダーの任意の位置をクリックしたときに増減する値を設定します。

Orientation

スライダーの向きを縦か横で指定できます。

サンプルコード

横向きスライダー

TickPlacementの4種類と指定なしをそれぞれ記述した例を示します。

上から順番に、目盛りの位置が変化していることが確認できます。また、指定しない場合はNoneと同じ状態であることがわかります。

  • IsSnapToTickEnabledをTrueにしているので、近くの値にスナップされます。
  • つまみをもってドラッグするとTickFrequencyの値「10」単位で移動します。
  • キーボードの左右キーで移動させた場合はSmallChangeの「20」単位で移動します。
  • スライダー上をクリックしてレベルを調整する場合はLargeChangeの「50」単位で移動します。
  • スライダーの最小値と最大値はMinimumとMaximumで指定するので0から100までが選択できる状態になっています。
  • スライダーの下に、スライダーの値を表示するためのTextBlockを設置しています。値が変わるとSlider_ValueChangedで値を設定しています。

縦向きスライダー

  • IsSnapToTickEnabledをFalseにしているのでスナップされないことが確認できます。
  • OrientationをVerticalにすることで、スライダーが縦向きになります。

サンプルコード全体

 

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。