めとべや東京5_XAML

XAML
eXtensible Application Markup Language
2014/08/02 めとべや東京 #5
大田一希

自己紹介
 名前
大田一希（おおたかずき）
HN：かずき
 SNS
Twitter: okazuki
Facebook: 本名
 Microsoft MVP for
Windows Platform Development
 仕事
WindowsでC++（WM_***…）
まるでJavaのような言語
 好き
犬

お約束事項
 発表の内容は個人の見解であり、所属する企業を代表するものではあり
ません。

今日のゴール
 “めと”な話しを聞く上で前提となるXAMLを知ってもらう

もくじ
 XAML基礎
 XAMLでマークアップするオブジェクト
 マークアップ拡張
 XAMLフレンドリーな設計
 まとめ

今回説明する主な範囲
 Windows ストアアプリのXAML
– WPF/Silverlight/WFは除きます
 Windows ストアアプリのXAMLを書くときに押さえておきたいクラス群

はじめに XAMLというかWPFのお話
 いいとこどりしたプラットフォームを目指してつくられた
– Web
 柔軟なレイアウト（要素の合成）
 テンプレート（ASP.NET WebForm)
– デスクトップ
 直観的なプログラミング
– グラフィック
 2D/3Dを同じプラットフォームで扱えるようにしたい
 アニメーションも扱いたい
– ドキュメント
 文書も扱いたい
 ↑を記述する言語 → XAML

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

XAMLの基本的な文法
 タグがクラス名
 XML名前空間が名前空間
 属性がプロパティ名（属性構文）
 クラス名.プロパティ名というタグを使ってオブジェクト型のプロパティを表せる
（プロパティ要素構文）

 具体例
namespace XamlEdu
{
class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public Person Parent { get; set; }
}
}

 とりあえず以下のことを覚えておけばOK
<Person /> new Person()

var p = new Person
{
FirstName = "Taro",
LastName = "Tanaka",
Parent = new Person
{
FirstName = "Jiro",
LastName = "Tanaka"
}
}
もう少し複雑な例

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>

 クラスにContentProperty属性をつけることで、タグの直下に書いたもの
を自動的にプロパティの値にできる
 コレクションは、コレクションの要素のタグを連続していける
 添付プロパティ

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()
}

コレクション構文
 1つのプロパティに複数の値を設定してるように見える構文
class Person
{
private List<Person> children = new List<Person>();
public List<Person> Children
{
get { return this.children; }
}
}

コレクション構文
 1つのプロパティに複数の値を設定してるように見える構文
<Person xmlns="using:XamlEdu">
<Person.Children>
<Person />
<Person />
<Person />
<Person />
</Person.Children>
</Person>
var p = new Person();
p.Children.Add(new Person());

添付プロパティ
 別クラスで定義されたプロパティを設定できる構文
– レイアウトに使われる
 例：ボタンに対して、グリッドの1行3列目に表示する
 以下のように記述する
– プロパティの所持者（この場合Grid）.プロパティ名
<Grid>
<Button Grid.Row="1" Grid.Column="3" />
</Grid>

XAMLでマークアップするオブジェクト

基本となるオブジェクト
 DependencyObject
– ほぼ全てのXAML名前空間のオブジェクトの親または先祖
– 依存プロパティ、添付プロパティなどの基本的な機能を提供する

依存プロパティ
 依存オブジェクト(DependencyObject)に定義できるプロパティ
 他のプロパティが変更されたら変更できる能力を持つプロパティ
 メタデータ経由のデフォルト値

添付プロパティ
 他のオブジェクトに設定できるプロパティ
 添付プロパティの定義は依存プロパティじゃなくても大丈夫
 添付プロパティを設定できるのはDependencyObjectを継承したクラス

DependencyObjectを継承する
代表的なオブジェクト

FrameworkElement
 Bindingのサポート
 水平方向/垂直方向の配置
 幅・高さ
 Resource
– 色、スタイル、etc…

Control
 コントロールの基本的な機能
 ControlTemplateのサポート
– コントロールの見た目を自由に定義できる機能
見た目
(テンプレート)動作

ContentControl
 単一項目を表示するコントロール
– Button
– CheckBox
– ScrollViewer
 Contentプロパティを持つ
– 表示ロジック
 画面に表示可能なコントロールの場合はそのまま表示
 ContentTemplateが設定されていたら、それに応じてデータを表示
 データをToStringして表示

ItemsControl
 複数項目を表示するコントロール
– ListBox
– ListView
– GridView
 ItemsSourceプロパティに設定したコレクションの要素を表示する
あああああ
いいいいいい
うううううう
ええええええ
ItemsControlの１要素は
1つのContentControl

Panel
 他のコントロールを複数配置するコントロール
– StackPanel
– Grid
– Canvas
 Childrenプロパティに設定したコントロールをレイアウトする

StaticResource/ThemeResource
 StaticResource
– Resourceから値を取得する
{StaticResource HogeHoge}
 ThemeResource
– テーマリソースから値を取得する（StaticResourceとほぼ同じ）
– テーマが変わったときに動的に値が変わる
（テーマはDark, Light, HighContrast）

Binding
 依存プロパティと、プロパティの値の同期をとる仕組み
(主に画面)
ターゲット
プロパティ
(主に裏方)
ソース
Binding
OneWay(デフォルト)
TwoWay

Binding
 依存プロパティと、プロパティの値の同期をとる仕組み
(主に画面)
ターゲット
プロパティ
(主に裏方)
ソース
Binding
Converter
(値の変換)

XAMLフレンドリーな設計

Bindingとテンプレートが超強力
見た目以外(C#)
• データアクセス
• ロジック
• 変更通知
• etc…
見た目(XAML)
• テンプレート
• アニメーション
• プレゼンテーションロ
ジック
• etc…
ギ
ャ
ッ
プ
を
埋
め
る
層
(C#)
Binding 監視

まとめ
 XAMLは、XMLベースの言語
 XAMLは、オブジェクトのツリー構造をマークアップする言語
 XAMLで、マークアップするオブジェクト
– DependencyObjectを頂点とするクラス群
 Binding/テンプレート大事

めとべや東京5_XAML

More Related Content

What's hot

Viewers also liked

Similar to めとべや東京5_XAML

More from 一希 大田

Recently uploaded

めとべや東京5_XAML

More from 一希大田