普段こういうこと気にしながら、こんな风に作ってます。
Download as PPTX, PDF2 likes1,476 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)
More Related Content
What's hot (20)
Similar to 普段こういうこと気にしながら、こんな风に作ってます。 (20)
More from c-mitsuba (20)
Recently uploaded (11)
普段こういうこと気にしながら、こんな风に作ってます。
- 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. ? 鲍滨のための準备体操 ? コールドモックを作ろう ? べたXAMLのすすめ ? d:DataContext ? ConverterとProperty agenda
- 14. 鲍滨のための準备体操
- 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. ベタ齿础惭尝のすすめ
- 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. ? 鲍滨のための準备体操 ? コールドモックを作ろう ? べたXAMLのすすめ ? d:DataContext ? ConverterとProperty agenda
- 70. ? 鲍滨のための準备体操 ? コールドモックを作ろう <-SampleDataSetでOK ? べたXAMLのすすめ <-SampleDataSetとDataStoreでOK ? d:DataContext <-SampleDataSetでOK ? ConverterとProperty <-BehaviorでOK agenda
- 72. ご清聴ありがとうございましたー
- 73. ? みつばてきワークフロー – スケッチ – デザイン – 使いやすさ確認用モックプロジェクト作成 – 実プロジェクト作成 – タイルとかスプラッシュ作る – とりあえずぜんぶXAMLで見えるようにする – XAMLに必要なクラス作る – DataContext作ってデータ取ってくる – ちょっといいかんじにアニメーションつける – 完成！ まとめ