wp勉強会blend
TRANSCRIPT
はじめての Blend蜜葉 優
アジェンダ
Blend の使い方コントロールを使う オブジェクトパネルプロパティパネルイベントパネル
2
ハンズオンビヘイビア
Hello Blendアニメーションページ遷移
バインディング
SampleDataSetSampleDataSet で UI デザイン実際に利用する 3
Blend の使い方
4
Blend の使い方
目的:基本的な使い方を覚えよう
コントロールの置き方各パネルの使い方を覚える
5
コントロール集
6
オブジェクトパネル
7
画面の構成の一覧
オブジェクトの選択
ストーリーボードもここから
タイムライン
8
ここでキーフレーム打ってアニメーションします。
プロパティ
9
オブジェクトパネルで選択したコントロールのプロパティを変える
プロパティその2
10
オブジェクトパネルで選択したコントロールにイベントつける
デバイス
11
プレビューでデバイスの方向変えたり
テーマカラー変えたり
実機実行かエミュ実行か選択
とりあえずこんだけ触れたらつかえます。
12
かんたんですね!
13
Hello World
14
Hello world
目的:とりあえずここから
まずは触ってみましょう
15
きよくらさんは C# でやりましたね
16
ちょっと見かけは違いますが、ノンコーディングでやってみましょう。
17
その1 UI
18
TextBlockを配置します。フォントサイズをプロパティパネルから大きくします。
その 2 UI
19
ボタンを配置します
その3 ビヘイビア
20
コントロールから ChangePropatyAction をボタンにドラッグ
その 4 ビヘイビアの挙動
21
ChangePropatyActionを選択
プロパティを変更
Build !
22
まとめ
23
ビヘイビアはちっちゃいコードのあつまり「だれが」「どうされたら」「だれの」「なにを」「どうする」
今回はプロパティを変えるビヘイビア「ボタンが」「クリックされたら」「 textblock の」「 text プロパティを」「 Blend に変える」
まとめ
24
ほかにも、
ステートかえたり、マウスでドラッグできるようにしたり音鳴らしたりオブジェクト削除したりアニメーション実行したりページ遷移したり
アニメーションしよう
25
アニメーションしよう
目的:キーフレームの扱いを覚える
いろんなプロパティをさわってみる
26
その1 Storyboard
27
オブジェクトパネル右の小さい” +” クリック
その2 F6 でしあわせ
28
ワークスペース:アニメーションモード
その3 キーフレームを打つ
29
タイムラインに+でキーフレームをうつ
オブジェクトを移動 -> 再生
その 4 実行する
30
ControlStoryboardAction
「ボタンが」「 Click されたら」「 Storyboard1 を」「再生する」
Build ! Build!
31
その5 EasingFunction
32
Flash でいうTweenerどぅいーーーーーんとかそんな感じ
キーフレームを選択好きな動きを選択
Build ! Build ! Build !
33
その 6 相対アニメーション
34
0秒で打ったキーフレームを消してみよう
Build !(ry
35
画面遷移
36
画面遷移
37
目的:画面遷移の方法を覚える
UI に関する所は XAML で出来るようになろう
その1アイテム追加
38
プロジェクトパネルで、
プロジェクトを右クリック
新しいアイテムの追加Windows Phone ページ
その2遷移
39
ボタンを右クリック移動先移動ページを選択
Buil (ry
40
まとめ
41
オブジェクトパネルを見ると、[NavigateToPageAction] が追加されています。これもビヘイビアです。簡単です。
ただしこの場合 GET 引数などをつけることができません。必要な場合は C# で。
バインディング
42
バインディング
43
目的: Blend でバインドする手法を覚える
データやプロパティをオブジェクト間で共有
相互に変更を加えたり、一方的に反映させたり。
その1スライダー使う
44
コントロールからスライダを選択プレビューにドロップスライダーの値の範囲を指定
その2画像を使う
45
プロジェクトにある画像をドロップ
その 3 画像を使う
46
HorizonAlignment = StretchVerticalAlignment = StretchMargin = 0Stretch = UnformToFill
その4バインディング
47
画像のプロパティ width 横にある小さい□をクリック要素のプロパティをバインディングを選択スライダークリックValue
Height も同じように
Bu (ry
48
その5バインディング
49
データバインドからも階層をたどって同じことができます。
まとめ
50
バインディングを使えば、「コントロール A がこの状態のとき」「コントロール B をこうする」ということがノンコーディングで
もちろん全部 XAML なので、コード側に迷惑をかけません。
SampleDataSet
51
SampleDataSet
52
目的:「必要なデータがない状態でのデザインを考える」手法を身につける
Blend で標準で用意されている DataSet
名前とか数字とか郵便番号とかいろいろ
その1データを作る
53
データパネルから [ 新しいサンプルデータ ] を作成
Collection を操作して降ってくる予定のデータを定義
その1データを作る
54
データパネルから [ 新しいサンプルデータ ] を作成
Collection を操作して降ってくる予定のデータを定義
その2データを表示
55
Collection をドロップ
B (ry
56
まとめ
57
こういうデータが降ってくる予定なのでSampleDataSet を使って、こんなふうにデザインする。なんて使い方をします。
でもって、静的な XML を表示したいときは・・・・
XML からDataSet を作成
58
XML から DataSet
59
目的: XML で用意されたデータを扱う
たとえばついったーhttp://twitter.com/statuses/public_timeline.xml
その1データ作成
60
XML から新しいデータの作成
http://twitter.com/statuses/public_timeline.xml
その 2 画面作成
61
Text をドロップListBox 右クリック追加テンプレートの編集生成されたアイテムの編集現在のテンプレートを編集
その3 画面作成
62
StackPanel にscreen_name をドロップImage コントロールを作成Profile_image_url をドロップ
その4 StackPanel で
63
レイアウトを整える。
Bu (ry
64
まとめ
65
サンプルデータ作成時に XML をロードして取得ネットワークから取得しても更新されないので注意
ただ、データを XML で作ってそのまま表示するのは楽だし、実データのサンプルだとより再現性が高い
今日のまとめ
66
今日のまとめ
67
今日はビヘイビア、アニメーション、バインディング、データを使ったデザインについて学びました。
今日のまとめ
68
Blend で出来ることは XAML で出来ること
ただ、みなさんは C# だけでなく XAMLのコードすら見ていません。
それだけ Blend は GUI での画面作成において優秀なツールです。
今日のまとめ
69
帰ったら今日作ったサンプルが、XAML でどう記述されているか、読み解いてみると更に理解が深まります。
ここがだいじ
70
ブログの 0 からはじめる Expression Blend 再入門を読むといいよ!PV まわして!
Blend で分からないところがあれば@mitsuba_tan まで
おつかれさまでし
た。