つくばC#勉強会 - 主催兼発表を行ったのでそのスライド。 デモありきのスライドなのでわかりにくいと思います。

1. Blend for VS2012で
イロモノUIを作ろう
ねぎぽよし(@CST_negi)

2. 自己紹介
• 名前:根岸 匠／ねぎぽよし
• Twitter:@CST_negi
• 筑波大学の情報科学な学類
• プログラミングは大学入ってから
• ミクさんとボカロ曲が好き
• こっちの方面で同人活動も多少

3. これから話すこと
• こいつ→ を例に
• メイン=アニメーションとビヘイビアの話
• イロモノUI作りをしつつBlend講座？
（ちなみに例で用いるアプリケーションはWPF4.5製です。）
※注意：20分じゃ伝えきれないので要点だけお話していきます。

4. “イロモノ”の定義
“「イロモノ」=「個性的」として表現す
る場合が多いです。基本的には少しマイナ
スなイメージを含んだ言葉といいますか…
誉め言葉にはあまり使われないようです。
（BIGLOBEなんでも相談室より）
→大体あってる(UXとか何も考えず作った)

5. まずは
勉強会用に作ったものをお見せします
[CPUメモリ使用量モニタとランチャ]

6. 元ネタ
• ARiAというボカロ曲のPVより。
(sm10544006)
以降“ARiALauncher”と呼びます。

7. ここから本編

8. ARiAlauncherについて
• なにで作ったの？
• VisualStudio2012
• Blend for VS2012
• VS2012:CPU使用量とか取得するコード
• Blend:アプリケーションデザイン

9. Blend for VS2012の機能
• プロパティを変更する
（コントロールの色・形を変える）
• アニメーションの作成(ストーリーボード)
• ビヘイビア
• サンプルデータ
• VisualStateManager
…etc

10. イロモノUIを作っていこう
• 大事なこと
1. ウィンドウを捨てる (Windowsではない)
→普通のウィンドウはイロモノではない。
2. アニメーションをふんだんに用いる
→動くと「おおっ」ってなる…ハズ
3. 音を出す
→それっぽい雰囲気を出していこう。

11. ①ウィンドウを捨てる
• ウィンドウとは
これ→
イロモノUIに必要なし

12. ①ウィンドウを捨てる-デモ
• やること
• プロジェクト作る
• ウィンドウを消すためのプロパティの設定

13. ウィンドウ捨てた
ここまでは
• プロパティの設定だけなので
Blend使わなくてもVSでやってもよい
• いうなればただの下準備

14. ②アニメーションをつけよう
• アニメーションとは動画（どうが）とも
呼ばれ、コマ撮りなどによって、複数の
静止画像により動きを作る技術
(Wikipediaより引用)
これをGUIアプリケーションでやろう！

15. Storyboard
アニメーション機能の根幹
• 「あるコントロールのプロパティを何秒
後に○○にする」を設定する。
（位置だけでなく透明度や大きさ等）
• イベントによる開始が可能

16. ②アニメーション-デモ
• やること
• さっき作ったアプリケーションにアニメ
ーションをつける。
• イージング処理をする。

17. アニメーション作った
• これをいろいろ組み合わせていくと
• ARiAlauncherに近づいていく。
• ARiAlancherはアニメーション15個くらい
使ってます。
(MainWindowとUserContorlすべてで)

18. ③音を出す
• ARiAlaucher開発時にやりたかったこと
• ボタンクリックで音を出したい
• ボタンにマウスをのせたら音を出したい
• ロードしたら音を出したい

19. ③音を出す
private void btn_click(sender,e){音を出す}
private void btn_MouseEnter(省略
private void Window_Load(省略
• コードビハインドでやってもいいけど…
• コードを一切書かずに
ビヘイビアでやろうという話をします。

20. ビヘイビア？
• WPFの機能の一つ
• Blendでは簡単に利用できる。
• コードを書かずにイベントに対応して処
理を開始する
• Viewだけでできることをするのに適して
いる。(音を出すもその一つ)
• 音を出す
対象の表示状態を切り替える
URLやファイルを開く など。

21. ③音を出す-デモ
（コードを一切書かずに）
• さっき作ったアプリケーションの
ロード時に音を出す。
• さっき作ったアプリケーションの
ロゴをクリックするとARiAlauncherを起
動する

22. イロモノUI作成-結果
• 大事なこと
1. ウィンドウを捨てる
→プロパティ設定した
2. アニメーションをふんだんに用いる
→ストーリーボードでアニメーションした
3. 音を出す
→ビヘイビアで簡単に音を出せた。

23. まとめ
• Blend for VS2012で簡単にデザインできる
• イロモノUIはやりすぎだけど効果的にアニ
メーションとかつければスタイリッシュに
• ビヘイビアは結構便利(使い所を気をつけて)
• ちなみにWP8やSilverLightでも同様にできるので、
操作方法は覚えておいて損はない。

24. おわり