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

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

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

はじめに

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

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をカスタマイズしてみましょう。

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の操作を覚えるとレベルアップした感じがありますね。

次の記事

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

コメント

▲このページのトップへ