Windows 10 / Visual Stadio Community 2019 / .NET Framework 4.7.2

C#アプリケーションのフォームやコントロール、文字の大きさは、ディスプレイの解析度が一定のとき、表示スケールの倍率により変わる。また反対に、表示スケールの倍率が一定のとき、ディスプレイの解析度により変わる。表示の大きさを変える方法は、表示スケールの倍率の設定によって行うのが一般的であるため、本章ではこれについて説明する。

筆者のPCでは、ディスプレイの設定の推奨値は、解析度 1920 x 1080、表示スケールは 120%となっている。この、表示スケールが 100%でないことにより、アプリケーションの開発でやや困惑する事態に遭遇した。

一般則として、表示スケールの倍率が上がれば、フォームやコントロール、文字のサイズは拡大する。一方その分、スクリーンに表示できる領域は狭くなる。C#のアプリケーションの挙動を確認してみる。

Visual Stadioのデザイナーを使用して、幅750ピクセル、高さ500ピクセルのウィンドウを作成する。中に幅400ピクセル、高さ300ピクセルのピクチャボックスを埋め込み、800 x 600ピクセルの画像を zoomモード（縦横の比率を保持したまま拡大縮小する）で表示するようにする。ピクチャボックスと画像の縦横比は同一となる。文字のフォントサイズは 20ptを指定する（実際は19.8ptになる）。

アプリケーションをビルドして実行すると、ウィンドウ、ピクチャボックスは、プロパティで指定した通りのピクセルサイズで表示される。形状を実測すると、ウィンドウが 13.1cm x 8.8cm、ピクチャボックスが 7.1cm x 5.4cmとなる。文字列は 3.4cm x 0.5cmの枠内に表示される。

また大事な点は、デザイナー上の表示サイズと、スクリーン上の表示サイズは同じ大きさになることである。（ただし実際には、デザイナー上のウィンドウはクラシックスタイルのままなので、メニューバーの形状や、ウィンドウサイズがごくわずか大きくなる。これ変える方法あるのだろうか）

先にビルドしたアプリケーション（exe）を実行してみる。

ウィンドウ、ピクチャボックス、文字列ともやや大きく表示される。 この画像ではわからないが、サイズを実測するとウィンドウは 16.4cm x 11cmに、ピクチャボックスは 8.9cm x 6.7cmになり、文字列の領域も 4.2cm x 0.6cmとなっている。表示スケールが 100%のときと比べて約 1.25倍になり、表示スケールの倍率にちょうど対応する。

条件として、先に作成したアプリケーションとコントロールの表示サイズが同じものを作成するとする。

Visual Stadioを起動すると「メインディスプレイのスケールは 125%に設定されています」のダイアログがメニューバーの下に表示される。デフォルトでは自動スケールがオンの状態で始まる。

サイズが 1.25倍のコントロールを定義するには、矩形の各辺のサイズを単純に 1.25倍にすれば良いと考え、フォームのサイズを 938 X 625ピクセル、ピクチャボックスのサイズを 500 X 375ピクセルに設定した。文字のフォントサイズは同じ値の 20ptを設定した。

結果は、それなりに大きくなっているようだが、よくみると、高さは正しいが横幅が想定より短くなっている。フォームの幅は、16.4cmであって欲しいところが、15.4cmに、ピクチャボックスでも、8.9cmであるべきところが 8.4cmと短くなる。

そのため、画像とピクチャボックスの縦横比の差異により、ピクチャボックスの画像の上下に空白が生じてしまっている。普通のコントロールだけであれば若干の伸び縮みは許容できても、画像表示のように厳密に縦横の比率を求められるような処理では、この状況は大変よろしくない。

なお、文字列は縦横とも正しくサイズが拡大されていて問題はない。フォントについては同じフォントサイズを指定しておけば、あとはシステムが自動的にサイズの変換を行ってくれる。

「メインディスプレイのスケールは125%に設定されています」の横の「100%のスケールで Visual Stadioを再起動します」をクリックすると、Visual Stadioが再起動し、自動スケールがオフになる。ダイアログには「自動スケールがオフになっています。WPF/UWP XAMLデザイナーが正しく表示されない可能性があります」と表示される。

ここで、デザイナーによりコントロールの作成と配置を行う。サイズは、ディスプレイの表示スケールが 100%のときと同じ値である、フォーム 750 x 500ピクセル、ピクチャボックス 400 x 300ピクセルを設定する。

ビルドして結果を確認すると、コントロールのサイズは縦横とも 125%に拡大され、ピクチャボックスの画像も正しい比率で隙間なく表示される。

色々試行錯誤して何とかここまで分かってきたが、まず基本的なことは、デザイナー上のコントロールの見た目のサイズは、スクリーン上の見た目はのサイズと同じであるということ。従ってユーザインタフェースのデザインは、細かいピクセル数に拘らなければ、デザイナーをキャンバスに見立て、ビジュアル重視でにコントロールを配置していけば良いと思う。

結局のところポイントは、基準となる表示スケールをどこにするかであろう。最もオーソドックスな開発方法は、自動スケールはオンにし（方法１）、基準と決めた環境においてユーザインタフェースの作成を行う。それ以外の環境では外観の確認のみを行う。コントロールの位置やサイズの修正は基準の環境に戻って行うという手順が最適ではないかと思っている。

ただし、本アプリケーションのように、ピクチャボックスに画像を表示するようなピクセル数を意識する処理では、表示スケールが 100%でない場合は、 自動スケールをオフ（方法２）にして確認する必要が出てくる。ここら辺は臨機応変に対応していくしかないだろう。

なお、自動スケールがオフになっていると ピクセル単位の画像変換が行われるのか Visual Stadioを構成する文字列がかなり滲むので、必要なけれ極力使用しない方が良いだろう。