WinForm響應式佈局設計實踐

引言

建立響應式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！