引言

創建響應式WinForm應用程序並不那麽簡單。 響應式布局，在此我指的是應用程序在不同屏幕分辨率下的可用性。 對於WinForm應用程序，我們需要明確地根據分辨率來調整控件的大小和重新定位。 雖然在使用WPF時有相關的實踐應用，通過使用控件的docking和anchoring，或使用panels等方法，但本文提供了一種將響應式應用於WinForm應用程序的不同方法。

背景

我在一個自己設計的簡單遊戲中遇到了問題：我設計了一臺分辨率為1920x1080的機器， 但是當我試圖在筆記本電腦上播放時，發現應用程序邊界跑到屏幕之外。由此很有必要讓程序來適應不同分辨率的設備，而不是讓用戶來適應程序。 因此，我對代碼進行了改進。

技術

其實沒什麽技術可言，只是用了一個小技巧。我們用兩個常量來保存設計時的屏幕分辨率，我們稱之為設計時分辨率。這樣，無論何時運行應用程序，它都會獲得一個乘法因子，這實際上是一個比例因子，通過將當前分辨率除以設計時分辨率來獲得該因子。 窗體的所有控件都被傳遞給這個類對象進行縮放和調整大小。

代碼

The Responsive Class - Responsive.cs

創建一個類Responsive.cs，添加5個變量。

float WIDTH_AT_DESIGN_TIME = (float)Convert.ToDouble
                             (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_WIDTH"]);
float HEIGHT_AT_DESIGN_TIME = (float)Convert.ToDouble
                              (ConfigurationManager.AppSettings["DESIGN_TIME_SCREEN_HEIGHT"]);
Rectangle Resolution;
float WidthMultiplicationFactor;
float HeightMultiplicationFactor;
 

設計時屏幕分辨率保存在App.config文件中。

<add key ="DESIGN_TIME_SCREEN_WIDTH" value="1920"/>
<add key ="DESIGN_TIME_SCREEN_HEIGHT" value="1080"/>

當類的一個實例被創建時，當前的解析被提供給構造函數。 之後調用該類的SetMultiplicationFactor（）方法。 這種方法通過將當前分辨率除以設計時間分辨率來獲得縮放因子。

public Responsive(Rectangle ResolutionParam)
{
    Resolution = ResolutionParam;
}

public void SetMultiplicationFactor()
{
    WidthMultiplicationFactor = Resolution.Width / WIDTH_AT_DESIGN_TIME;
    HeightMultiplicationFactor = Resolution.Height / HEIGHT_AT_DESIGN_TIME;
}
 

例如，該應用程序設計在1920x1080分辨率。 如果此應用程序在分辨率為1024x768的計算機上運行，則WidthMultiplicationFactor和HeightMultiplicationFactor更改如下：

WidthMultiplicationFactor = 1024/1920 = 0.533
HeightMultiplicationFactor = 768/1080 = 0.711

最後有兩種重載方法，它們為應用程序控件提供響應式解決方案（最佳大小，位置和字體大小）的最終方法。

public int GetMetrics(int ComponentValue)
{
    return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
}

public int GetMetrics(int ComponentValue, string Direction)
{
    if (Direction.Equals("Width") || Direction.Equals("Left"))
        return (int)(Math.Floor(ComponentValue * WidthMultiplicationFactor));
    else if (Direction.Equals("Height") || Direction.Equals("Top"))
        return (int)(Math.Floor(ComponentValue * HeightMultiplicationFactor));
    return 1;
}

例如，如果存在寬度=465，高度=72，左=366，頂部=41和字體大小=40的控件，則該方法返回建議的大小，位置和字體大小為：

Width = 465 * 0.533 = 248
Height = 72 * 0.711= 51
Left = 366 * 0.533= 195
Top = 41 * 0.711= 29
Font-size = 40 * 0.533 = 21

事實上，這些方法返回縮放的控件與大小、位置和字體大小，而這些值是展示的最佳值。

使用 Responsive Class

我們需要的是以任何需要響應的形式簡單地創建這個類的對象。 當前的分辨率是在構造函數中提供的， 之後的工作就是建立所需的乘法因子。

Responsive ResponsiveObj;
ResponsiveObj = new Responsive(Screen.PrimaryScreen.Bounds);
ResponsiveObj.SetMultiplicationFactor();

在這之後，表單的所有控件都將逐個傳遞，以在表單的加載事件中調整大小和重新定位。 這個調用在下面的代碼中完成。 它所做的是首先將窗體定位到屏幕的中心。 我在這裏設置了一個校準常數（30），為最佳的垂直位置添加控件，這可能因開發人員而異。 之後，表單的每一個控件都會重新定位，調整大小，並重新校準字體大小。

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           // Form width and height set up.
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        // Form centering.
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  // 30 is a calibration factor.

    foreach (Control Ctl in this.Controls)
    {
        Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                   ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
        Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
        Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
        Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
        Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
    }
}

