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

1. XAML⼊⾨
2017/01/28
JXUGC #22 最新事例＆お前のアプリを説明してもらおうの会
⼤⽥ ⼀希

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. 最近書いたもの
• かずきのXamarin.Forms⼊⾨
• SlideShare
http://www.slideshare.net/okazuki0130/xamarinforms-70553057
• Kindle
https://www.amazon.co.jp/dp/B01N7NI08L

4. お約束事項
• 掲載内容は個⼈の⾒解であり、所属する企業を代表するもので
はありません。

5. 今⽇のゴール
• なんとなくXAMLを書くから理解して書いてもらう

6. XAMLの歴史

7. Windows Presentation Foundation
• .NET Framework 3.0で追加されたGUIフレームワーク
• 2006年11⽉リリース
• クラシックデスクトップアプリケーションを作るための現在の
デファクトスタンダード（だと信じてる）

8. XAML
WPFの画⾯記述⾔語として登場

9. 流れ
WPF
Silverlight
Windows Phone
/ Windows
store app
UWP /
Xamarin.Forms

10. XAMLとは

11. XAML(ザムル）
eXtensible Application Markup Language

12. XAML
UI記述特化⾔語ではない

13. XAML
オブジェクトのインスタンスを
組み⽴てるための⾔語

14. XAML
インスタンスを組み⽴てる？？？

15. 例えばこんなクラス
class Person
{
public string Name { get; set; }
public int Age { get; set; }
public List<Person> Children { get; } = new List<Person>();
}

16. インスタンスを組み⽴てる
new Person
{
Name = “Tanaka”,
Age = 10,
Children =
{
new Person { Name = “Kimura”, Age = 12 },
new Person { Name = “Ohta”, Age = 13 },
}
};

17. XAMLとは
• これをするための⾔語
new Person
{
Name = “Tanaka”,
Age = 10,
Children =
{
new Person { Name = “Kimura”, Age = 12 },
new Person { Name = “Ohta”, Age = 13 },
}
};

18. XAMLとC#の対⽐
• XML名前空間
• C#の名前空間
• XMLのタグ名
• C#のクラス名
• XMLの属性
• C#のプロパティ名

19. つまり…
using Sample;
new Person
{
Name = “Tanaka”,
Age = 12,
};
<Person
xmlns=“clr-namespace:Sample”
Name=“Tanaka”
Age=“12” />

20. もうちょっとXAML

21. プロパティ要素構⽂
• タグでプロパティを記述する構⽂
<Person Name=“Tanaka” />
<Person>
<Person.Name>Tanaka</Person.Name>
</Person>

22. こういうオブジェクトをマークアップできる
class Person
{
public string Name { get; set; }
public Person Child { get; set; }
}

23. こうなる
<Person Name=“Tanaka”>
<Person.Child>
<Person Name=“Kimura” />
</Person.Child>
</Person>

24. コレクションの構⽂
コレクションを⾃然にマークアップできる

25. 例えばこんなクラスを
class Person
{
public string Name { get; set; }
public List<Person> Children { get; } = new List<Person>();
}

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. XAML コンテンツ プロパティ
• 1つだけプロパティ名を省略して
書くことができるプロパティを
指定できる

28. XAML コンテンツ プロパティ
• ContentPropertyAttributeでクラス単位に指定
[ContentProperty(“Child”)]
class Person
{
public string Name { get; set; }
public Person Child { get; set; }
}

29. XAML コンテンツ プロパティ
<Person Name=“Tanaka”>
<Person.Child>
<Person Name=“Ohta” />
</Person.Child>
</Person>
<Person Name=“Tanaka”>
<Person Name=“Ohta” />
</Person>

30. コレクション構⽂と組み合わせると…
[ContentProperty(“Children”)]
class Person
{
public string Name { get; set; }
public List<Person> Children { get; } = new List<Person>();
}

31. こうなる
<Person Name=“Tanaka”>
<Person Name=“Kimura” />
<Person Name=“Homuhomu” />
<Person Name=“Ohta” />
</Person>

32. 添付プロパティ
他のクラスのプロパティを設定できる構⽂

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. マークアップ拡張
• 以下のようなものを簡単に書く⽅法
• XAMLで正直に書くとめんどくさいもの
• XAMLでは書けないようなもの

35. 例：StaticResource
• StaticResourceは、Resourcesというプロパティに定義された
値をひっぱってくる機能
<Label.Style>
<x:StaticResource Key=“hogeStyle” />
</Label.Style>
Style=“{StaticResource hogeStyle}”

36. まとめ

37. まとめ
• XAMLはオブジェクトを組み⽴てるための⾔語
• 対応付けを覚えよう
• タグ名→クラス名
• XML名前空間→C#の名前空間
• 属性→プロパティ
• 属性名.プロパティ名という特殊な書き⽅もある
• 後付けプロパティが出来る添付プロパティがある
• コンテンツプロパティを把握しよう
• マークアップ拡張は簡単に書けないものを簡単に書く仕組み

38. まとめ
XAMLを理解して良いXamarin.Formsライフを！
（WPFやUWPも宜しくね）