XAML で作るWindows ストアアプリ2014/03/22 MVP COMMUNITY CAMP #CLRH89

@KATSUYUZU

Agenda

XAML

XAMLとは

なぜXAMLなのか

Windows ストアアプリ

開発の手引き

Self Intoroduction

KatsuYuzu Work

SIer

VB.NET

Private

Twitter: しみみん（KatsuYuzu）

Web: http://katsuyuzu.hatenablog.jp/

C#

CLR/Hスタッフをしておりますので登壇希望など、

お気軽にご相談ください。

XAMLEXTENSIBLE APPLICATION MARKUP LANGUAGE

XAMLとは何なのか、なぜXAMLなのかを知ってもらう。

章の目標

プレゼンテーション層の言語

XAMLとは

一般的なユーザー

∩＿＿＿∩| ノ ヽ

/ ● ● || ( _●_) ミ彡､ |∪| ､｀＼

/ ＿＿ ヽノ /´> )(＿＿＿） / (_／

ディスプレイ

XAML

プログラム

コンピューター

XAMLとは

Extensible Application Markup Language（XAML、ザムルと発音する）は、オブジェクトやプロパティ、あるいはそれらの関係や相互作用を定義するために用いられるXMLベースの宣言的言語である。

出典：

http://ja.wikipedia.org/wiki/Extensible_

Application_Markup_Language

XAMLとは

HTMLに似てると考えたら読みやすい？

なぜXAMLなのか

プレゼンテーション層とドメイン層の分離

一般的なユーザー

∩＿＿＿∩| ノ ヽ

/ ● ● || ( _●_) ミ彡､ |∪| ､｀＼

/ ＿＿ ヽノ /´> )(＿＿＿） / (_／

ディスプレイ

XAML

プログラム

コンピューター

なぜXAMLなのか

仕様が読めない

デザインの変更に弱い

なぜXAMLなのか

仕様が読み取れる（状況は読めない）

デザインの変更に強い

なぜXAMLなのか

でも、これでもまだデザイン変更時にプログラムの変更が必要

なぜXAMLなのか

XAMLでバインディングするとデザインの変更が容易になる

なぜXAMLなのか

プレゼンテーション層とドメイン層の分離

一般的なユーザー

∩＿＿＿∩| ノ ヽ

/ ● ● || ( _●_) ミ彡､ |∪| ､｀＼

/ ＿＿ ヽノ /´> )(＿＿＿） / (_／

ディスプレイ

XAML

プログラム

コンピューター

なぜXAMLなのか

ModelとViewの分離

MVC系: MV + hoge

一般的なユーザー

∩＿＿＿∩| ノ ヽ

/ ● ● || ( _●_) ミ彡､ |∪| ､｀＼

/ ＿＿ ヽノ /´> )(＿＿＿） / (_／

ディスプレイ

View Model

コンピューター

なぜXAMLなのか

MVVM

Model – View - ViewModel

View ViewModel Model

コンピューター

なぜXAMLなのか

MVVM

Model – View - ViewModel

View

・ViewModelの監視

=バインディング

ViewModel

・Viewのデータストア・操作の伝達

Model

・アプリケーション

コンピューター

XAML

XAMLとは

プレゼンテーションに特化した言語

なぜXAMLなのか

分離に特化した言語

Windows ストアアプリDEVELOPING A WINDOWS STORE APP

XAMLの応用を知ってもらう。

Prismで開発のとっかかりを知ってもらう。

章の目標

XAMLの応用

Blend

XAMLに特化したVisual Studioの仲間

XAMLの応用

テンプレート

XAMLの応用

Visual State

XAMLの応用

ビヘイビア

【名詞】ふるまい

DependencyObjectを継承していてIBehaviorを実装している

アクション

DependencyObjectを継承していてIActionを実装している

XAMLの応用

ビヘイビア、アクション

XAMLの応用

Blend

Visual Studioの友達

テンプレート

XAMLの豊かな表現力

Visual State

状態

ビヘイビア、アクション

パーツをぽとぺた

Prism

C#、XAML、Windows ランタイム向け Prism を使った Windows ストアビジネスアプリの開発

http://msdn.microsoft.com/ja-

jp/library/windows/apps/xx130643.aspx

Prism for the Windows Runtime

Templates (Win 8.1)

http://visualstudiogallery.msdn.microsoft.c

om/2a6c37e4-fe9a-4a93-baae-

a9bce4cf60c7

Prism

Prism を使った Windows ストアアプリの作成

UX の設計

MVVM パターンの使用

ページの作成とページ間の移動

タッチの使用

ユーザー入力の検証

アプリケーションデータの管理

中断、再開、アクティブ化の処理

疎結合コンポーネント間の通信

タイルの操作

検索の実装

パフォーマンスの向上

Prism

Prism を使った Windows ストアアプリの作成

UX の設計

MVVM パターンの使用

ページの作成とページ間の移動

タッチの使用

ユーザー入力の検証

アプリケーションデータの管理

中断、再開、アクティブ化の処理

疎結合コンポーネント間の通信

タイルの操作

検索の実装

パフォーマンスの向上

Prism

MVVM パターンの使用

依存関係の管理

ViewModelへの注入

Viewとのバインディング

Prism

依存関係の管理

アプリケーションの初期化時に登録

Prism

ViewModelへの注入

コンストラクタに注入してくれる

Prism

Viewとのバインディング

Prism

Viewとのバインディング

名前という規約で自動的にバインディング

Prism

MVVM パターンの使用

依存関係の管理

ViewModelへの注入

Viewとのバインディング

Prism

ページの作成とページ間の移動

ViewModelに注入されたINavigationServiceを使う

Prism

ページの作成とページ間の移動

起点にコマンドをバインドしておく

Windows ストアアプリ

Windows ストアアプリ

BlendでXAMLを使いこなす

Prismを参考にする

XAML で作るWindows ストアアプリ

XAMLとは

プレゼンテーションに特化した言語

なぜXAMLなのか

分離に特化した言語

Windows ストアアプリ

BlendでXAMLを使いこなす

Prismを参考にする