Universal Windows Platform appの画面開発

2015/5/30 めとべや東京 #8

大田 一希

自己紹介

•名前/SNS• 大田 一希

• Twitter: @okazuki

• Blog• かずきのBlog@hatena

http://okazuki.hatenablog.com/

• その他• Microsoft MVP for Windows Platform Development

• Minecraftはじめました

宣伝

• Microsoft Virtual Academy• Microsoft Azureの基礎

• Unityを使用した Windows 用の 2D および3D ゲーム開発ジャンプスタート

• Visual Studio 2015 における統合開発環境の進化

• ユニバーサル Windows プラットフォーム向けアプリケーション開発を無料で学べるオンライン講座• 2015年6月10日（水）20:00～

• 申し込みはコチラ⇒http://aka.ms/win10dev_jpmvp

お約束事項

•記載の内容は個人の見解であり、所属する企業を代表するものではありません。

• Windows 10 Insider Preview 10122 + Visual Studio 2015 RC時点の情報です。正式版では、変わっている可能性があります。

今日のゴール

•画面を作る上でのポイントとなる新機能の把握

Universal Windows Platform(UWP)まずは概要

Universal Windows Platform(UWP)

•以下の環境で動く• PC

• Desktop

• Tablet

• Mobile

• IoT

• Surface Hub

• Xbox

• HoloLens

• ワンバイナリ

Hello world（Demo(s)）

• Visual Studio• Windows Universalから新規作成

• 1プロジェクト

• パソコン・電話で動く

アダプティブなUI（レスポンシブ）

12:38

Window title

Window title

電話

タブレット

デスクトップ

一般的なプラットフォーム

アダプティブなコード

•状況に応じて呼び分け• 電話固有機能

• デスクトップ固有機能

画面を作る上での新機能

画面を作る上での新機能

•強化されたVisual State Manager

• RelativePanel

• SplitView

• AppBar(こいつは昔からあるけど)

強化されたVisual State Manager

• VisualStateに以下のプロパティが追加された• StateTriggersこのステートに来るための条件を設定できる

• SetterStyleなどのSetterと同じ要領でプロパティの変更を書ける（プロパティを変えるためだけにStoryboardを書かなくてもいい）

強化されたVisual State Manager

AdaptiveTriggerでWindowの最小幅を指

定することが出来る。

その最小幅まではそのStateになる。

SetterのTargetでコントロール名.プロパティの

書式で変更対象を指定してValueで変更

後の値を指定する。

Demo(s)

RelativePanel

RelativePanel

• VisualTreeを深くせずに複雑なレイアウトが可能（らしい）

•相対位置によるレイアウト＋Margin＋Alignment• 画面の上下左右の端や中央

• とあるコントロールの上下左右の端や中央

RelativePanelの添付プロパティ

• Above: 上

• Bellow: 下

• RightOf: 右

• LeftOf: 左

• AlignRightWith: 指定したコントロールの右に合わせる

• AlignLeftWith: 指定したコントロールの左に合わせる

• AlignRightWithPanel: パネルの右に合わせる

• AlignLeftWithPanel: パネルの左に合わせる

• Top, Bottom, HorizontalCenter, VerticalCenter, etc…

RelativePanelWindow title

起点

LeftOf RightOf

Above

Bellow

RelativePanelWindow title

起点

AlightL

eftWith

AlighRig

htWith

AlignTopWith

AlignBottomWith

AlignVerticalCent

erWith

AlignHorizontalC

enterWith

RelativePanelWindow title

AlignTopWithPanel

AlignLeftWithPanel

AlignBottomWithPanel

AlignRightWithPanel

AlignVerticalCenterWithPanel

AlignHorizontalCenterWith

Panel

Demo(s)

SplitView

SplitView

俗に言うハンバーガーメニューを作る

コントロール

SplitView

Paneにメニュー部分

Contentに右側部分

SplitView

• DisplayMode表示形式• Inline

• インライン形式

• Overlay• 上にかぶさる形式

• CompactInline• 完全に隠れないInline

• CompactOverlay• 完全に隠れないOverlay

• IsPaneOpen• Paneが表示中かどうか

• CompactPaneLength• DisplayModeがCompactの時の表示幅

Demo(s)

おまけ

• アイコンはSegoe MDL2 Assetsの私用領域に入ってる

AppBar時間があったら

AppBar

•画面下（上）に置けるボタンを配置するためのコントロール• UWPでは、画面の何処にでも置ける

• PrimaryCommandが初期状態で表示される

• SecondaryCommandが…を押したときにメニューっぽく表示される

• Contentプロパティに任意のコントロールを置ける

Demo(s)時間があったら

まとめ

まとめ

•強化されたVisual State Manager• AdaptiveTriggerでレスポンシブ対応が簡単に可能

• RelativePanel• VisualTreeを深くせず複雑なレイアウトが可能

• VSMと連携して再配置が容易

• SplitView• ハンバーガーメニュー

• AppBar• AppBarは死んでない

まとめ

• これらを駆使してWindows 10らしいアプリケーションを作りましょう。