読者です 読者をやめる 読者になる 読者になる

cafe. Blend

Expression Blend 勉強会

cafe.Blend #1杯目 セッション資料

cafe. Blend セッション資料

第一回のセッション資料!

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

連載:0から始めるExpression Blend 4 再入門

例えば、ボタンがあるとして、このテンプレートを変更したいとき、右クリックして編集しますよね。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の操作を覚えるとレベルアップした感じがありますね。

cafe. Blend #1杯目

cafe. Blend

Blend勉強会やるよー

cafe. Blendとは(http://cafe-blend.hatenablog.com/entry/2013/05/15/014837

1杯目はGridパネルを使ってGridレイアウトの勉強です。

てきとーなGridレイアウトの例を持ってくるので、みんなで同じのをトレースしてみましょう。

参加希望者はこの記事に

コメントで表明してくださいー。

みなさんWindows Store Appsの開発環境をお持ちくださいー

お待ちしていますー

 


日時 : 2013/6/27 19:00

定員 : 15 人

参加方法 : この記事にコメントで表明

ハッシュタグ : #cafeBlend

会場 : フェンリル株式会社 (大阪府大阪市北区梅田 2-4-9 ブリーゼタワー 12F)

会場案内

ビル入り口にセキュリティゲートがあるため、一度集合してから入館する形になります。

19:05 を目途に1Fオフィスタワーエントランスのベンチでおまちください。 ※この写真の左下あたりにある、オレンジ色のベンチです。 

 

19:05に間に合わない場合はブリーゼタワーの地下1Fミニストップ前に来てください。 スタッフが迎えに行きますので、到着後に #cafeBlendをつけてつぶやいてください。

cafe. Blendはじめました。

cafe. Blend

Expression Blendのハンズオンをまったりすすめる勉強会です。

使い方からパネルレイアウト、StyleやBehavior、SampleDatasetなどなどExpression Blendの範疇すべてを、基礎から取り上げます。

 

月1平日夜に、大阪、梅田近郊で開催します。

開催日の告知や募集もこのブログで行いますので、ぜひチェックしてください。

右メニューから「読者になる」と便利ですよ。

その44:Behaviorで変更する値の間を補間する

連載:0から始めるExpression Blend 4 再入門

経緯

とっても簡単です。
プロパティの値を変えるには、このブログで何度も扱ったChangePropertyActionがありますね。
Rectangleのwidthを500pxの変えるビヘイビアをボタンがクリックしたら実行するようにしました。

ボタンをおすとー

一瞬で変わってしまいます。

そこでビヘイビアのAnimationプロパティを使います。
Animationタブを開いて任意の時間をhh:mm:ssの形式で手入力します。
Storyboardで利用できるイージングも適用できます。
今回は0:0:10でやってみました。

実行すると、10秒かけてだんだん値が変わっていきます


ちなみにxamlでかくとこんなかんじ。

		<Button Content="実行" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="55,114,0,0" Height="45">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<ei:ChangePropertyAction TargetName="rectangle" PropertyName="Width" Value="500" Duration="0:0:10"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
		</Button>

ねっ、簡単でしょう!

その43:Gridの使い方

連載:0から始めるExpression Blend 4 再入門

このエントリはExpression Blendアドベントカレンダー20121日目です。
ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。
(Surfaceのエントリも後でかくよぉ。。。)

まず1回目はGridを使ってみましょう。
パネル系は多解像度に対応するには必須の知識です。

Gridは開発者が自由に格子状に線を切って、コントロールを配置できるパネルです。
早速試してみて、Gridの特性を抑えておきましょう。

1.Girdをアプリ全面におきます。
2.デザイナでマウスカーソルをGridのふちに近づけてください。
青い線がでて、そこでクリックするとGridを切れます。

3.何本でもばしばし切れます。

4.Gridを切ったら、白四角に青字で書かれたマス目のサイズが表示されます。
このサイズ表記にマウスをあわせると、サイズを変更できるチップが表示されます。
*印は割合を示し、鍵アイコンは固定値を表します。

5.例えばこのGridの場合、上から200px,200px,残りを1:2のサイズに、同様に左から200px,200px,残りを1:2のサイズに切ったGridになります。

6.なお、これらGridの切り方をパネルで変更する場合は、ColumnDefinitionとRowDefinitionから行います。

7.次にコントロールを配置してみましょう。
Gridの子要素にコントロールを配置して、レイアウトパネルからRowとColumnを変更します。
なお、Gridのマス目に背景色を付けることは出来ないので、マスごとに色を変えたい場合は、Rectangleなり、Gridなりを置いて、Backgroundを変更します。

8.実行してみましょう。
左端の縦列の高さが、200px,200px,残り1:2となり、上2つは固定、下2つは解像度によって変更されるGridになりました。

タイルっぽいものを表示したければ、Girdを数だけ切って、すべて比率を1にしてやれば良いでしょう。

その43:Gridの使い方

連載:0から始めるExpression Blend 4 再入門

このエントリはExpression Blendアドベントカレンダー20121日目です。
ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。
(Surfaceのエントリも後でかくよぉ。。。)

まず1回目はGridを使ってみましょう。
パネル系は多解像度に対応するには必須の知識です。

Gridは開発者が自由に格子状に線を切って、コントロールを配置できるパネルです。
早速試してみて、Gridの特性を抑えておきましょう。

1.Girdをアプリ全面におきます。
2.デザイナでマウスカーソルをGridのふちに近づけてください。
青い線がでて、そこでクリックするとGridを切れます。

3.何本でもばしばし切れます。

4.Gridを切ったら、白四角に青字で書かれたマス目のサイズが表示されます。
このサイズ表記にマウスをあわせると、サイズを変更できるチップが表示されます。
*印は割合を示し、鍵アイコンは固定値を表します。

5.例えばこのGridの場合、上から200px,200px,残りを1:2のサイズに、同様に左から200px,200px,残りを1:2のサイズに切ったGridになります。

6.なお、これらGridの切り方をパネルで変更する場合は、ColumnDefinitionとRowDefinitionから行います。

7.次にコントロールを配置してみましょう。
Gridの子要素にコントロールを配置して、レイアウトパネルからRowとColumnを変更します。
なお、Gridのマス目に背景色を付けることは出来ないので、マスごとに色を変えたい場合は、Rectangleなり、Gridなりを置いて、Backgroundを変更します。

8.実行してみましょう。
左端の縦列の高さが、200px,200px,残り1:2となり、上2つは固定、下2つは解像度によって変更されるGridになりました。

タイルっぽいものを表示したければ、Girdを数だけ切って、すべて比率を1にしてやれば良いでしょう。