WinForm響應式佈局設計實踐_ZenDei技術網路在線

創建響應式WinForm應用程式並不那麼簡單。響應式佈局，我們在此指的是在不同屏幕解析度下的可用性。對於WinForm應用程式，我們需要明確地根據解析度來調整控制項的大小和重新定位。雖然在使用WPF時有相關的實踐應用，通過使用控制項的docking和anchoring，或使用panels等方法，但... ...

引言

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