WPFユーザーコントロールの作成例(Toggle Switch)

WPF用のユーザーコントロールの3個めです。
トグルボタンは状態を認識しにくいので、スマホ等でよく出てくるトグルスイッチを作りました。
UWP用にはあるのにWPF用には無いのはなぜなんでしょう。
ユーザビリティーを良くするためには、一目で理解できる表現が必要です。
WPFの標準コントロールは、あまり美しくないので、自分で頑張るしかない。
[Visual Studio 2017、.NET4.5.2]

概要

元になるベースはここを参考にさせてもらいました。
github.com

変更点は以下になります。

  1. 形状変更(XAML)
  2. Property を Dependency Property に変更
  3. アニメーションの速度を変えられるように Dependency Property を追加
  4. 貼り付け時にサイズを変えられるように ViewBox 追加

また、トグルスイッチは処理の実行と状態の表示の両方を一つで行う物なので、使い方には少々工夫が必要です。それも含めて、使い方のサンプルも作りました。

形状変更

形状は、ごく普通の 角丸長方形の中の円が左右に移動するタイプにしました。

f:id:feynman911:20190407230915j:plain

全体を ViewBox に入れることで、貼り付け時にサイズ変更が可能となります。
ViewBox のプロパティーの外観にある Strech はデフォルトのまま Uniform にしておくことで、拡大縮小時の縦横比を保つことができます。

Dependency Property

トグルスイッチのON/OFFのプロパティー IsOn は下記の様になります。
切り替え時のアニメーションが記述されています。
また、アニメーションの速度を変えられるように、変更しています。
バインドする時の方向は default で twoway にしてあります。

f:id:feynman911:20190408102626j:plain

これ以外に下記のような Property があります。

f:id:feynman911:20190407230938j:plain

TrackBackgroundOnColor:ONの時のバックグランド色
TrackBackgroundOffColor:OFFの時のバックグランド色
CircleBackgroundColor:スライドする円の内部の色
CircleBorderColor:スライドする円の縁の色
Duration: アニメーションの時間

サンプルの説明

トグルスイッチをONに切り替えたからと言って、いつも処理が成功するとは限らないことがあります。処理の時間が短い時には、処理後の結果でスイッチを動かせばいいのですが、処理が長い時には、クリックしたことを受け付けた意味で、先にスイッチの状態を変更する必要があります。
Task.Run を使って、別スレッドで処理を起動し、スイッチの状態は先に変更してしまいます。その後、もし処理が失敗した時にはスイッチを戻す操作を行います。

サンプルアプリには、トグルスイッチと、処理結果表示用のチェックボックス、処理を強制的に失敗させるためのチェックボックスを配置してあります。

f:id:feynman911:20190407231019j:plain

ToggleSwtich を View に貼り付けると、次のようなプロパティーがあるので、色とアニメーションの時間を調整します。

f:id:feynman911:20190407231002j:plain

ViewModel側のコードは下記のような感じですが、詳しくはソースコードを見てください。
f:id:feynman911:20190408113908j:plain

使用例は、これまでのユーザーコントロールと同じ View に入れ込んでます。
f:id:feynman911:20190407231033j:plain

ソースコードは、今までと同じく下記にあります。
github.com