Visual Studio 2015 リリース記念 勉強会 universal windows platform app
13 likes7,603 views
8/8日の勉強会の発表資料です。
Visual Studio 2015 リリース記念 勉強会 universal windows platform app
- 1. Universal Windows Platform app 2015/8/8 Visual Studio 2015 リリース記念 勉強会 大田 一希
- 2. 自己紹介 • 名前/SNS • 大田 一希 • Twitter: @okazuki • Blog • かずきのBlog@hatena http://okazuki.hatenablog.com/ • その他 • Microsoft MVP for Windows Platform Development • Minecraftはじめました • Spring Boot(Java)はじめました
- 4. 今日のゴール • Visual Studio 2015で追加されたUniversal Windows Platform appの概 要と開発の雰囲気をつかんでもらう
- 6. Visual Studio 2015で開発できるアプリ(一部) Visual Studio 2015 C# Web ネイティブ ASP.NET 従来のデスクトップ Windows Forms WPF Xamarin iOS Windows 8 Windows Phone Windows Store app Universal Universal Windows Platform app And roid
- 7. Visual Studio 2015で開発できるアプリ(一部) Visual Studio 2015 C# Web ネイティブ ASP.NET 従来のデスクトップ Windows Forms WPF Xamarin iOS Windows 8 Windows Phone Windows Store app Universal Universal Windows Platform app And roid
- 8. Universal Windows Platform(UWP) • 以下の環境で動く • PC • Desktop • Tablet • Mobile • IoT • Surface Hub • Xbox • HoloLens • ワンバイナリ
- 9. Hello world（Demo(s)） • Visual Studio • Windows Universalから新規作成 • 1プロジェクト • パソコン・電話で動く
- 12. 画面のブレークポイント • タブレットや大きめの電話や横画面の電話 • 321epx～720epx Window title 12:38
- 15. 画面のブレークポイント 12:38 Window title 12:38 Window title Window title 320epx 720epx 1024epx
- 16. アダプティブなコード • 状況に応じて呼び分け • 電話固有機能 • デスクトップ固有機能
- 17. 特徴的な機能
- 18. 特徴的な機能 • 強化されたVisual State Manager • RelativePanel • SplitView • AppBar • ApiInformation
- 19. 強化されたVisual State Manager • VisualStateに以下のプロパティが追加された • StateTriggers このステートに来るための条件を設定できる • Setter StyleなどのSetterと同じ要領でプロパティの変更を書ける （プロパティを変えるためだけにStoryboardを書かなくてもいい）
- 21. Demo(s)
- 22. RelativePanel
- 23. RelativePanel • VisualTreeを深くせずに複雑なレイアウトが可能（らしい） • 相対位置によるレイアウト＋Margin＋Alignment • 画面の上下左右の端や中央 • とあるコントロールの上下左右の端や中央 • RelativePanel.LeftOf=“Button1”のように記述していく
- 24. RelativePanelの添付プロパティ • Above: 上 • Bellow: 下 • RightOf: 右 • LeftOf: 左 • AlignRightWith: 指定したコント ロールの右に合わせる • AlignLeftWith: 指定したコントロー ルの左に合わせる • AlignRightWithPanel: パネルの右 に合わせる • AlignLeftWithPanel: パネルの左 に合わせる • Top, Bottom, HorizontalCenter, VerticalCenter, etc…
- 28. Demo(s)
- 29. SplitView
- 32. SplitView • DisplayMode 表示形式 • Inline • インライン形式 • Overlay • 上にかぶさる形式 • CompactInline • 完全に隠れないInline • CompactOverlay • 完全に隠れないOverlay • IsPaneOpen • Paneが表示中かどうか • CompactPaneLength • DisplayModeがCompactの時の表示幅
- 33. Demo(s)
- 34. おまけ • アイコンはSegoe MDL2 Assetsの私用領域に入ってる
- 35. AppBar
- 36. AppBar • 画面下（上）に置けるボタンを配置するた めのコントロール • UWPでは、画面の何処にでも置ける • PrimaryCommandが初期状態で表示され る • SecondaryCommandが…を押したときにメ ニューっぽく表示される • Contentプロパティに任意のコントロールを置 ける
- 37. Demo(s)
- 38. アダプティブコード 以下のAPIを使って型が提供されているかどうかを判定して処理を書いていく。 • ApiInformation • IsTypePresent • IsPropertyPresent • IsEventPresent • etc… https://msdn.microsoft.com/ja-jp/library/windows.foundation.metadata.apiinformation.aspx
- 40. Demo(s)
- 41. まとめ
- 42. まとめ • Universal Windows Platform app • 様々なプラットフォームで1バイナリで動く • PC • Mobile • SurfaceHub • Xbox • HoloLens • アダプティブUI • アダプティブコード
- 43. まとめ • 強化されたVisual State Manager • AdaptiveTriggerでレスポンシブ対応が簡単に可能 • RelativePanel • VisualTreeを深くせず複雑なレイアウトが可能 • VSMと連携して再配置が容易 • SplitView • ハンバーガーメニュー • AppBar • より汎用的なコントロールとなっている • AppInformation • アダプティブなコードを書くための肝のAPI
- 44. まとめ • Visual Studio 2015を使ってUWPを作りましょう！