WinForm响应式布局设计实践

2019-10-08 13:50栏目:游戏大厅
TAG:

引言

始建响应式WinForm应用程序并不那么粗略。 响应式布局,在此作者指的是应用程序在差别荧屏分辨率下的可用性。 对于WinForm应用程序,大家要求分明地依据分辨率来调治控件的尺寸和重新定位。 即使在利用WPF时有相关的推行应用,通过采纳控件的docking和anchoring,或使用panels等方法,但本文提供了一种将响应式应用于WinForm应用程序的两样措施。

背景

小编在一个本身布置的大约游戏中相见了难点:笔者设计了一台分辨率为一九一六x1080的机器, 可是当作者策动在笔记本Computer上播报时,发掘应用程序边界跑到荧屏之外。因而很有须要让程序来适应不一致分辨率的器具,并非让客商来适应程序。 因而,笔者对代码进行了革新。

技术

实则没什么技艺可言,只是用了三个小技术。大家用五个常量来保存设计时的显示器分辨率,我们称为设计时分辨率。这样,无论什么时候运维应用程序,它都会收获一个乘法因子,那实际上是多个比重因子,通过将目前分辨率除以设计时分辨率来获得该因子。 窗体的持有控件都被传送给那些类对象开展缩放和调解大小。

代码

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;
}

诸如,该应用程序设计在一九二零x1080分辨率。 假如此应用程序在分辨率为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。 下边包车型客车图形以两种不相同的分辨率截取。 上边包车型大巴截图是在一九二零x1080分辨率下截取的:
图片 1

上面包车型客车截图是在1360x768分辨率下截取的:
图片 2

下边包车型地铁截图是在1024x768分辨率下截取的:
图片 3

实际,通过压缩/扩大和另行定位调控到超级水平,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响应式布局设计实践