WPFのスライダーを目盛り単位で動かすには4つのプロパティが必要

概要

WPFには、数値を範囲内で変更するUIとして便利なスライダーがあります。あまり見かけないので、WPFに有ることを知らない人も多いのでは？

使ってみたところ直観と違う動きで戸惑ったので、引っかかった注意点を書きます。この記事ではそれ以外の情報は触れないので、それ以外については MS Learn を見てください。

最初に結論まとめ

マウスとキーボードの操作で違和感なく動くようにするには、プロパティ IsSnapToTickEnabled と LargeChange と SmallChange も設定しましょう。1目盛りのサイズを設定する TickFrequency の設定だけでは不足です。

説明

最低限の設定で使ってみる

まずスライダーを使おうとしたときに最初に設定するのは、「スライダーの値の範囲と、1目盛りのサイズ」と考えるのではないでしょうか。私はそう考えました。

というわけで、値の範囲を決めるMinimum=0とMaximum=1、目盛りを決める TickFrequency=0.1 と設定しました。これで0～1を0.1刻みで動くスライダーになるはずです。

見た目にはいい感じになりました。完成ですね！

マウスとキーボードで起きた想定外の動作

そうは行きませんでした。

マウスでつまみをドラッグすると、無段階に好きな位置へドラッグできます。0.1刻みはどこへ？

さらに、マウスでレーン部分をクリックすると、1目盛りずつ移動するのではなく、最小値と最大値を往復する変な動きになりました。妙な感じです。

一方、フォーカスを当ててキーボードの左右キーで動かすと、1目盛りずつ動いているように見えました。キーボードとマウスで動作が違う・・・？

つまみ操作、クリック、キーボード、それぞれ関連プロパティが違う

TickFrequencyは目盛りを決めるプロパティであり、操作はまた別でした。

• つまみを目盛り単位で動かす: IsSnapToTickEnabled
• レーン上のマウスクリック：LargeChange
• キーボードの左右キー：SmallChange

※マウス・左右キー以外にもこれらのプロパティが効くので、詳細はリンク先の MS Learn を見てください

まず、 IsSnapToTickEnabled はデフォルトでfalseなので、これをtrueにしないとつまみの動きは変わりません。

次に LargeChange SmallChange は、TickFrequency とは無関係に、固定のデフォルト値を持っています。

LargeChangeのデフォルト値は1。今回は0～1のスライダーにしたのでこれがかなり目立ち、レーンクリックでは最小値と最大値しか選択されない動きになったというわけです。

SmallChangeのデフォルト値は0.1。今回はたまたまTickFrequencyと同じ値だったので、キーボードでは期待通りに動くように見えただけでした。

これらの値もちゃんと設定しないと、妙な動きになってしまうようです。

今回の解決方法

今回はすべての操作を0.1刻みにしたいため、次のように設定しました。

<Slider Minimum="0" Maximum="1" TickFrequency="0.1"
    IsSnapToTickEnabled="True"
    LargeChange="0.1"
    SmallChange="0.1"/>

まとめ

WPFにもちゃんと標準でスライダーがあり、上手く使えばUIをちょっとリッチな感じに出来ます。

しかし「目盛り刻みで操作したい」という場合、TickFrequency だけではなく IsSnapToTickEnabled と LargeChange と SmallChange もちゃんと設定しましょう。そうしないと、「マウス操作の時だけ動きがおかしい」などといった妙な動きに悩まされることになります。