atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その42:チェックボックスをカスタマイズして、on/offに画像を利用する

おでさんがチェックボックスよーわからへんってつぶやいた途端、
まわりのWPクラスタが「VSMでいいよ!あとはみつばたんにきけばおk!」って全力で丸投げされたのでやってみました。

とっても簡単です。
例えば、以下の様なonとoffのイメージがあるとしましょう。

1.まずは元となるCheckBoxを配置し、右クリック、テンプレートの編集、コピーして編集を行います。

2.オブジェクトパネルにCheckBoxが構成されているオブジェクトが配置されています。

3.ひとまず邪魔なものは削除しましょう。

4.次に状態パネルからCheckedを選択します。状態パネルが無い場合は上部メニューにあるウィンドウから出してください。
これで指定したコントロールの状態になった時の見せ方を編集できます。Checkedだと、CheckBoxにチェックが入った状態ですね。

5.あとはImageを2つおいて、Checkedの時はOff.pngがソースになっているImageのOpacityを0にします。
Uncheckedの指定も同様に、状態からUncheckedを選択して、On.pngはソースになっているImageのOpacityを0にします。

6.ビルドしてみましょう。クリックでon/offが切り替わります。

IsEnableの状態も設定したければ状態パネルからIsEnableの状態で見た目を編集してやればいいですよ。
ね、VSMなんて簡単でしょ!