c# - 使用 DockPanel Suite 的响应式设计 UI

Question

我设计了 1 个 winform 看起来像图片。但我希望突出显示的黄色部分可以与停靠面板套件参考对接。这是可行的还是其他更好设计的建议？

现在树视图位于停靠面板上，红色框部分是放置在同一停靠面板中的用户控件。我试图把红框作为另一种形式，但我不能把它放在图片中。此外，这个 winform 需要响应，所以我将 redbox 部分放在表格布局 panel.winform 设计中，实际上并不熟悉停靠面板套件参考。如果有初学者教程可以参考，将不胜感激。

当前设计：

Answer 1

有两种方法可以解决您的问题。一是肮脏的，二是优雅的。肮脏和优雅的意思是他们展示的方式。他们工作的方法都是一样的。

我将向您解释如何在空表单上执行此操作，您只需在填充的表单中实现它。

• 首先创建新表格。
• 向其中添加 2 个或更多 GroupBox
• 在其中添加一些项目（只是为了看看它是否有效）
• 在每个框的顶部添加将切换可见性的按钮

我们的表单现在看起来像这样，让我们​​看看它背后的代码。

using System;
using System.Drawing;
using System.Windows.Forms;

namespace Test
{
    public partial class TestForm : Form
    {
        // This is property
        bool ShowFirstGroupBox
        {
            get
            {
                // We let user get our property from private variable
                return _ShowFirstGroupBox;
            }
            set
            {
                // When user change this property we do something based on that
                switch(value)
                {
                    case true:
                        groupBox1.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
                        break;
                    case false:
                        groupBox1.Size = new Size(groupBox1.Width, 55);
                        break;
                }

                _ShowFirstGroupBox = value;
            }
        }
        bool ShowSecondGroupBox
        {
            get
            {
                return _ShowSecondGroupBox;
            }
            set
            {
                switch (value)
                {
                    case true:
                        groupBox2.Size = new Size(groupBox1.Width, FirstGroupBoxDefaultHeight);
                        break;
                    case false:
                        groupBox2.Size = new Size(groupBox1.Width, 55);
                        break;
                }

                _ShowSecondGroupBox = value;
            }
        }

        // We store our boxes current state ( TRUE = shown, FALSE = HIDDEN )
        bool _ShowFirstGroupBox = true;
        bool _ShowSecondGroupBox = true;

        // We store our default height for groupboxes
        int FirstGroupBoxDefaultHeight;
        int SecondGroupBoxDefaultHeight;

        public TestForm()
        {
            InitializeComponent();

            // Assigning default height of our groupboxes
            FirstGroupBoxDefaultHeight = groupBox1.Height;
            SecondGroupBoxDefaultHeight = groupBox2.Height;
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            ShowFirstGroupBox = !(_ShowFirstGroupBox); // This sets our property value to opposite of this boolean
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            ShowSecondGroupBox = !(_ShowSecondGroupBox); // This sets our property value to opposite of this boolean
        }
    }
}

现在，当我们有这样的代码并按下按钮时，它将折叠组框。

注意： groupbox 下的控件仍然存在，但只是隐藏，因为它们是 groupbox 的子级，并且用户看不到边界之外的所有内容。

这是一种肮脏的方式，因为我想在 groupbox 标题的右侧使用减号来显示它更漂亮，所以我里面没有按钮。为此，您需要创建继承 groupbox 的自定义控件，向其添加按钮并将其放置在标题栏中并为其创建事件。如果您曾经尝试过创建自定义控件，这很容易，但如果您没有尝试过，并且您认为dirty方法适合您，请不要尝试。