Windows ストア アプリの上手な作り方

テンプレート活用について2012/09/22大田　一希 @okazuki

自己紹介

大田　一希Microsoft MVP for Client App Dev 2011/07 ～Twitter: @okazuki

Blogかずきの Blog@Hatenahttp://d.hatena.ne.jp/okazuki/

Love犬

本日の環境について

今日の目的 目指すところ

目指すところ

Windows ストア アプリを作れる気になる

Visual Studio 2012

Blend for VS テンプレート

アジェンダ

Windows ストア アプリ プロジェクトテンプレート アイテムテンプレート

アイテムテンプレート 色々な見た目への対応

まとめ

Windows ストア アプリ

プロジェクトテンプレート

新しいアプリケーション (XAML)

グリッド アプリケーション (XAML)

分割アプリケーション (XAML)

プロジェクトテンプレート

新しいアプリケーション (XAML)

グリッド アプリケーション (XAML)

分割アプリケーション (XAML)

グリッド アプリケーション (XAML)基本的な 3 段の階層構造のデータを表示するアプリケーションのテンプレート

重要なエッセンスが凝縮されている

DEMOグリッドアプリケーション

プロジェクトの中身

Common フォルダが宝の山 BindableBase クラス BooleanNegationConverter クラス BooleanToVisibilityConverter クラス LayoutAwarePage クラス RichTextColumns クラス StandardStyles.xaml SuspensionManager クラス

プロジェクトの中身

今日紹介したいもの BindableBase クラス BooleanNegationConverter クラス BooleanToVisibilityConverter クラス LayoutAwarePage クラス RichTextColumns クラス SuspensionManager クラス StandardStyles.xaml

ゴミの山？

知っててスルーするのは OK

知らないのはもったいない

BindableBase クラス

INotifyPropertyChanged インターフェースの実装クラスclass Person : BindableBase{ private string name; public string Name { get { return this.name; } set { this.SetProperty(ref this.name, value); } }

private int age; public int Age { get { return this.age; } set { this.SetProperty(ref this.age, value); } }}

BindableBase クラス

従来の一般的なプロパティの書き方private string name;public string Name{ get { return this.name; } set { if (this.name == value) { return; }

this.name = value; this.OnPropertyChanged("Name"); }}

LayoutAwarePage クラス

DefaultViewModel プロパティ XAML で DataContext へバインドされている IObservableMap<string, object> 型 {Binding Path= キー名 } でバインド可能 ここにデータを入れて XAML でバインドする

中断処理への対応 LoadState(object navigationParameter, Dictionary<string, object>

pageState) SaveState(Dictionary<string, object> pageState)

LayoutAwarePage クラス

SuspensionManager との連携 画面遷移履歴も保持

スナップ・ポートレイト用の Visual State の定義 Blend や Visual Studio もこれを前提にしている

アイテムテンプレート 色々な見た目への対応

アイテムテンプレート

空白のページ

基本ページ

分割ページ

項目ページ

アイテム詳細ページ

グループ化された項目ページ

グループ詳細ページ

アイテムテンプレート

空白のページ

基本ページ

分割ページ

項目ページ

アイテム詳細ページ

グループ化された項目ページ

グループ詳細ページ

アイテムテンプレート

スナップ対応

ポートレイト対応

ランドスケープ対応

アイテムテンプレートの基本構造

LayoutAwarePage

コードビハインドXAML

GridView

DefaultVeiwModelData

ContextOther

Control

CollectionViewSourc

eイベントハンドラ

UI ロジック

アプリケーションのロジック

データ構造

通信

SuspensionManager （中断への対応）

ListView

DEMO

スナップとかへの対応

まとめ

用意されてるものを把握して使い倒そう BindableBase LayoutAwarePage 各種テンプレート

アプリケーションの構成はテンプレートから大きく変えない 楽が出来る。早く仕上がる。

（本気で作りこむなら自作プロジェクトテンプレートやアイテムテンプレートをそろえるという前準備が必要）

Blend for VS で自分の色を出す