Save 37% off PRO during our Black Friday Sale! »

デスクトップ アプリがこの先生きのこるには (2)

Da5ad051bd594c29c3ddd5ba80327779?s=47 Grabacr07
October 12, 2013

デスクトップ アプリがこの先生きのこるには (2)

Room metro Tokyo #2 の LT で使用した資料です。
前回 (#1) の続きで、Windows 8.1 RTM 版で Per-Monitor DPI がどうなったかと、その WPF 対応のお話。

Da5ad051bd594c29c3ddd5ba80327779?s=128

Grabacr07

October 12, 2013
Tweet

Transcript

  1. デスクトップがこの 先生きのこるには (2) 2013/10/12 Room metro Tokyo #2 Manato KAMEYA

    (@Grabacr07) アプリ
  2. Subject • 前回 (めとべや東京 #1) の続きです • WPF (Windows Desktop)

    の話です • Windows 8.1 の新機能の話です • Per-Monitor DPI、WPF でどうやんの? • わりと未解決
  3. Self Introduction • 亀谷 学人 (かめやまなと) • 某メーカー系 SIer 勤務

    • C# + WPF Windows Client Application 開発 • Twitter: ぐらばく (@Grabacr07) • Blog: http://grabacr.net/ 最近ずっと目が死んでる
  4. Previous session • Windows 8 と様々なタブレット PC の登場 • ディスプレイの小型化

    + 高精細化 高 DPI 環境の標準化 TABLET / PC SIZE RESOLUTION PPI Acer ICONIA W3 8.1 inch 174 mm x 109 mm WXGA (1280 x 800) 186 ppi 0.136 mm Acer ICONIA W7 11.6 inch 257 mm x 146 mm Full-HD (1920 x 1080) 190 ppi 0.134 mm Surface Pro 10.6 inch 235 mm x 132 mm Full-HD (1920 x 1080) 208 ppi 0.122 mm MacBook Pro (Retina) 13.3 inch 287 mm x 179 mm WQXGA (2560 x 1600) 227 ppi 0.112 mm 物理的な 1 ドット サイズ
  5. 96 DPI (100 %) 1920 x 1080

  6. 120 DPI (125 %) 1536 x 864

  7. 144 DPI (150 %) 1280 x 720

  8. Per-Monitor DPI • Windows 8.1 の新機能 • モニターごとにスケーリング可能! Primary: 10.6”

    Tablet (1920 x 1080) Secondary: 24” Display (1920 x 1200) 144 dpi (150 %) 96 dpi (100 %)
  9. Support WPF…? • WPF ではどうなるの • 非対応! (DPI 仮想化でボケる) •

    Windows 8.1 Preview だから…? • RTM 版ならキレイに 表示されるよね…? • 非対応!!! • RTM 版でもダメだったよ… RTM DPI 仮想化でボケる
  10. Per-Monitor DPI + WPF • わかったよ、自分で作るわ ※ 注意: P/Invoke 成分が含まれます

    • ひつようなもの • MonitorFromWindow 関数 指定したウィンドウがどのモニターに属するかを取得 • GetDpiForMonitor 関数 (Windows 8.1 で追加) 指定したモニターの DPI を取得 • WM_DPICHANGED メッセージ (Windows 8.1 で追加) DPI が変更されたとき (ディスプレイをまたいだときなど) に飛んでくる
  11. 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)
  12. Per-Monitor DPI + WPF • DPI 値がわかったら • ScaleTransform で

    Window の子要素をスケーリング var scaleX = dpiX / 96.0; var scaleY = dpiY / 96.0; var element = window.Content as FrameworkElement; if (element != null) { // 実際は、既に Transform されていたケースを考慮するので // もうちょっと複雑になる element.LayoutTransform = new ScaleTransform(scaleX, scaleY); } window.Width *= scaleX; window.Height *= scaleY;
  13. Conclusion • Windows 8.1 で Per-Monitor DPI が追加 • しかし

    WPF は DPI 仮想化でボケる… • 現在のモニターの DPI と DPI の変更は取得可能 • なので、ScaleTransform してしまえばいい? • もっと他にいい方法あったら教えてください
  14. Reference • DPI and Device-Independent Pixels http://msdn.microsoft.com/en-us/library/windows/desktop/ff684173(v=vs.85).aspx • Writing DPI-Aware

    Desktop Applications in Windows 8.1 Preview http://go.microsoft.com/fwlink/p/?LinkID=307061 • GetDpiForMonitor function http://msdn.microsoft.com/library/windows/desktop/dn280510.aspx • DPI Tutorial sample http://code.msdn.microsoft.com/DPI-Tutorial-sample-64134744/description