使用 DockPanel Suite 的响应式设计 UI

Question

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

现在树视图在停靠面板上，红框部分是放置在同一个停靠面板中的用户控件。我试图将红框作为另一种形式放置，但我无法将其放置在图片中。此外，此 winform 需要响应，因此我将 redbox 部分放入 table 布局 panel.winform 设计中，但实际上并不熟悉 dockpanel 套件参考。如果有新手教程可以参考，将不胜感激

当前设计：

Answer 1

有两种方法可以解决您的问题。第一个是肮脏的，第二个是优雅的。我所说的肮脏和优雅是指它们展示的方式。他们工作的方法都是一样的。

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

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

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

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 下的控件仍然存在，但只是隐藏了，因为它们是 child groupbox 并且用户看不到边界之外的所有内容。

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

使用 DockPanel Suite 的响应式设计 UI

Responsive Design UI with DockPanel Suite

c#

dockpanel-suite

winforms