ホーム > Expression Blend > 0からはじめるExpression Blend再入門

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

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年5月13日 from Atelier:Mitsuba

はじめに

おでさんがチェックボックスよーわからへんってつぶやいた途端、

まわりのWPクラスタが「VSMでいいよ!あとはみつばたんにきけばおk!」って全力で丸投げされたのでやってみました。

とっても簡単です。

例えば、以下の様なonとoffのイメージがあるとしましょう。

f:id:c-mitsuba:20120513213740p:image

操作方法

  1. まずは元となるCheckBoxを配置し、右クリック、テンプレートの編集、コピーして編集を行います。
    f:id:c-mitsuba:20120513213849p:image
  2. オブジェクトパネルにCheckBoxが構成されているオブジェクトが配置されています。
    f:id:c-mitsuba:20120513214024p:image
  3. ひとまず邪魔なものは削除しましょう。
    f:id:c-mitsuba:20120513214145p:image
  4. 次に状態パネルからCheckedを選択します。状態パネルが無い場合は上部メニューにあるウィンドウから出してください。
    これで指定したコントロールの状態になった時の見せ方を編集できます。Checkedだと、CheckBoxにチェックが入った状態ですね。
    f:id:c-mitsuba:20120513214322p:image
  5. あとはImageを2つおいて、Checkedの時はOff.pngがソースになっているImageのOpacityを0にします。
    Uncheckedの指定も同様に、状態からUncheckedを選択して、On.pngはソースになっているImageのOpacityを0にします。
    f:id:c-mitsuba:20120513214628p:image
  6. ビルドしてみましょう。クリックでon/offが切り替わります。
    f:id:c-mitsuba:20120513214909p:image

    f:id:c-mitsuba:20120513214906p:image

さいごに

IsEnableの状態も設定したければ状態パネルからIsEnableの状態で見た目を編集してやればいいですよ。

ね、VSMなんて簡単でしょ!

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