您的位置:澳门新葡亰平台官网 > 魔镜游戏 > WinForm响应式布局设计实践

WinForm响应式布局设计实践

2019-10-01 11:12

WinForm响应式布局设计实践。WinForm响应式布局设计实践。引言

创建响应式WinForm应用程序并不那么轻易。 响应式布局,在此笔者指的是应用程序在差别荧屏分辨率下的可用性。 对于WinForm应用程序,我们必要确定地根据分辨率来调动控件的高低和再度定位。 固然在行使WPF时有相关的实行应用,通过动用控件的docking和anchoring,或行使panels等艺术,但本文提供了一种将响应式应用于WinForm应用程序的例外方法。

WinForm响应式布局设计实践。背景

自个儿在二个本人布署的简短游戏中遇见了难点:笔者设计了一台分辨率为一九一九x1080的机器, 可是当我谋算在台式机Computer上播报时,发掘应用程序边界跑到显示屏之外。因而很有不可缺少让程序来适应区别分辨率的配备,并非让顾客来适应程序。 因而,小编对代码进行了革新。

技术

WinForm响应式布局设计实践。事实上没什么手艺可言,只是用了贰个小技巧。大家用四个常量来保存设计时的显示器分辨率,我们称为设计时分辨率。那样,无论曾几何时运转应用程序,它都会博得二个乘法因子,那实在是三个比例因子,通过将眼下分辨率除以设计时分辨率来赢得该因子。 窗体的具有控件都被传送给这些类对象开展缩放和调治大小。

代码

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;

WinForm响应式布局设计实践。设计时显示屏分辨率保存在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的微型Computer上运维,则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。 下边包车型客车图样以三种不相同的分辨率截取。 上边包车型客车截图是在1917x1080分辨率下截取的:
图片 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响应式布局设计实践

关键词: