VS 2022 で Winform 高DPI互換プログラムを設計

VS 2022 で Winform 高DPI互換プログラムを設計

高DPI(拡大率>100%)では、UIデザイナーは常に100%に拡大するよう促され、100%に再起動しないとコントロールが乱れてしまいます。

最終更新 2022/05/14 12:02
AlexChow
読了目安 3 分
カテゴリ
Winform
タグ
.NET Winform UIデザイン Visual Studio

本記事では主に2つの問題を解決します

  • C# Winform 高DPIにおけるフォントのぼやけ
  • 高DPI(ズーム > 100%)でUIデザイナーが常に「100%に縮小」と促し、100%に戻さないとコントロールが飛び回る問題

テストプログラムの作成

  1. 新しい .NET Windows フォームアプリ(Winform)プロジェクトを作成

  1. .NET 6.0 を選択

  1. フォームサイズを 1000 x 1000 に設定(後でスケーリングが正しいか確認するため)

  1. ボタンを追加し、サイズを 150 x 50 に設定

  1. ピクチャーボックスを追加し、サイズを 300 x 300 に設定、右クリックで画像をインポート

  1. テストコードを追加
namespace WinFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            Text = this.Width + "x" + this.Height + " pic "+ pictureBox1.Width + "x" + pictureBox1.Height + 起動環境();

        }

        public static string 起動環境()
        {
#if NET461
            return (".NET Framework 4.6.1");
#elif NET6_0
            return (".NET6");
#endif
        }

    }
}
  1. 実行して効果を確認:net6 で実行するとサイズはすべて正しい

本格的に開始

  1. プロジェクトを右クリックし、アプリケーションマニフェスト app.manifest を追加。ファイル名はデフォルトのまま、修正

次の部分のコメントを解除して、DPI 認識を有効化

<application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
        <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
        <longPathAware xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">true</longPathAware>
    </windowsSettings>
</application>
  1. プロジェクト名をダブルクリックして、構成ファイルを編集

TargetFrameworks をデュアルターゲットフレームワークに変更:<TargetFrameworks>net6.0-windows;net461;</TargetFrameworks>、保存後はプロジェクトの再読み込みを促されます。VS を一度閉じてからもう一度開くことをお勧めします。

完全なファイルは以下の通り

<Project Sdk="Microsoft.NET.Sdk">

	<PropertyGroup>
		<OutputType>WinExe</OutputType>
		<TargetFrameworks>net6.0-windows;net461;</TargetFrameworks>
		<UseWindowsForms>true</UseWindowsForms>
		<ApplicationManifest>app.manifest</ApplicationManifest>
		<ApplicationVisualStyles>true</ApplicationVisualStyles>
		<ApplicationUseCompatibleTextRendering>false</ApplicationUseCompatibleTextRendering>
		<ApplicationHighDpiMode>SystemAware</ApplicationHighDpiMode>
	</PropertyGroup>

	<ItemGroup>
		<Compile Update="Properties\Resources.Designer.cs">
			<DesignTime>True</DesignTime>
			<AutoGen>True</AutoGen>
			<DependentUpon>Resources.resx</DependentUpon>
		</Compile>
	</ItemGroup>

	<ItemGroup>
		<EmbeddedResource Update="Properties\Resources.resx">
			<Generator>ResXFileCodeGenerator</Generator>
			<LastGenOutput>Resources.Designer.cs</LastGenOutput>
		</EmbeddedResource>
	</ItemGroup>
</Project>
  1. コントロールが見つからないと警告された場合は、Form1.Designer.cs と Form1.cs に以下を追加
using System;
using System.Windows.Forms;
  1. Program.csApplicationConfiguration.Initialize(); をコメントアウト

  2. 実行時に net461 を選択

備考:私の画面は 2800 x 1800、ズーム 175%

やはり、表示サイズが正しくない

  1. Form1.cs に AutoScaleMode = AutoScaleMode.Dpi; を追加
public Form1()
{
    AutoScaleMode = AutoScaleMode.Dpi; // この行を追加。'InitializeComponent();' の上に置くこと
    InitializeComponent();
}

再度実行

完璧!

  1. フォームをダブルクリックして編集しても、100% ズームの警告は表示されない。標準メニューと DataGridView を追加してテスト

完璧!二重の喜び!

まとめ

  • 新しい .NET Windows フォームアプリ(Winform)プロジェクト [.NET 6.0] を作成
  • アプリケーションマニフェスト app.manifest を追加し、DPI 認識を有効化
  • TargetFrameworks をデュアルターゲットフレームワークに変更:<TargetFrameworks>net6.0-windows;net461;</TargetFrameworks>
  • Program.csApplicationConfiguration.Initialize(); をコメントアウト
  • AutoScaleMode = AutoScaleMode.Dpi; // この行を追加。'InitializeComponent();' の上に置くこと

既存のプロジェクトも projet ファイルを編集することでこの新しいプロジェクト形式にアップグレードでき、本記事で説明した機能をサポートできます。続きのチュートリアルが必要な場合はコメントでお知らせください。ここ数日はバケーション中です。今日はここまで。また次回お会いしましょう!

対応する DEMO

さらに探索

関連読書

その他の記事
同じカテゴリ / 同じタグ 2024/02/29

Winformでもこんなデータ表示ができる

winform開発の過程で、データ表示機能が必要になることがよくあります。これまではgridcontrolコントロールを使用していましたが、今日は例を通して、winform blazor hybridでant design blazorのtableコンポーネントを使ってデータ表示を行う方法を紹介します。

続きを読む
同じカテゴリ / 同じタグ 2024/02/29

Winformの画面も綺麗にできる?

先日、winformでblazor hybridを使用することを紹介しました。また、blazorのUIを組み合わせることでwinformプログラムのデザインをより美しくできると言いました。今回はwinform blazor hybridで描画する例を挙げて説明します。参考になれば幸いです。

続きを読む