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.

XAML入門

13,002 views

Published on

JXUGC#22で発表したXAML入門のスライドです

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

XAML入門

  1. 1. XAML⼊⾨ 2017/01/28 JXUGC #22 最新事例&お前のアプリを説明してもらおうの会 ⼤⽥ ⼀希
  2. 2. ⾃⼰紹介 • Name • ⼤⽥ ⼀希(かずき) • Twitter • @okazuki • 仕事 • 都内でSIer • Blog • かずきのBlog@hatena http://blog.okazuki.jp/ • OSS • ReactiveProperty https://github.com/runceel/ReactiveProperty • その他 • Microsoft MVP for Windows Development
  3. 3. 最近書いたもの • かずきのXamarin.Forms⼊⾨ • SlideShare http://www.slideshare.net/okazuki0130/xamarinforms-70553057 • Kindle https://www.amazon.co.jp/dp/B01N7NI08L
  4. 4. お約束事項 • 掲載内容は個⼈の⾒解であり、所属する企業を代表するもので はありません。
  5. 5. 今⽇のゴール • なんとなくXAMLを書くから理解して書いてもらう
  6. 6. XAMLの歴史
  7. 7. Windows Presentation Foundation • .NET Framework 3.0で追加されたGUIフレームワーク • 2006年11⽉リリース • クラシックデスクトップアプリケーションを作るための現在の デファクトスタンダード(だと信じてる)
  8. 8. XAML WPFの画⾯記述⾔語として登場
  9. 9. 流れ WPF Silverlight Windows Phone / Windows store app UWP / Xamarin.Forms
  10. 10. XAMLとは
  11. 11. XAML(ザムル) eXtensible Application Markup Language
  12. 12. XAML UI記述特化⾔語ではない
  13. 13. XAML オブジェクトのインスタンスを 組み⽴てるための⾔語
  14. 14. XAML インスタンスを組み⽴てる???
  15. 15. 例えばこんなクラス class Person { public string Name { get; set; } public int Age { get; set; } public List<Person> Children { get; } = new List<Person>(); }
  16. 16. インスタンスを組み⽴てる new Person { Name = “Tanaka”, Age = 10, Children = { new Person { Name = “Kimura”, Age = 12 }, new Person { Name = “Ohta”, Age = 13 }, } };
  17. 17. XAMLとは • これをするための⾔語 new Person { Name = “Tanaka”, Age = 10, Children = { new Person { Name = “Kimura”, Age = 12 }, new Person { Name = “Ohta”, Age = 13 }, } };
  18. 18. XAMLとC#の対⽐ • XML名前空間 • C#の名前空間 • XMLのタグ名 • C#のクラス名 • XMLの属性 • C#のプロパティ名
  19. 19. つまり… using Sample; new Person { Name = “Tanaka”, Age = 12, }; <Person xmlns=“clr-namespace:Sample” Name=“Tanaka” Age=“12” />
  20. 20. もうちょっとXAML
  21. 21. プロパティ要素構⽂ • タグでプロパティを記述する構⽂ <Person Name=“Tanaka” /> <Person> <Person.Name>Tanaka</Person.Name> </Person>
  22. 22. こういうオブジェクトをマークアップできる class Person { public string Name { get; set; } public Person Child { get; set; } }
  23. 23. こうなる <Person Name=“Tanaka”> <Person.Child> <Person Name=“Kimura” /> </Person.Child> </Person>
  24. 24. コレクションの構⽂ コレクションを⾃然にマークアップできる
  25. 25. 例えばこんなクラスを class Person { public string Name { get; set; } public List<Person> Children { get; } = new List<Person>(); }
  26. 26. こうマークアップできる <Person Name=“Tanaka”> <Person.Children> <Person Name=“Kimura” /> <Person Name=“Homuhomu” /> <Person Name=“Ohta” /> </Person.Children> </Person> new Person { Name = “Tanaka”, Children = { new Person { … }, new Person { … }, new Person { … }, } };
  27. 27. XAML コンテンツ プロパティ • 1つだけプロパティ名を省略して 書くことができるプロパティを 指定できる
  28. 28. XAML コンテンツ プロパティ • ContentPropertyAttributeでクラス単位に指定 [ContentProperty(“Child”)] class Person { public string Name { get; set; } public Person Child { get; set; } }
  29. 29. XAML コンテンツ プロパティ <Person Name=“Tanaka”> <Person.Child> <Person Name=“Ohta” /> </Person.Child> </Person> <Person Name=“Tanaka”> <Person Name=“Ohta” /> </Person>
  30. 30. コレクション構⽂と組み合わせると… [ContentProperty(“Children”)] class Person { public string Name { get; set; } public List<Person> Children { get; } = new List<Person>(); }
  31. 31. こうなる <Person Name=“Tanaka”> <Person Name=“Kimura” /> <Person Name=“Homuhomu” /> <Person Name=“Ohta” /> </Person>
  32. 32. 添付プロパティ 他のクラスのプロパティを設定できる構⽂
  33. 33. 添付プロパティ <Button Text=“Hello world” Grid.Row=“2” Grid.Column=“3” /> var b = new Button { Text = “Hello world” }; Grid.SetRow(b, 2); Grid.SetColumn(b, 3);
  34. 34. マークアップ拡張 • 以下のようなものを簡単に書く⽅法 • XAMLで正直に書くとめんどくさいもの • XAMLでは書けないようなもの
  35. 35. 例:StaticResource • StaticResourceは、Resourcesというプロパティに定義された 値をひっぱってくる機能 <Label.Style> <x:StaticResource Key=“hogeStyle” /> </Label.Style> Style=“{StaticResource hogeStyle}”
  36. 36. まとめ
  37. 37. まとめ • XAMLはオブジェクトを組み⽴てるための⾔語 • 対応付けを覚えよう • タグ名→クラス名 • XML名前空間→C#の名前空間 • 属性→プロパティ • 属性名.プロパティ名という特殊な書き⽅もある • 後付けプロパティが出来る添付プロパティがある • コンテンツプロパティを把握しよう • マークアップ拡張は簡単に書けないものを簡単に書く仕組み
  38. 38. まとめ XAMLを理解して良いXamarin.Formsライフを! (WPFやUWPも宜しくね)

×