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