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.

めとべや東京5_XAML

1,796 views

Published on

めとべや東京 #5で話したXAMLの話です。

Published in: Technology
  • Be the first to comment

めとべや東京5_XAML

  1. 1. XAML eXtensible Application Markup Language 2014/08/02 めとべや東京 #5 大田 一希
  2. 2. 自己紹介  名前 大田 一希(おおた かずき) HN:かずき  SNS Twitter: okazuki Facebook: 本名  Microsoft MVP for Windows Platform Development  仕事 WindowsでC++(WM_***…) まるでJavaのような言語  好き 犬
  3. 3. お約束事項  発表の内容は個人の見解であり、所属する企業を代表するものではあり ません。
  4. 4. 今日のゴール  “めと”な話しを聞く上で前提となるXAMLを知ってもらう
  5. 5. もくじ  XAML基礎  XAMLでマークアップするオブジェクト  マークアップ拡張  XAMLフレンドリーな設計  まとめ
  6. 6. 今回説明する主な範囲  Windows ストア アプリのXAML – WPF/Silverlight/WFは除きます  Windows ストア アプリのXAMLを書くときに押さえておきたいクラス群
  7. 7. XAML基礎
  8. 8. はじめに XAMLというかWPFのお話  いいとこどりしたプラットフォームを目指してつくられた – Web  柔軟なレイアウト(要素の合成)  テンプレート(ASP.NET WebForm) – デスクトップ  直観的なプログラミング – グラフィック  2D/3Dを同じプラットフォームで扱えるようにしたい  アニメーションも扱いたい – ドキュメント  文書も扱いたい  ↑を記述する言語 → XAML
  9. 9. XAMLの特徴  XMLベースの言語  階層構造のオブジェクトを組み立てるための宣言的な言語 <Page xmlns="http://schemas.microsoft.co m/winfx/2006/xaml/presentation"> <Grid> <Button /> <TextBlock /> <StackPanel> <TextBlock /> <ComboBox /> </StackPanel> </Grid> </Page> Page Grid Button TextBlock StackPanel TextBlock ComboBox
  10. 10. XAMLの基本的な文法  タグがクラス名  XML名前空間が名前空間  属性がプロパティ名(属性構文)  クラス名.プロパティ名というタグを使ってオブジェクト型のプロパティを表せる (プロパティ要素構文)
  11. 11. XAMLの基本的な文法  具体例 namespace XamlEdu { class Person { public string FirstName { get; set; } public string LastName { get; set; } public Person Parent { get; set; } } }
  12. 12. XAMLの基本的な文法  とりあえず以下のことを覚えておけばOK <Person /> new Person()
  13. 13. XAMLの基本的な文法 var p = new Person { FirstName = "Taro", LastName = "Tanaka", Parent = new Person { FirstName = "Jiro", LastName = "Tanaka" } } もう少し複雑な例
  14. 14. XAMLの基本的な文法 using XamlEdu; var p = new Person { FirstName = "Taro", LastName = "Tanaka", Parent = new Person { FirstName = "Jiro", LastName = "Tanaka" } } <Person xmlns="using:XamlEdu" FirstName="Taro" LastName="Tanaka"> <Person.Parent> <Person FirstName="Jiro" LastName="Tanaka" /> </Person.Parent> </Person>
  15. 15. XAMLの基本的な文法  クラスにContentProperty属性をつけることで、タグの直下に書いたもの を自動的にプロパティの値にできる  コレクションは、コレクションの要素のタグを連続していける  添付プロパティ
  16. 16. ContentProperty  クラスにContentProperty属性をつけることで、タグの直下に書いたもの を自動的にプロパティの値にできる [ContentProperty(Name="Parent")] class Person { public Person Parent { get; set; } } <Person xmlns="using:XamlEdu" <Person /> </Person> using XamlEdu; var p = new Person { Parent = new Person() }
  17. 17. コレクション構文  1つのプロパティに複数の値を設定してるように見える構文 class Person { private List<Person> children = new List<Person>(); public List<Person> Children { get { return this.children; } } }
  18. 18. コレクション構文  1つのプロパティに複数の値を設定してるように見える構文 <Person xmlns="using:XamlEdu"> <Person.Children> <Person /> <Person /> <Person /> <Person /> </Person.Children> </Person> var p = new Person(); p.Children.Add(new Person()); p.Children.Add(new Person()); p.Children.Add(new Person()); p.Children.Add(new Person());
  19. 19. 添付プロパティ  別クラスで定義されたプロパティを設定できる構文 – レイアウトに使われる  例:ボタンに対して、グリッドの1行3列目に表示する  以下のように記述する – プロパティの所持者(この場合Grid).プロパティ名 <Grid> <Button Grid.Row="1" Grid.Column="3" /> </Grid>
  20. 20. XAMLでマークアップするオブジェクト
  21. 21. 基本となるオブジェクト  DependencyObject – ほぼ全てのXAML名前空間のオブジェクトの親または先祖 – 依存プロパティ、添付プロパティなどの基本的な機能を提供する
  22. 22. 依存プロパティ  依存オブジェクト(DependencyObject)に定義できるプロパティ  他のプロパティが変更されたら変更できる能力を持つプロパティ  メタデータ経由のデフォルト値
  23. 23. 添付プロパティ  他のオブジェクトに設定できるプロパティ  添付プロパティの定義は依存プロパティじゃなくても大丈夫  添付プロパティを設定できるのはDependencyObjectを継承したクラス
  24. 24. DependencyObjectを継承する 代表的なオブジェクト
  25. 25. FrameworkElement  Bindingのサポート  水平方向/垂直方向の配置  幅・高さ  Resource – 色、スタイル、etc…
  26. 26. Control  コントロールの基本的な機能  ControlTemplateのサポート – コントロールの見た目を自由に定義できる機能 見た目 (テンプレート)動作
  27. 27. ContentControl  単一項目を表示するコントロール – Button – CheckBox – ScrollViewer  Contentプロパティを持つ – 表示ロジック  画面に表示可能なコントロールの場合はそのまま表示  ContentTemplateが設定されていたら、それに応じてデータを表示  データをToStringして表示
  28. 28. ItemsControl  複数項目を表示するコントロール – ListBox – ListView – GridView  ItemsSourceプロパティに設定したコレクションの要素を表示する あああああ いいいいいい うううううう ええええええ ItemsControlの1要素は 1つのContentControl
  29. 29. Panel  他のコントロールを複数配置するコントロール – StackPanel – Grid – Canvas  Childrenプロパティに設定したコントロールをレイアウトする
  30. 30. マークアップ拡張
  31. 31. StaticResource/ThemeResource  StaticResource – Resourceから値を取得する {StaticResource HogeHoge}  ThemeResource – テーマリソースから値を取得する(StaticResourceとほぼ同じ) – テーマが変わったときに動的に値が変わる (テーマはDark, Light, HighContrast)
  32. 32. Binding  依存プロパティと、プロパティの値の同期をとる仕組み 依存プロパティ (主に画面) ターゲット プロパティ (主に裏方) ソース Binding OneWay(デフォルト) TwoWay
  33. 33. Binding  依存プロパティと、プロパティの値の同期をとる仕組み 依存プロパティ (主に画面) ターゲット プロパティ (主に裏方) ソース Binding Converter (値の変換)
  34. 34. XAMLフレンドリーな設計
  35. 35. Bindingとテンプレートが超強力 見た目以外(C#) • データアクセス • ロジック • 変更通知 • etc… 見た目(XAML) • テンプレート • アニメーション • プレゼンテーションロ ジック • etc… ギ ャ ッ プ を 埋 め る 層 (C#) Binding 監視
  36. 36. まとめ
  37. 37. まとめ  XAMLは、XMLベースの言語  XAMLは、オブジェクトのツリー構造をマークアップする言語  XAMLで、マークアップするオブジェクト – DependencyObjectを頂点とするクラス群  Binding/テンプレート大事

×