wp勉強会blend

はじめての Blend蜜葉 優

アジェンダ

Blend の使い方コントロールを使う オブジェクトパネルプロパティパネルイベントパネル

2

ハンズオンビヘイビア

Hello Blendアニメーションページ遷移

バインディング

SampleDataSetSampleDataSet で UI デザイン実際に利用する 3

Blend の使い方

4

Blend の使い方

目的：基本的な使い方を覚えよう

コントロールの置き方各パネルの使い方を覚える

5

コントロール集

6

オブジェクトパネル

7

画面の構成の一覧

オブジェクトの選択

ストーリーボードもここから

タイムライン

8

ここでキーフレーム打ってアニメーションします。

プロパティ

9

オブジェクトパネルで選択したコントロールのプロパティを変える

プロパティその２

10

オブジェクトパネルで選択したコントロールにイベントつける

デバイス

11

プレビューでデバイスの方向変えたり

テーマカラー変えたり

実機実行かエミュ実行か選択

とりあえずこんだけ触れたらつかえます。

12

かんたんですね！

13

Hello World

14

Hello world

目的：とりあえずここから

まずは触ってみましょう

15

きよくらさんは C# でやりましたね

16

ちょっと見かけは違いますが、ノンコーディングでやってみましょう。

17

その１ UI

18

TextBlockを配置します。フォントサイズをプロパティパネルから大きくします。

その 2 UI

19

ボタンを配置します

その３ ビヘイビア

20

コントロールから ChangePropatyAction をボタンにドラッグ

その 4 ビヘイビアの挙動

21

ChangePropatyActionを選択

プロパティを変更

Build ！

22

まとめ

23

ビヘイビアはちっちゃいコードのあつまり「だれが」「どうされたら」「だれの」「なにを」「どうする」

今回はプロパティを変えるビヘイビア「ボタンが」「クリックされたら」「 textblock の」「 text プロパティを」「 Blend に変える」

まとめ

24

ほかにも、

ステートかえたり、マウスでドラッグできるようにしたり音鳴らしたりオブジェクト削除したりアニメーション実行したりページ遷移したり

アニメーションしよう

25

アニメーションしよう

目的：キーフレームの扱いを覚える

いろんなプロパティをさわってみる

26

その１ Storyboard

27

オブジェクトパネル右の小さい” +” クリック

その２ F6 でしあわせ

28

ワークスペース：アニメーションモード

その３ キーフレームを打つ

29

タイムラインに＋でキーフレームをうつ

オブジェクトを移動 -> 再生

その 4 実行する

30

ControlStoryboardAction

「ボタンが」「 Click されたら」「 Storyboard1 を」「再生する」

Build ！ Build!

31

その５ EasingFunction

32

Flash でいうTweenerどぅいーーーーーんとかそんな感じ

キーフレームを選択好きな動きを選択

Build ！ Build ！ Build ！

33

その 6 相対アニメーション

34

０秒で打ったキーフレームを消してみよう

Build ！（ｒｙ

35

画面遷移

36

画面遷移

37

目的：画面遷移の方法を覚える

UI に関する所は XAML で出来るようになろう

その１アイテム追加

38

プロジェクトパネルで、

プロジェクトを右クリック

新しいアイテムの追加Windows Phone ページ

その２遷移

39

ボタンを右クリック移動先移動ページを選択

Buil （ｒｙ

40

まとめ

41

オブジェクトパネルを見ると、[NavigateToPageAction] が追加されています。これもビヘイビアです。簡単です。

ただしこの場合 GET 引数などをつけることができません。必要な場合は C# で。

バインディング

42

バインディング

43

目的： Blend でバインドする手法を覚える

データやプロパティをオブジェクト間で共有

相互に変更を加えたり、一方的に反映させたり。

その１スライダー使う

44

コントロールからスライダを選択プレビューにドロップスライダーの値の範囲を指定　

その２画像を使う

45

プロジェクトにある画像をドロップ　

その 3 画像を使う

46

HorizonAlignment = StretchVerticalAlignment = StretchMargin = 0Stretch = UnformToFill

その４バインディング

47

画像のプロパティ width 横にある小さい□をクリック要素のプロパティをバインディングを選択スライダークリックValue

Height も同じように

Bu （ｒｙ

48

その５バインディング

49

データバインドからも階層をたどって同じことができます。

まとめ

50

バインディングを使えば、「コントロール A がこの状態のとき」「コントロール B をこうする」ということがノンコーディングで

もちろん全部 XAML なので、コード側に迷惑をかけません。

SampleDataSet

51

SampleDataSet

52

目的：「必要なデータがない状態でのデザインを考える」手法を身につける

Blend で標準で用意されている DataSet

名前とか数字とか郵便番号とかいろいろ

その１データを作る

53

データパネルから [ 新しいサンプルデータ ] を作成

Collection を操作して降ってくる予定のデータを定義

その１データを作る

54

データパネルから [ 新しいサンプルデータ ] を作成

Collection を操作して降ってくる予定のデータを定義

その２データを表示

55

Collection をドロップ

B （ｒｙ

56

まとめ

57

こういうデータが降ってくる予定なのでSampleDataSet を使って、こんなふうにデザインする。なんて使い方をします。

でもって、静的な XML を表示したいときは・・・・

XML からDataSet を作成

58

XML から DataSet

59

目的： XML で用意されたデータを扱う

たとえばついったーhttp://twitter.com/statuses/public_timeline.xml

その１データ作成

60

XML から新しいデータの作成

http://twitter.com/statuses/public_timeline.xml

その 2 画面作成

61

Text をドロップListBox 右クリック追加テンプレートの編集生成されたアイテムの編集現在のテンプレートを編集

その３ 画面作成

62

StackPanel にscreen_name をドロップImage コントロールを作成Profile_image_url をドロップ

その４ StackPanel で

63

レイアウトを整える。

Bu （ｒｙ

64

まとめ

65

サンプルデータ作成時に XML をロードして取得ネットワークから取得しても更新されないので注意

ただ、データを XML で作ってそのまま表示するのは楽だし、実データのサンプルだとより再現性が高い

今日のまとめ

66

今日のまとめ

67

今日はビヘイビア、アニメーション、バインディング、データを使ったデザインについて学びました。

今日のまとめ

68

Blend で出来ることは XAML で出来ること

ただ、みなさんは C# だけでなく XAMLのコードすら見ていません。

それだけ Blend は GUI での画面作成において優秀なツールです。

今日のまとめ

69

帰ったら今日作ったサンプルが、XAML でどう記述されているか、読み解いてみると更に理解が深まります。

ここがだいじ

70

ブログの 0 からはじめる Expression Blend 再入門を読むといいよ！PV まわして！

Blend で分からないところがあれば@mitsuba_tan まで

おつかれさまでし

た。