Blend for VS2012でイロモノUIを作ろう
-
Upload
negishi-takumi -
Category
Documents
-
view
2.895 -
download
0
Transcript of 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でも同様にできるので、操作方法は覚えておいて損はない。
おわり