atelier:mitsuba

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

その45:BlendからStyleのSetter Propertyを変更する。

 

例えば、ボタンがあるとして、このテンプレートを変更したいとき、右クリックして編集しますよね。f:id:c-mitsuba:20130619111937p:plain

 

するとバインディングで予め定義されたプロパティがあることがわかります。

f:id:c-mitsuba:20130619111943p:plain

 

これらはテンプレートのより上のStyleで定義されていて、StyleのSetter Propertyでバインディングされています。f:id:c-mitsuba:20130619111949p:plain

 

ここを弄りたいとき、バインディングを外してごにょごにょすると、バインディングに紐付いたアニメーションが消えたり、なんかあっちこっちにおんなじようなPropertの設定を書いたりと面倒です。

そこで、Setter Propertyをカスタマイズしてみましょう。

カスタマイズするには、ボタンに戻り、ボタンのプロパティパネルにあるその他の指定のStyleをクリックします。

f:id:c-mitsuba:20130619111953p:plain

 

ちょぼを押すと、リソースの編集があるので、クリックします。

f:id:c-mitsuba:20130619111958p:plain

 

 

これでStyleの編集画面になります。

Styleなので、オブジェクトパネルにはStyleとしか表示されません。f:id:c-mitsuba:20130619112006p:plain

 

例えばBorderThicknessを変更するとしましょう。

StyleのBorderTicknessにはResourceが割り当てられています。

リセットして好きにいじってもよいのですが、エレガントじゃないので、新しいリソースに変換します。

f:id:c-mitsuba:20130619112010p:plain

 

新しいリソースに適当な名前をつけます。

f:id:c-mitsuba:20130619112014p:plain

 

すると、Setter PropertyのBorderThicknessが新しいリソース名に変わりました。f:id:c-mitsuba:20130619112017p:plain

 

新しくできたリソースを編集。

 

 

f:id:c-mitsuba:20130619112020p:plain

 

BorderThicknessなのでプロパティパネルが表示されます。

f:id:c-mitsuba:20130619112023p:plain

 

いいかんじにいじる。

f:id:c-mitsuba:20130619112026p:plain

 

OK押すと、あたらしいStyleが適用されます。

うまく変わらない場合はリソースを再度適用してみてください。

f:id:c-mitsuba:20130619112028p:plain

 

ちなみにxamlはこんなかんじ。f:id:c-mitsuba:20130619112031p:plain

 

 

綺麗なXAMLが出力されるBlendの操作を覚えるとレベルアップした感じがありますね。