普段こういうこと気にしながら、こんな風に作ってます。
Download as PPTX, PDF2 likes1,477 views
Windows Store Apps、普段こういうこと気にしながら、こんな風に作ってます。
![• H.N. :蜜葉 優 [mitsuba yu]
• Expression Blendが好きな人
• 最近はカメラが趣味
• twitter:@mitsuba_tan
• Community:Windows Phone Arch
• blog:http://d.hatena.ne.jp/c-mitsuba
profile](https://image.slidesharecdn.com/metdevyukata-130615013151-phpapp01/85/-2-320.jpg)
普段こういうこと気にしながら、こんな風に作ってます。
- 2. • H.N. :蜜葉 優 [mitsuba yu] • Expression Blendが好きな人 • 最近はカメラが趣味 • twitter:@mitsuba_tan • Community:Windows Phone Arch • blog:http://d.hatena.ne.jp/c-mitsuba profile
- 3. • プログラマにはデザイナっていう人 • デザイナにはプログラマっていう人 • XAMLが好きな人 • C#はよくわかんない。 • ロジックとか興味ないけど • 見た目は綺麗な方がいい profile
- 6. 今日のお題は
- 9. なんで？
- 10. 答えはワークフローにあって
- 12. そんなおはなしです。
- 13. • UIのための準備体操 • コールドモックを作ろう • べたXAMLのすすめ • d:DataContext • ConverterとProperty agenda
- 14. UIのための準備体操
- 15. • UIがないとアプリがつくれません。 • 過去のMetro UI • プリミティブな図形 • はっきりした面と色 • 適切なマージンなどなど • 基本的にはテンプレート通りに作れば問題ない Microsoft Style UI
- 18. • スケッチを作れば、いまからどんなアプリ を作っていくかがハッキリ見える。 • この部分はこのコントロールで作れそうと か、ここはこういう風にGridを切ろうとか が見えてくる。 UIについて
- 19. • いきなりXAMLを書き出すと、Gridの構造 とか実験用Styleとかいっぱいできて、わ けわからなくなりがち。 • ->XAMLが汚くなる。 • そうならないための準備体操 スケッチ大事
- 20. • スケッチが出来たらデザインをします。 • デザインにはPowerPoint Storyboardとか Psdテンプレートを使います。 デザイン
- 23. デザインできた！
- 24. 開発しよう！
- 25. いやそのまえに。
- 28. ・・・。
- 29. コールドモックを作ろう
- 31. • Psdで作ったデザインの中に – ListViewがあれば、ListViewItemの画像を切り出 す。 – タイルグループは、タイルグループで画像にす る – 背景とかヘッダーはそのままつかう 作り方
- 36. • 安易にプロジェクトを作ってはいけません。 • ここでようやくVisual Studioでモックプロ ジェクトを作成します。 作り方
- 38. Grid
- 47. ベタXAMLのすすめ
- 48. • じゃあクラス設計とか始めようとかなるか もしれないけど。 • 悩む時間がもったいないので、べたべたで XAMLを書いていきます。 • というか、さらさらとデータ周りが書けるほどC#わからへん。。 べたXAMLのすす め
- 50. • ListViewなど、繰り返しが必要なコ ントロールは、１つベタで書いて いきます。 • ベタで書いたやつをコピーして、 ItemsTemplateにします。 • このとき、TextBlockとかは静的な 文字列でOK まず見える化
- 51. • あとはListViewに適当にRectとかダ ミーオブジェクトをおいていく。 • ItemsTemplateが定義されているか ら、子要素の数だけItemsTemplate のコントロールが生成される。 • Rectをおいても四角形は表示されな い。 まず見える化 ItemsTemplateを作れば、実際はRectでもこんな風に表示される->
- 52. d:DataContext
- 53. • ここまでできると実データを表示して、ア プリのレイアウトが崩れないか、綺麗に見 えるか確認したくなる。 • とりあえず表示のためにつくったRect（ダ ミーオブジェクト）も削除したい。 • やっとBindingの出番ですね。 d:DataContext
- 54. • d:DataContextはデザインビューでのみ実行 されるDataContext • 実際にアプリを実行したときとは違うデザ イン用のDataContextをデザインビューで表 示できる。 • これがないと画面になにも表示されない。 • （そのためにダミーをおいてた） d:DataContext
- 55. • d:DataContextはデザインビューでのみ実行 されるDataContext • 実際にアプリを実行したときとは違うデザ イン用のDataContextをデザインビューで表 示できる。 • これがないと画面になにも表示されない。 • （そのためにダミーをおいてた） • DataContextを書いてもらおう！ d:DataContext
- 56. public partial class ListViewDataContext { public ObservableCollection<ListViewItemsProperty> ListViewItemsProperties = new ObservableCollection<ListViewItemsProperty>(); public ListViewDataContext() { ListViewItemsProperties.Add(new ListViewItemsProperty() { Title = "ほげ１", ImageUri = new Uri("http://hoge.com/fuga.png") }); ListViewItemsProperties.Add(new ListViewItemsProperty() { Title = "ほげ２", ImageUri = new Uri("http://hoge.com/fuga.png") }); ListViewItemsProperties.Add(new ListViewItemsProperty() { Title = "ほげ３", ImageUri = new Uri("http://hoge.com/fuga.png") }); }
- 57. public ObservableCollection<ListViewItemsProperty> ListViewItemsProperties { get { return this.ListViewItemsProperties; } } } public class ListViewItemsProperty { public String Title { get; set; } public Uri ImageUri { get; set; } } }
- 59. ItemTemplateにBinding <Image Source=“{Binding ImageUri}” > <TextBlock Text=“{Binding Title}” >
- 60. 見た目は出来たら動かしたい
- 62. • 例えば、ToggleButtonがOnの時、Imageを表 示して、Offの時は表示しないとかしたい。 • Image.VisibilityにToggleButton.IsOnを BooleanToVisibilityConverter挟んでBindingす ればOK • ToggleButtonのイベントとかも極力かかな い！ • プロジェクトがConverterだらけになるのは 仕方が無いかなぁとおもってる。 ToggleButtonとVisibility
- 63. まとめ
- 64. • みつばてきワークフロー – スケッチ – デザイン – 使いやすさ確認用モックプロジェクト作成 – 実プロジェクト作成 – タイルとかスプラッシュ作る – とりあえずぜんぶXAMLで見えるようにする – XAMLに必要なクラス作る – DataContext作ってデータ取ってくる – ちょっといいかんじにアニメーションつける – 完成！ まとめ
- 66. • 実はべたXAMLはむだ！ – XAMLerとC#erが１対１でペアプロ出来る環境 であれば省略可能。あるいは全部出来る人 – デザイナとプログラマをセットにするのが一 番効率がいい • d:DataContextのおまじないはVSからも Blendからも自動生成できないから覚える しかない。。 まとめ
- 68. 実は。
- 69. • UIのための準備体操 • コールドモックを作ろう • べたXAMLのすすめ • d:DataContext • ConverterとProperty agenda
- 70. • UIのための準備体操 • コールドモックを作ろう <-SampleDataSetでOK • べたXAMLのすすめ <-SampleDataSetとDataStoreでOK • d:DataContext <-SampleDataSetでOK • ConverterとProperty <-BehaviorでOK agenda
- 72. ご清聴ありがとうございましたー
- 73. • みつばてきワークフロー – スケッチ – デザイン – 使いやすさ確認用モックプロジェクト作成 – 実プロジェクト作成 – タイルとかスプラッシュ作る – とりあえずぜんぶXAMLで見えるようにする – XAMLに必要なクラス作る – DataContext作ってデータ取ってくる – ちょっといいかんじにアニメーションつける – 完成！ まとめ