Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Uwpでみるxaml入門

1,777 views

Published on

2016年7月の.NETラボ勉強会スライド

Published in: Technology
  • Be the first to comment

Uwpでみるxaml入門

  1. 1. ちょっとだけ、昔話 アプリケーションの画面は どうやって定義していましたか?
  2. 2. 色々あって 最近はあまり使われなくなりましたが Webで動きのある画面を作ろうと思えば、 Flashで、という時代がありました。
  3. 3. いや・・・言いたいことは色々ありますが、 画面定義の話に戻りましょう。
  4. 4. タイムラインという フレーム毎に画面を定義していました。 動画編集の考え方に近いアプローチ
  5. 5. 当時のFlashは アニメーション作成用途が強かったので、 アニメーションを作成しやすい方法。
  6. 6. 画面定義をテキストで表現できなかったので、 差分が取れない。 ・・・バイナリを解析できれば差分も・・・
  7. 7. 余談:AS2時代は それぞれのオブジェクトに スクリプトを記述できたので、 作り方によっては更にカオスなことに・・・
  8. 8. その後、AS3や、 Adobe Flexの登場で この辺が変化していくのですが、 ひとまず置いておいて・・・
  9. 9. this.textBox1 = new System.Windows.Forms.TextBox(); this.SuspendLayout(); // // button1 // this.button1.Location = new System.Drawing.Point(33, 109); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(75, 23);
  10. 10. プログラムコードを 解析してデザイナーに表示。 メリット:差分が見れる デメリット:コードからデザインは把握し辛い・・・
  11. 11. ご存知、XMLタグで画面を定義する方法。 XAMLもこの発想。 Flashにもmxmlというのがあった・・・ メリット:差分が取れる :プログラミングの知識無しに扱える デメリット:アニメーションなど複雑なものは 定義できない。
  12. 12. デメリットと書いたが、 アニメーションなどを定義できないことで、 逆にシンプルで良い気がする。 デザイナーにもプログラマーにも触れるという ラインのバラスを上手く取っている?
  13. 13. XAML登場!! スライド15枚めにして (Zガンダムよりは早い当社比) XMLで画面を定義する方式。 アニメーションや、 コントロールの雛形も定義可能 この辺は良し悪し
  14. 14. タグで定義できるという点では HTMLに近いが、 どちらかというとWindows Formsの コード→デザイナ を発展させた コード→XAML→デザイナ という構造(後述)。
  15. 15. デザイナーとプログラマーの 分業が成立する前提で見るか? デザイナーが主に使うのか? プログラマーが主に使うのか?
  16. 16. 分業できていることが多いのはHTML デザイナーメインなFlashタイムライン プログラマーメインなWindows Forms
  17. 17. eXtensible Application Markup Language Application? Avalon?
  18. 18. <Button /> <Button></Button>
  19. 19. <ButtonText=“プロパティ”/>
  20. 20. <Button>ボタン</Button> <ButtonText=“ボタン” /> コレはイコール。 じゃあ入れ子にした部分は、Textプロパティに該当?
  21. 21. <Button><Image src=“hoge.jpg”></Button> これは? 入れ子の部分はContentPropertyとして 扱われる
  22. 22. // Buttonの親クラスの記述 [Composable(typeof(IContentControlFactory), CompositionT [ContentProperty(Name = "Content")] [MarshalingBehavior(MarshalingType.Agile)] // Objectを受け入れる。結構広い間口 public System.Object Content { get; set; }
  23. 23. <Image Source="Assets/LockScreenLogo.png"/> これUri型なのに、文字列で指定できるの? 型コンバーターという仕組みが、 いい感じに変換してくれる。
  24. 24. XAMLを拡張する記法 基本的に{}に囲まれたやつ Text="{x:BindViewModel.Name, Mode=TwoWay}"
  25. 25. XAMLを拡張する記法 基本的に{}に囲まれたやつ Text="{x:BindViewModel.Name, Mode=TwoWay}“ プラットフォーム毎に異なる仕様だが、 基本的に同じ機能があることが多い。 上のx:BindはUWPから追加されたもの。
  26. 26. 画面を定義するXAMLには コードビハインドとしてロジックを記述するための プログラムファイルがある。 例:MainPage.xamlとMainPage.xaml.cs コードビハインドの中間 MainPage.g.cs MainPage.g.i.cs
  27. 27. XAMLが元々、プログラムコードを、 見た目(XAML)とロジック(プログラムコード) に分離するためのものであるため、 プログラムの画面を定義する部分を、 XML形式で表現できるようにしたもの。 この辺がHTMLとの大きな違い。
  28. 28. <ButtonText= “hoge”/> 以下は等価 Button btn = new Button(); btn.Content = "hoge"; mainGrid.Children.Add(btn);
  29. 29. XAML自体は、こんな感じで、 シンプル。 XAMLを使って コントロール、アニメーション、3D…など 様々なものを表現するので複雑に見える。
  30. 30. プロパティで変えれるパターン テンプレート、スタイルで変えるパターン (こっちがちょっとわかりづらい) ListViewの場合 ListView自体のテンプレート ListViewで繰り返し表示されるデータのテンプレート
  31. 31. リスト表示されるアイテムのテンプレートListView自体のテンプレート
  32. 32. ボタンの場合 →テンプレートの編集
  33. 33. イベントハンドラー XAMLからコードビハインドのメソッドを呼び出す
  34. 34. プログラミングのプロパティと XAMLのプロパティを紐付ける 疎結合 This.textbox.text = “ほげ”; が不要になる。 XAMLのプロパティ同士も紐付けれる
  35. 35. デザインに必要なら、 条件分岐のような判定もできるようにする。 <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers>
  36. 36. アニメーションもXAMLで定義可能 編集はタイムライン方式(Adobe Flashもそう) アニメーションもXAMLで表現
  37. 37. ・・・まぁ、読むのも難しいし、手打ちだと書けないよね・・・ <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransf <EasingDoubleKeyFrame KeyTime="0"Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:1"Value="208"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransf <EasingDoubleKeyFrame KeyTime="0"Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:1"Value="-156"/> </DoubleAnimationUsingKeyFrames> </Storyboard>
  38. 38. 色々なことができるマークアップ これまでのUI表現の歴史をうまく取り込んでいる

×