![Page 1: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/1.jpg)
Universal Windows Platform appの画面開発
2015/5/30 めとべや東京 #8
大田 一希
![Page 2: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/2.jpg)
自己紹介
•名前/SNS• 大田 一希
• Twitter: @okazuki
• Blog• かずきのBlog@hatena
http://okazuki.hatenablog.com/
• その他• Microsoft MVP for Windows Platform Development
• Minecraftはじめました
![Page 3: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/3.jpg)
宣伝
• Microsoft Virtual Academy• Microsoft Azureの基礎
• Unityを使用した Windows 用の 2D および3D ゲーム開発ジャンプスタート
• Visual Studio 2015 における統合開発環境の進化
• ユニバーサル Windows プラットフォーム向けアプリケーション開発を無料で学べるオンライン講座• 2015年6月10日(水)20:00~
• 申し込みはコチラ⇒http://aka.ms/win10dev_jpmvp
![Page 4: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/4.jpg)
お約束事項
•記載の内容は個人の見解であり、所属する企業を代表するものではありません。
• Windows 10 Insider Preview 10122 + Visual Studio 2015 RC時点の情報です。正式版では、変わっている可能性があります。
![Page 5: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/5.jpg)
今日のゴール
•画面を作る上でのポイントとなる新機能の把握
![Page 6: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/6.jpg)
Universal Windows Platform(UWP)まずは概要
![Page 7: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/7.jpg)
Universal Windows Platform(UWP)
•以下の環境で動く• PC
• Desktop
• Tablet
• Mobile
• IoT
• Surface Hub
• Xbox
• HoloLens
• ワンバイナリ
![Page 8: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/8.jpg)
Hello world(Demo(s))
• Visual Studio• Windows Universalから新規作成
• 1プロジェクト
• パソコン・電話で動く
![Page 9: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/9.jpg)
アダプティブなUI(レスポンシブ)
12:38
Window title
Window title
電話
タブレット
デスクトップ
一般的なプラットフォーム
![Page 10: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/10.jpg)
アダプティブなコード
•状況に応じて呼び分け• 電話固有機能
• デスクトップ固有機能
![Page 11: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/11.jpg)
画面を作る上での新機能
![Page 12: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/12.jpg)
画面を作る上での新機能
•強化されたVisual State Manager
• RelativePanel
• SplitView
• AppBar(こいつは昔からあるけど)
![Page 13: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/13.jpg)
強化されたVisual State Manager
• VisualStateに以下のプロパティが追加された• StateTriggersこのステートに来るための条件を設定できる
• SetterStyleなどのSetterと同じ要領でプロパティの変更を書ける(プロパティを変えるためだけにStoryboardを書かなくてもいい)
![Page 14: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/14.jpg)
強化されたVisual State Manager
AdaptiveTriggerでWindowの最小幅を指
定することが出来る。
その最小幅まではそのStateになる。
SetterのTargetでコントロール名.プロパティの
書式で変更対象を指定してValueで変更
後の値を指定する。
![Page 15: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/15.jpg)
Demo(s)
![Page 16: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/16.jpg)
RelativePanel
![Page 17: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/17.jpg)
RelativePanel
• VisualTreeを深くせずに複雑なレイアウトが可能(らしい)
•相対位置によるレイアウト+Margin+Alignment• 画面の上下左右の端や中央
• とあるコントロールの上下左右の端や中央
![Page 18: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/18.jpg)
RelativePanelの添付プロパティ
• Above: 上
• Bellow: 下
• RightOf: 右
• LeftOf: 左
• AlignRightWith: 指定したコントロールの右に合わせる
• AlignLeftWith: 指定したコントロールの左に合わせる
• AlignRightWithPanel: パネルの右に合わせる
• AlignLeftWithPanel: パネルの左に合わせる
• Top, Bottom, HorizontalCenter, VerticalCenter, etc…
![Page 19: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/19.jpg)
RelativePanelWindow title
起点
LeftOf RightOf
Above
Bellow
![Page 20: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/20.jpg)
RelativePanelWindow title
起点
AlightL
eftWith
AlighRig
htWith
AlignTopWith
AlignBottomWith
AlignVerticalCent
erWith
AlignHorizontalC
enterWith
![Page 21: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/21.jpg)
RelativePanelWindow title
AlignTopWithPanel
AlignLeftWithPanel
AlignBottomWithPanel
AlignRightWithPanel
AlignVerticalCenterWithPanel
AlignHorizontalCenterWith
Panel
![Page 22: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/22.jpg)
Demo(s)
![Page 23: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/23.jpg)
SplitView
![Page 24: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/24.jpg)
SplitView
俗に言うハンバーガーメニューを作る
コントロール
![Page 25: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/25.jpg)
SplitView
Paneにメニュー部分
Contentに右側部分
![Page 26: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/26.jpg)
SplitView
• DisplayMode表示形式• Inline
• インライン形式
• Overlay• 上にかぶさる形式
• CompactInline• 完全に隠れないInline
• CompactOverlay• 完全に隠れないOverlay
• IsPaneOpen• Paneが表示中かどうか
• CompactPaneLength• DisplayModeがCompactの時の表示幅
![Page 27: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/27.jpg)
Demo(s)
![Page 28: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/28.jpg)
おまけ
• アイコンはSegoe MDL2 Assetsの私用領域に入ってる
![Page 29: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/29.jpg)
AppBar時間があったら
![Page 30: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/30.jpg)
AppBar
•画面下(上)に置けるボタンを配置するためのコントロール• UWPでは、画面の何処にでも置ける
• PrimaryCommandが初期状態で表示される
• SecondaryCommandが…を押したときにメニューっぽく表示される
• Contentプロパティに任意のコントロールを置ける
![Page 31: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/31.jpg)
Demo(s)時間があったら
![Page 32: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/32.jpg)
まとめ
![Page 33: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/33.jpg)
まとめ
•強化されたVisual State Manager• AdaptiveTriggerでレスポンシブ対応が簡単に可能
• RelativePanel• VisualTreeを深くせず複雑なレイアウトが可能
• VSMと連携して再配置が容易
• SplitView• ハンバーガーメニュー
• AppBar• AppBarは死んでない
![Page 34: 20150530 めとべや東京8 universal windows platform appの画面開発](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55c0d4eebb61eb0f038b468b/html5/thumbnails/34.jpg)
まとめ
• これらを駆使してWindows 10らしいアプリケーションを作りましょう。