Blend for VS2012でイロモノUIを作ろう

Blend for VS2012でイロモノUIを作ろう

ねぎぽよし(@CST_negi)

自己紹介

• 名前:根岸 匠／ねぎぽよし

• Twitter:@CST_negi

• 筑波大学の情報科学な学類

• プログラミングは大学入ってから

• ミクさんとボカロ曲が好き

• こっちの方面で同人活動も多少

これから話すこと

• こいつ→ を例に

• メイン=アニメーションとビヘイビアの話

• イロモノUI作りをしつつBlend講座？

（ちなみに例で用いるアプリケーションはWPF4.5製です。）

※注意：20分じゃ伝えきれないので要点だけお話していきます。

“イロモノ”の定義

“「イロモノ」=「個性的」として表現する場合が多いです。基本的には少しマイナスなイメージを含んだ言葉といいますか…

誉め言葉にはあまり使われないようです。

（BIGLOBEなんでも相談室より）

→大体あってる(UXとか何も考えず作った)

まずは

勉強会用に作ったものをお見せします

[CPUメモリ使用量モニタとランチャ]

元ネタ

• ARiAというボカロ曲のPVより。(sm10544006)

以降“ARiALauncher”と呼びます。

ここから本編

ARiAlauncherについて

• なにで作ったの？

• VisualStudio2012

• Blend for VS2012

• VS2012:CPU使用量とか取得するコード

• Blend:アプリケーションデザイン

Blend for VS2012の機能

• プロパティを変更する（コントロールの色・形を変える）

• アニメーションの作成(ストーリーボード)

• ビヘイビア

• サンプルデータ

• VisualStateManager

…etc

イロモノUIを作っていこう

• 大事なこと

1. ウィンドウを捨てる (Windowsではない)

→普通のウィンドウはイロモノではない。

2. アニメーションをふんだんに用いる

→動くと「おおっ」ってなる…ハズ

3. 音を出す

→それっぽい雰囲気を出していこう。

①ウィンドウを捨てる

• ウィンドウとは

これ→

イロモノUIに必要なし

①ウィンドウを捨てる-デモ

• やること

• プロジェクト作る

• ウィンドウを消すためのプロパティの設定

ウィンドウ捨てた

ここまでは

• プロパティの設定だけなのでBlend使わなくてもVSでやってもよい

• いうなればただの下準備

②アニメーションをつけよう

• アニメーションとは動画（どうが）とも呼ばれ、コマ撮りなどによって、複数の静止画像により動きを作る技術

(Wikipediaより引用)

これをGUIアプリケーションでやろう！

Storyboard

アニメーション機能の根幹

• 「あるコントロールのプロパティを何秒後に○○にする」を設定する。（位置だけでなく透明度や大きさ等）

• イベントによる開始が可能

②アニメーション-デモ

• やること

• さっき作ったアプリケーションにアニメーションをつける。

• イージング処理をする。

アニメーション作った

• これをいろいろ組み合わせていくと

• ARiAlauncherに近づいていく。

• ARiAlancherはアニメーション15個くらい使ってます。(MainWindowとUserContorlすべてで)

③音を出す

• ARiAlaucher開発時にやりたかったこと

• ボタンクリックで音を出したい

• ボタンにマウスをのせたら音を出したい

• ロードしたら音を出したい

③音を出す

private void btn_click(sender,e){音を出す}private void btn_MouseEnter(省略private void Window_Load(省略

• コードビハインドでやってもいいけど…

• コードを一切書かずにビヘイビアでやろうという話をします。

ビヘイビア？• WPFの機能の一つ

• Blendでは簡単に利用できる。

• コードを書かずにイベントに対応して処理を開始する

• Viewだけでできることをするのに適している。(音を出すもその一つ)

• 音を出す対象の表示状態を切り替えるURLやファイルを開く など。

③音を出す-デモ

（コードを一切書かずに）

• さっき作ったアプリケーションのロード時に音を出す。

• さっき作ったアプリケーションのロゴをクリックするとARiAlauncherを起動する

イロモノUI作成-結果

• 大事なこと

1. ウィンドウを捨てる→プロパティ設定した

2. アニメーションをふんだんに用いる

→ストーリーボードでアニメーションした

3. 音を出す

→ビヘイビアで簡単に音を出せた。

まとめ

• Blend for VS2012で簡単にデザインできる

• イロモノUIはやりすぎだけど効果的にアニメーションとかつければスタイリッシュに

• ビヘイビアは結構便利(使い所を気をつけて)

• ちなみにWP8やSilverLightでも同様にできるので、操作方法は覚えておいて損はない。

おわり