Modern WPF

Room metro Tokyo #4 発表資料です。

KanColleViewer の開発ネタ放出と、de:code のデスクトップ アプリ関連情報のキャッチアップ (のつもり) でした。

Transcript

1. Modern WPF 2014/05/31 Room metro Tokyo #4 Manato KAMEYA (@Grabacr07)
2. Subject • デスクトップはどうなっていくの？ − 成熟したプラットフォーム − 今後大きなアップデートはない (と思われる) ただし… − Visual Studio や Photoshop、デスクトップで使いますよね？ ≠ デスクトップの終焉
3. Subject • 目的 − KanColleViewer で得たデスクトップ / WPF ネタの放出 − de:code でのデスクトップ アプリに関するセッションのキャッチアップ • ゴール − モダンな UI を持つ WPF アプリの開発手法を知る − Windows 8 / 8.1 時代の WPF アプリとは何かを知る
4. Agenda デスクトップ アプリがこの先 生きのこるには Introduction for Windows 8.1 WPF Modern Style Conclusion Modern WPF
5. • 内容は個人に帰属します 所属する組織を代表するものではありません
6. Introduction
7. Self Introduction • Work − 拝承業者？ (メーカー系 SIer 所属エンジニア) − C# + WPF (Windows Client Application 開発) • Private activity − Web: http://grabacr.net/ − Twitter: @Grabacr07 (ぐらばく) − めとべや東京勉強会スタッフ − Microsoft MVP for Visual C# (2014/04 ～)
8. Recent activity
9. KanColleViewer • Windows Desktop app − .NET Framework 4.5 − Visual C# + WPF • 艦これ プレイングツール Internet Explorer Shell + FiddlerCore • 2013/12 公開 (約 5 ヶ月) − 1,650,000 downloads − Blog は Azure Web Sites へ移行 thanks @guitarrapc_tech
10. KanColleViewer • 常にエゴサーチ (twitter) − メンタル鍛えられます • ユーザーの反応 − 機能に対する反応･要望 − UI に対する反応･要望 • デベロッパーの反応 − ｢この見た目どうやって作んの｣
11. モダンな外観への道のり WPF Modern Style
12. How to: Modern Window • Window system 2 つの領域からなる Nonclient Area (非クライアント領域) • ウィンドウの枠 • サイズ変更 • 移動 • キャプション ボタン (最小化・最大化・閉じる) • アイコン • タイトル • システム メニュー 描画･管理: OS のウィンドウ マネージャー Client Area (クライアント領域) • アプリケーションのコンテンツ 描画･管理: アプリケーション
13. How to: Modern Window • WindowStyle.None <Window WindowStyle="None" … />
14. How to: Modern Window • WindowStyle.None − 非クライアント領域を削除 − 標準ウィンドウの動作を エミュレートするロジックが必要 Nonclient Area (非クライアント領域) • ウィンドウの枠 • サイズ変更 • 移動 • キャプション ボタン (最小化・最大化・閉じる) • アイコン • タイトル • システム メニュー 描画･管理: OS のウィンドウ マネージャー 要自作 <Window WindowStyle="None" … />
15. How to: Modern Window • WindowStyle.None − 非クライアント領域を削除 − 標準ウィンドウの動作を エミュレートするロジックが必要 − 使いどころは ▫ スプラッシュ画面 ▫ デスクトップ ウィジェット等 <Window WindowStyle="None" … /> ウィンドウ枠･サイズ変更の必要なし キャプション バー必要なし (ウィンドウ全体でドラッグできる)
16. Excursus: Splash Screen • なる早で出したいスプラッシュ画面 画像のビルド アクションを “SplashScreen” に • または、SplashScreen class で Show(bool) • WPF の Application インスタンス が生成される前に表示される • ネイティブ コードを使っている • つまり、表示されるまでが早い！
17. Excursus: Splash Screen • 画像とウィンドウの両方を出す (Blend for Visual Studio のケース) − まず、画像で素早く出す − 次に、本格的 (？) なのを出す ▫ ローカライズされたもの ▫ アニメーションも可 (Office など)
18. How to: Modern Window • WindowStyle.None − 非クライアント領域を削除 − 標準ウィンドウの動作を エミュレートするロジックが必要 − 使いどころは ▫ スプラッシュ画面 ▫ デスクトップ ウィジェット等 <Window WindowStyle="None" … /> @CST_negi 氏の作品 https://github.com/NegishiTakumi/ARiALauncher
19. How to: Modern Window • Windows API Code Pack (2009 ～) Windows Vista / 7 で追加された機能のマネージ ラッパー − Application service (recovery, battery, …) − Task bar (progress bar, jump list, …) .NET Framework 4.0 で BCL 入り − Shell (dialog, window chrome, …) − Etc…
20. How to: Modern Window • Windows API Code Pack (2009 ～) Windows Vista / 7 で追加された機能のマネージ ラッパー − Application service (recovery, battery, …) − Task bar (progress bar, jump list, …) .NET Framework 4.0 で BCL 入り − Shell (dialog, window chrome, …) − Etc…
21. How to: Modern Window • Windows API Code Pack (2009 ～) Windows Vista / 7 で追加された機能のマネージ ラッパー − Application service (recovery, battery, …) − Task bar (progress bar, jump list, …) .NET Framework 4.0 で BCL 入り − Shell (dialog, window chrome, …) − Etc…
22. How to: Modern Window • WindowChrome class − Window API Code Pack -> .NET Framework 4.5 で BCL へ − クライアント領域を拡張 非クライアント領域を覆うように拡張する ▫ ウィンドウ フレームに WPF の コンテンツを含めることが可能 ▫ リサイズ・キャプション領域で システム本来の動作を維持 Nonclient Area (非クライアント領域) • ウィンドウの枠 • サイズ変更 • 移動 • キャプション ボタン (最小化・最大化・閉じる) • アイコン • タイトル • システム メニュー ※ WindowChrome がやってくれるもの
23. キャプション バーと 認識させるサイズ How to: Modern Window • WindowChrome class CaptionHeight property サイズ変更枠と 認識させる太さ ResizeBorder Thickness property サイズ変更グリップ の動作の方向 ResizeGrip Direction attached property
24. How to: Control library • WPF カスタム コントロール ライブラリ − カスタム コントロール＆スタイル群 − 別アプリでも同じ外観を再現できる ライブラリ (アセンブリ) を参照し、App.xaml の ResourceDictionary でマージするだけ <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Icons.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Dark.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Accents/Purple.xaml" /> </ResourceDictionary.MergedDictionaries>
25. How to: Control library • WPF カスタム コントロール ライブラリ − カスタム コントロール＆スタイル群 − 別アプリでも同じ外観を再現できる ライブラリ (アセンブリ) を参照し、App.xaml の ResourceDictionary でマージするだけ − 使うブラシ定義は統一しておくとよい Normal 時、Active 時、非 Active 時、など <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Icons.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Dark.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Accents/Purple.xaml" /> </ResourceDictionary.MergedDictionaries>
26. How to: Control library • WPF カスタム コントロール ライブラリ − カスタム コントロール＆スタイル群 − 別アプリでも同じ外観を再現できる ライブラリ (アセンブリ) を参照し、App.xaml の ResourceDictionary でマージするだけ − 自分で作ってるアプリのブランド化 社内向けツールとかも <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Styles/Icons.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Dark.xaml" /> <ResourceDictionary Source="pack://application:,,,/MyControlLibrary;component/Themes/Accents/Purple.xaml" /> </ResourceDictionary.MergedDictionaries>
27. Elysium • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://elysium.codeplex.com/ − Zune 風コントロール･スタイル群 再現度はあまり高くない… − Visual Studio 2010 or 2012 が必要
28. Elysium • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://elysium.codeplex.com/ − Zune 風コントロール･スタイル群 再現度はあまり高くない… − インストーラーに弾かれる VS2010 or 2012 が必要って言われる − 独自のトースト通知システム Windows 7 でも通知できるが…
29. MahApps.Metro • お手軽モダン UI ライブラリ これ使うだけでそれっぽく見える − http://mahapps.com/MahApps.Metro/ − Windows ストアアプリ風 コントロール･スタイル群 − 割とおすすめ
30. High DPI を前提とした Windows 8 / 8.1 の世界 for Windows 8.1
31. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のソフトウェア、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願
32. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 例のアプリ、 Windows 8 でも動くよね？ 既に動作確認は取れております タブレット PC で表示が狂う件 大変申し訳ございません早急に 調査し対応致しますので今暫く お待ち頂きますよう宜しくお願 高 DPI 環境で表示不良
33. for the Tablet PC…? • Windows 8 と様々なタブレット PC の登場 − ディスプレイの小型化 + 高精細化 TABLET / PC SIZE RESOLUTION PPI Surface Pro 2 10.6 inch Full-HD (1920 x 1080) 208 ppi 0.122 mm Surface Pro 3 12 inch Quad-HD (2160 x 1440) 216 ppi 0.117 mm MacBook Pro (Retina) 13.3 inch WQXGA (2560 x 1600) 227 ppi 0.112 mm ThinkPad 8 8.3 inch Full-HD (1920 x 1080) 265 ppi 0.096 mm 高 DPI 環境の標準化 物理的な 1 ドット サイズ
34. What is DPI? • 今更ですが… • Dots Per Inch − 1 インチの幅でどれだけのドットを表現できるか − Windows では 1 インチ = 96 pixel − 100 % (96 dpi)、125 % (120 dpi)、150 % (144 dpi) などの設定 [コントロール パネル] -> [デスクトップのカスタマイズ] -> [テキストやその他の項目の大きさの変更] 96 dpi 100 x 50 px 144 dpi 150 x 75 px 96 dpi 100 x 50 px 144 dpi 150 x 75 px
35. 96 DPI (100 %) 1920 x 1080
36. 120 DPI (125 %) 1536 x 864
37. 144 DPI (150 %) 1280 x 720
38. High DPI Issues • UI 要素やテキストが切れる • フォント サイズ / レイアウトが不適切になる • UI 要素がぼやける • 座標空間の位置調整が不適切で、入力に影響する 狙った場所にドラッグ＆ドロップできなくなったり • 全画面表示のアプリケーションが部分的にしかレンダリングされない 全画面表示のゲームなどで見られる • etc...
39. DPI-unaware application • 文字が切れる、レイアウトが崩れる、etc… (悪意のある例ですが) 本当に何も対策しないとこうなる 96 dpi 環境 (100 %) 120 dpi 環境 (125 %) 144 dpi 環境 (150 %)
40. DPI-aware application • Win32 application − マニフェストで <dpiAware>True</dpiAware> 宣言 − GetDeviceCaps 関数 GetSystemMetrics 関数 SystemParametersInfo 関数 • Windows Forms application − AutoScaleMode プロパティを Dpi に − 開発環境の DPI を記憶
41. DPI-aware application 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) • DPI を考慮すると スケーリングされて意図した外観に スケーリングされて サイズが変わってる
42. DPI Virtualization and Scaling • DPI 仮想化機能 − DPI-unaware applications のための救済措置 − Windows Vista で導入 − DPI 設定に合わせて自動的に拡大 96 dpi で画面表示領域外にレンダリングされ、 DWM が拡大して表示 − ぼやける (重要) このチェックを 外した状態
43. DPI Virtualization and Scaling • ぼやける ただ拡大しているだけなので… 96 dpi 環境 (100 %) 144 dpi 環境 (150 %) 拡大しただけなので サイズは変わってない
44. Device Independent Pixel • DIP (デバイス非依存ピクセル) − Direct2D, WPF など − 環境の DPI 設定に関わらず 1 dip = 1/96 inch とする − コントロールやフォントのサイズは全て DIP で指定する 開発者が DPI を意識して座標やサイズの計算をする必要がない！ − DPI 仮想化が効かない (仮想化する必要がない) − WPF ->「解像度およびデバイスに依存しないグラフィックス」
45. Device Independent Pixel (WPF) • ぼやけない そのための特別なコードも必要なし 96 dpi 環境 (100 %) 144 dpi 環境 (150 % のサイズで描画) DIP なので サイズ変わってない
46. DPI Settings (Windows 8.1) モニターごとの スケーリング (新機能)
47. Per-Monitor DPI • モニターごとにスケーリング Primary: 10.6” Tablet (1920 x 1080) Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %)
48. DPI Awareness Level • DPI-unaware applications − 高 DPI 環境非対応、スケーリングなし − 一応 DPI 仮想化は効くけど、品質はお察しレベル • System DPI-aware applications − スケーリングされるので、高 DPI 環境でも表示できる − Windows 8.1 で異なる DPI のディスプレイに移動すると仮想化されてしまう • Per-Monitor DPI-aware ← New! − Windows 8 までの環境で、高 DPI 環境でも表示できる − Windows 8.1 で異なる DPI のディスプレイに移動しても表示できる Windows Forms WPF Windows Store apps
49. Per-Monitor DPI + WPF • ひつようなもの − マニフェスト Per-Monitor DPI に対応していることを宣言 <asmv3:application xmlns:asmv3="urn:schemas-microsoft-com:asm.v3"> <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings"> <dpiAware>True/PM</dpiAware> </asmv3:windowsSettings> </asmv3:application> dpi-Aware 値 効果 False High DPI 対応してません True High DPI 対応してます (Per-Monitor DPI は無理) Per-Monitor Per-Monitor DPI 対応してます (Windows Vista ～ 8 では False) True/PM Per-Monitor DPI 対応してます (Windows Vista ～ 8 では True)
50. Per-Monitor DPI + WPF • ひつようなもの − MonitorFromWindow 関数 指定したウィンドウがどのモニターに属するかを取得 − GetDpiForMonitor 関数 (Windows 8.1 で追加) 指定したモニターの DPI を取得 − WM_DPICHANGED メッセージ (Windows 8.1 で追加) DPI が変更されたとき (ディスプレイをまたいだときなど) に飛んでくる
51. Conclusion
52. Conclusion • モダンな UI を持つ WPF アプリの開発手法 − 非クライアント領域の削除方法 ▫ WindowChrome class ▫ WindowStyle 用途に応じて使い分け − WPF カスタム コントロール ライブラリ • Windows 8 / 8.1 時代の WPF アプリ − デスクトップ アプリの High DPI 対応は、もはや必須 − WPF は何もしなくても対応済み、ただし Per-Monitor DPI は対応が必要
53. Conclusion • WPF アプリのここがつらい − 配布プラットフォームがない ▫ ので、Azure 課金地獄っぽい 酷い日だと Azure のデータ転送量 1 日 20 GB とか ▫ とりあえず、バイナリのみ GitHub に置いて対応中 − 広告プラットフォームがない ▫ 野良アプリだと収益化が難しい ▫ やるとしたら、インストーラーに何かバンドルするとか