Адаптивный дизайн интерфейса с DockPanel Suite - PullRequest
Новая
       27

Адаптивный дизайн интерфейса с DockPanel Suite

0 голосов
/ 17 октября 2018

У меня есть дизайн 1 winform, чтобы выглядеть как на картинке.Но я хочу, чтобы выделенная желтая часть была присоединяемой со ссылкой на комплект док-панели.Это выполнимо или любое другое предложение о лучшем дизайне?

В данный момент древовидная структура находится на панели подключения, а часть красного поля - это пользовательский элемент управления, расположенный в той же панели подключения.Я попытался поместить redbox как другую форму, но я не могу разместить его так, как показано на картинке.Кроме того, эта win-форма должна быть отзывчивой, поэтому я вставил часть redbox в макет таблицы layout.winform и фактически не знаком со ссылкой на набор док-панели.Если есть учебник для начинающих, на которого я могу сослаться, он будет очень признателен.

Текущий дизайн:

CURRENT DESIGN

1 Ответ

0 голосов
/ 17 октября 2018

Есть два подхода к вашей проблеме.Первый грязный, второй элегантный.Под грязным и элегантным я подразумеваю способ их отображения.Метод, которым они работают, одинаков.

Я объясню вам, как это сделать в пустой форме, а вы просто реализуете это в своей заполненной форме.

  • Сначала создайте новую форму.
  • Добавьте к нему 2 или более групповых блоков
  • Добавьте в них некоторые элементы (просто чтобы посмотреть, работает ли он)
  • Вверху каждого поля добавьте кнопку, которая будет переключать видимость

Теперь наша форма выглядит следующим образом, и давайте посмотрим на ее код. 

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

Теперь, когда у нас есть такой код и нажмитепри нажатии кнопки он свернет групповую коробку.

ПРИМЕЧАНИЕ. Элементы управления в групповой коробке все еще находятся на месте, но просто скрыты, поскольку они являются дочерними для групповой коробки, и все, что находится за пределами границ, невидимо для пользователя.

Это грязноКстати, я хотел бы отобразить его намного красивее со знаком МИНУС в правой части заголовка группы, поэтому у меня нет кнопки внутри него.Для этого вам нужно создать пользовательский элемент управления, который наследует групповой блок, добавить к нему кнопку, расположить его в строке заголовка и создать для него событие.Это легко, если вы когда-либо пытались создать пользовательские элементы управления, но если вы этого не сделали, и вы думаете, что подход dirty вам подходит, тогда не пытайтесь.

...