以编程方式使 GUI 更整洁？

Question

我目前正在为一个照顾寄养儿童的组织开发一个程序。他们的旧解决方案已经过时且不受支持，因此他们想要一个可以承担管理部分的新系统。

我在这里需要帮助的是如何使我通过生成它制作的 GUI 看起来尽可能接近我手工制作的 GUI。

这里是我亲手制作的GUI：

这是用编程制作的同一个 GUI：

如您所见，GUI 的紧凑程度明显不同。生成的结果看起来也不同，因为他们希望所有字段都可编辑（这也是我不得不更改 GUI 制作方式的原因）。

我通过解释一个简单的 XML 文件来制作 GUI：

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <gui groupboxlabel="Barnets Stamdata" type="CHILD">
        <textbox label="CPR" />
        <textbox label="Navn" />
        <textbox label="Efternavn" />
        <textbox label="Addresse" />
        <textbox label="Hus nr." />
        <textbox label="Opgang" />
        <textbox label="Post Nr." />
        <textbox label="By" />
        <textbox label="Email" />
        <textbox label="Telefon nr." />
        <textbox label="Sagsbehandler" />
        <textbox label="Konsulent" />
        <textbox label="Aflastning" />
        <combobox label="Foranstaltning" />
        <datetimepicker label="Anbring" />
        <datetimepicker label="Udskriv" />
    </gui>
</root>

我想知道如何使生成的 GUI 像我在 IDE 中手工制作的第一个一样更整洁、更紧凑？或者至少尽可能接近。我已经将所有控件进入的 FlowLayout 中控件之间的边距属性设置为 0;0;0;0。

但是我可以进一步减小控件之间的距离，使它们靠得更近吗？

这里是一个并排比较，只是为了清楚地说明有多大的不同：

编辑

根据要求，创建控件的代码：

public GroupBox CreateNewView(String path, String token)
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(path);

            DataBag info = Facade.GetFosterChild(EIdentifierType.CPR, token);

            XmlNodeList nodes = xmlDoc.SelectNodes(@"/root/gui");
            GroupBox gb = new GroupBox();
            foreach (XmlNode node in nodes)
            {
                gb.Text = node.Attributes["groupboxlabel"].Value;
                gb.AutoSize = true;

                FlowLayoutPanel panel = new FlowLayoutPanel();
                panel.AutoSize = true;
                panel.WrapContents = true;
                panel.FlowDirection = FlowDirection.TopDown;
                panel.Dock = DockStyle.Fill;
                panel.Padding = new Padding(0, 0, 0, 0);

                for (int i = 0; i < node.ChildNodes.Count; i++)
                {
                    XmlNode child = node.ChildNodes.Item(i);
                    switch (child.Name)
                    {
                        case "textbox":
                            String txtlabel = child.Attributes["label"].Value;
                            TextBoxControl txtctrl = new TextBoxControl(txtlabel);
                            txtctrl.Content = (String)info.Data[i];
                            txtctrl.SetDisplay((String)info.Data[i]);
                            panel.Controls.Add(txtctrl);
                            panel.Width = txtctrl.Width;
                            break;
                        case "combobox":
                            String combolabel = child.Attributes["label"].Value;
                            ComboBoxControl comboctrl = new ComboBoxControl(combolabel, (String[])info.Data[i]);
                            comboctrl.Content = (String[])info.Data[i];
                            comboctrl.SetDisplay(0);
                            panel.Controls.Add(comboctrl);
                            panel.Width = comboctrl.Width;
                            break;
                        case "datetimepicker":
                            String datelabel = child.Attributes["label"].Value;
                            DateTimeControl datectrl = new DateTimeControl(datelabel, (DateTime)info.Data[i]);
                            panel.Controls.Add(datectrl);
                            panel.Width = datectrl.Width;
                            break;
                        case "#comment":
                            break;
                        default:
                            Console.WriteLine("No Tag Found");
                            break;
                    }
                }
                gb.Controls.Add(panel);
            }
            return gb;
        }

编辑 2

根据要求添加另一段代码。把它放在 Pastebin link 因为有点多 :S

http://pastebin.com/qtPRLgNK

Answer 1

控件带有默认 Margin (3, 3, 3, 3)。除了 FLP 的零 Padding 之外，您还应该将控件的 Margins 设置为零或您喜欢的值：

switch (child.Name)
{
    case "textbox":
        String txtlabel = child.Attributes["label"].Value;
        TextBoxControl txtctrl = new TextBoxControl(txtlabel);
        txtctrl.Content = (String)info.Data[i];
        txtctrl.SetDisplay((String)info.Data[i]);
        txtctrl.Margin = new Padding(1, 1, 1, 1); // <---- or whatever you like
        panel.Controls.Add(txtctrl);
        panel.Width = txtctrl.Width;
        break;
    case "combobox":
        String combolabel = child.Attributes["label"].Value;
        ComboBoxControl comboctrl = new ComboBoxControl(combolabel,
                                                       (String[])info.Data[i]);
        comboctrl.Content = (String[])info.Data[i];
        comboctrl.SetDisplay(0);
        comboctrl.Margin = new Padding(1, 1, 1, 1); // <----  or whatever you like
        panel.Controls.Add(comboctrl);
        panel.Width = comboctrl.Width;
        break;
    case "datetimepicker":
        String datelabel = child.Attributes["label"].Value;
        DateTimeControl datectrl = new DateTimeControl(datelabel,
                                                      (DateTime)info.Data[i]);
        datectrl.Margin = new Padding(1, 1, 1, 1); // <----  or whatever you like
        panel.Controls.Add(datectrl);
        panel.Width = datectrl.Width;
        break;
    case "#comment":
        break;
    default:
        Console.WriteLine("No Tag Found");
        break;
}

更新：

由于您的 Controls 实际上是 UserControls，请确保他们是

是Autosize = true和所有嵌入Controls有一个零Margin
..或者它们是 Autosize = false 并且有 最小值 Height 来容纳它们。

您的图像显示 4 像素的间隙。这暗示不是 2x 3 像素的默认边距高度是罪魁祸首，而是错误的 UserControl.Height 或 2x 2 像素。

以编程方式使 GUI 更整洁？

Make a GUI neater programmatically?

c#

winforms

user-interface