1. はじめてのBlend 蜜葉優

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

3. ハンズオン ビヘイビア Hello Blend アニメーション ページ遷移 バインディング SampleDataSet SampleDataSetでUIデザイン 実際に利用する 2

4. Blendの使い方 3

5. Blendの使い方 目的：基本的な使い方を覚えよう コントロールの置き方 各パネルの使い方を覚える 4

6. コントロール集 5

7. オブジェクトパネル 6 画面の構成の一覧 オブジェクトの選択 ストーリーボードもここから

8. タイムライン 7 ここでキーフレーム打ってアニメーションします。

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

10. プロパティその２ 9 オブジェクトパネルで選択したコントロールにイベントつける

11. デバイス 10 プレビューでデバイスの方向変えたり テーマカラー変えたり 実機実行か エミュ実行か選択

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

13. かんたんですね！ 12

14. Hello World 13

15. Hello world 目的：とりあえずここから まずは触ってみましょう 14

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

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

18. その１ UI 17 TextBlockを配置します。 フォントサイズをプロパティパネルから大きくします。

19. その2 UI 18 ボタンを配置します

20. その３ビヘイビア 19 コントロールからChangePropatyActionをボタンにドラッグ

21. その4 ビヘイビアの挙動 20 ChangePropatyActionを選択 プロパティを変更

22. Build！ 21

23. まとめ 22 ビヘイビアはちっちゃいコードのあつまり 「だれが」「どうされたら」「だれの」「なにを」「どうする」 今回はプロパティを変えるビヘイビア 「ボタンが」「クリックされたら」「textblockの」「textプロパティを」「Blendに変える」

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

25. アニメーションしよう 24

26. アニメーションしよう 目的：キーフレームの扱いを覚える いろんなプロパティをさわってみる 25

27. その１Storyboard 26 オブジェクトパネル右の小さい”+”クリック

28. その２ F6でしあわせ 27 ワークスペース：アニメーションモード

29. その３キーフレームを打つ 28 タイムラインに＋でキーフレームをうつ オブジェクトを移動 -> 再生

30. その4 実行する 29 ControlStoryboardAction 「ボタンが」「Clickされたら」「Storyboard1を」「再生する」

31. Build！Build! 30

32. その５EasingFunction 31 FlashでいうTweener どぅいーーーーーんとかそんな感じ キーフレームを選択 好きな動きを選択

33. Build！Build！Build！ 32

34. その6 相対アニメーション 33 ０秒で打ったキーフレームを消してみよう

35. Build！（ｒｙ 34

36. 画面遷移 35

37. 画面遷移 36 目的：画面遷移の方法を覚える UIに関する所はXAMLで出来るようになろう

38. その１アイテム追加 37 プロジェクトパネルで、プロジェクトを右クリック 新しいアイテムの追加 Windows Phoneページ

39. その２遷移 38 ボタンを右クリック 移動先 移動ページを選択

40. Buil（ｒｙ 39

41. まとめ 40 オブジェクトパネルを見ると、[NavigateToPageAction]が追加されています。 これもビヘイビアです。 簡単です。 ただしこの場合GET引数などをつけることができません。 必要な場合はC#で。

42. バインディング 41

43. バインディング 42 目的：Blendでバインドする手法を覚える データやプロパティをオブジェクト間で共有 相互に変更を加えたり、一方的に反映させたり。

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

45. その２画像を使う 44 プロジェクトにある画像をドロップ

46. その3画像を使う 45 HorizonAlignment= Stretch VerticalAlignment = Stretch Margin = 0 Stretch = UnformToFill

47. その４バインディング 46 画像のプロパティwidth横にある小さい□をクリック 要素のプロパティをバインディングを選択 スライダークリック Value Heightも同じように

48. Bu（ｒｙ 47

49. その５バインディング 48 データバインドからも階層をたどって同じことができます。

50. まとめ 49 バインディングを使えば、「コントロールAがこの状態のとき」「コントロールBをこうする」ということがノンコーディングで もちろん全部XAMLなので、コード側に迷惑をかけません。

51. SampleDataSet 50

52. SampleDataSet 51 目的：「必要なデータがない状態でのデザインを考える」手法を身につける Blendで標準で用意されているDataSet 名前とか数字とか郵便番号とかいろいろ

53. その１データを作る 52 データパネルから[新しいサンプルデータ]を作成 Collectionを操作して降ってくる予定のデータを定義

54. その１データを作る 53 データパネルから[新しいサンプルデータ]を作成 Collectionを操作して降ってくる予定のデータを定義

55. その２データを表示 54 Collectionをドロップ

56. B（ｒｙ 55

57. まとめ 56 こういうデータが降ってくる予定なのでSampleDataSetを使って、こんなふうにデザインする。なんて使い方をします。 でもって、静的なXMLを表示したいときは・・・・

58. XMLからDataSetを作成 57

59. XMLからDataSet 58 目的：XMLで用意されたデータを扱う たとえばついったー http://twitter.com/statuses/public_timeline.xml

60. その１データ作成 59 XMLから新しいデータの作成 http://twitter.com/statuses/public_timeline.xml

61. その2 画面作成 60 Textをドロップ ListBox右クリック 追加テンプレートの編集 生成されたアイテムの編集 現在のテンプレートを編集

62. その３画面作成 61 StackPanelに screen_nameをドロップ Imageコントロールを作成 Profile_image_urlをドロップ

63. その４StackPanelで 62 レイアウトを整える。

64. Bu（ｒｙ 63

65. まとめ 64 サンプルデータ作成時にXMLをロードして取得 ネットワークから取得しても更新されないので注意 ただ、データをXMLで作ってそのまま表示するのは楽だし、実データのサンプルだとより再現性が高い

66. 今日のまとめ 65

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

68. 今日のまとめ 67 Blendで出来ることはXAMLで出来ること ただ、みなさんはC#だけでなくXAMLのコードすら見ていません。 それだけBlendはGUIでの画面作成において優秀なツールです。

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

70. ここがだいじ 69 ブログの0からはじめるExpression Blend再入門を読むといいよ！PVまわして！ Blendで分からないところがあれば@mitsuba_tanまで

71. おつかれさまでした。