示例

以下是一個非常簡單的表單，其中包含一個data gird，一個label，一個textbox和一個button。 下面的圖片以三種不同的分辨率截取。 下面的截圖是在1920x1080分辨率下截取的：

下面的截圖是在1360x768分辨率下截取的：

下面的截圖是在1024x768分辨率下截取的：

實際上，通過縮小/擴大和重新定位控制到最佳水平，Form在不同的分辨率下看起來是一樣的。

代碼調整

就像我們對垂直中心定位所做的那樣，我們可能需要設置一些參數來調整整個布局。

另外，建議開發者嘗試以不同的分辨率查看表單的外觀，以確認所有的控件都是可見的，並按照預期在屏幕上正確定位。

除此之外，對於一個簡單的表單，這是一個通用的方法，它假定表單的所有控件都具有這些屬性---寬度，高度，左側，頂部和字體大小。但是，真實情況並非如此。有一些表單控件不具有所有這些屬性。例如，圖片框沒有font-size屬性。因此，如果這樣的情況下沒有明確處理，運行代碼將會導致運行時異常。本文旨在介紹這種方法，開發人員需要根據實際情況進行校準。建議的方法如下：

private void ResponsiveForm_Load(object sender, EventArgs e)
{
    Width = ResponsiveObj.GetMetrics(Width, "Width");           // Form width and height set up.
    Height = ResponsiveObj.GetMetrics(Height, "Height");
    Left = Screen.GetBounds(this).Width / 2 - Width / 2;        // Form centering.
    Top = Screen.GetBounds(this).Height / 2 - Height / 2 - 30;  // 30 is a calibration factor.

    foreach (Control Ctl in this.Controls)
    {
        if (Ctl is PictureBox)
        {
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
        else
        {
            Ctl.Font = new Font(FontFamily.GenericSansSerif, 
                                ResponsiveObj.GetMetrics((int)Ctl.Font.Size), FontStyle.Regular);
            Ctl.Width = ResponsiveObj.GetMetrics(Ctl.Width, "Width");
            Ctl.Height = ResponsiveObj.GetMetrics(Ctl.Height, "Height");
            Ctl.Top = ResponsiveObj.GetMetrics(Ctl.Top, "Top");
            Ctl.Left = ResponsiveObj.GetMetrics(Ctl.Left, "Left");
        }
    }
}

可能會根據業務員需要和控件的屬性來調整代碼。 此外，可能需要為不同的控件類型引入更多的重載方法。

其他

如前所述，還有其他一些方法，例如使用WPF，使用anchoring/docking等，這是一個更聰明的選擇。 如果表單上有數千個控件，則可能會遇到加載延遲。 然而，這點延遲對現在運行飛快的處理器來說不成問題。 這種方法只是在表單的加載時才執行一次調用操作，因此不會帶來致命的性能下降的問題。

結尾

創建響應式WinForm應用程序，根據機器的運行時間分辨率自動調整大小，重新定位字體大小並重新校準字體大小，這是一種面向開發人員的方法。 只需將該類添加到項目中，在App.config文件中設置設計時分辨率，然後在窗體的加載事件中添加響應代碼。 So easy！

WinForm響應式布局設計實踐