Wp勉強会blend

1,233 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,233
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wp勉強会blend

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

×