Построение редактора графического пользовательского интерфейса в C#
В этой статье я покажу, как построить простой "редактор графического пользовательского интерфейса". Для начала давайте обсудим, что означает "редактор графического пользовательского интерфейса". Редактор графического пользовательского интерфейса "Редактор графического пользовательского интерфейса" или "построитель графического пользовательского интерфейса" — это средство разработки программного обеспечения. Он имеет разновидность структуры WYSIWYG и помогает пользователям построить структуру без кодирования или с минимальным кодированием. Без графического пользовательского интерфейса нам пришлось бы писать код для всего. Давайте приступим... ПОШАГОВОЕ ПОСТРОЕНИЕ РЕДАКТОРА ГРАФИЧЕСКОГО ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА Сначала создадим новый игровой проект XNA 3.1. Он находится здесь. Теперь поговорим обо всем, что мы собираемся делать.
1. Добавление файла ресурсов, включающего изображения обложек для элементов управления Мы добавляем 3-4 изображения обложек для нашего элемента управления "Кнопка". Прежде всего создаем файл ресурсов, который поможет нам хранить обложки: Теперь откроем файл ресурсов и последовательно выберем в меню пункты "Add Resource (Добавить ресурс)->Add Existing File... (Добавить существующий файл...)" Затем добавим 4 демонстрационные обложки (можно создать собственные обложки с названиями "disabled", "down", "over" и "up"): Здесь они добавляются в ресурсы. 2. Структура, которая поможет экспортировать список элементов управления в виде XML-файла Сначала создадим новый XML-файл: Теперь включим в него код, аналогичный приведенному ниже:
Мы получаем преимущества XML для структуры, которую мы построим в редакторе графического пользовательского интерфейса, и как можно видеть, мы добавили элементы, поскольку они уже являются свойствами элементов управления. Фактически будет большой ошибкой не использовать XML в таком виде приложений. 3. Папка "Screens", которая поможет читать эти элементы управления Просто создайте новую папку в проекте и назовите ее Screens. 4. Создание класса, в котором будут объявлены "общедоступные статические" переменные, для обмена данными Windows и XNA Создайте новый класс и назовите его Infos.cs. Он может выглядеть следующим образом: В этой точке мы не создаем никакой код. 5. "Панель свойств", где можно изменять свойства выбранных элементов управления Нам необходимо добавить панель свойств. Сначала нужно создать форму Windows Forms: Затем следует установить свойства, как показано ниже. Backcolor =White Создадим новую папку и пользовательский элемент управления с именем Control_Properties. Установим его свойства, как показано ниже: BackColor = White Он должен выглядеть, как показано выше. Теперь добавим элемент управления "Таймер" в пользовательский элемент управления. Установим для приведенных выше элементов управления следующие свойства:
Добавим GroupBox и установим его свойство Text в значение "Properties". Добавим этот пользовательский элемент управления в ранее построенную форму Windows Forms "Properties_Panel". Теперь форма Properties_Panel должна выглядеть следующим образом: 6. "Панель элементов", где можно добавлять элементы управления Теперь следует создать форму Windows Forms для "панели элементов" и добавить изображения, которые будут использоваться в этой панели элементов. Добавьте новую форму и назовите ее Toolbox.cs. Установите свойства, как показано ниже: Добавьте элемент управления GroupBox, а затем установите его свойство Text в значение "Toolbox" и свойство Dock в значение "Fill". Теперь добавьте изображения элементов управления, которые будут использоваться в панели элементов: последовательно выберите в меню пункты "Add Resource (Добавить ресурс)->Add Existing Item (Добавить существующий элемент)"; таким образом изображения элементов управления будут добавлены. Добавьте 9 элементов управления PictureBox и назначьте им изображения, которые только что были добавлены в ресурс. Получится следующий вид: 7. Наши настраиваемые элементы управления Теперь создадим наши собственные элементы управления, перечисленные ниже: Создайте новый класс и назовите его XButton.cs. Обновите этот класс следующим образом:
Аналогичным образом создайте классы для остальных элементов управления. Теперь давайте обсудим наш класс INFOS. В этом классе хранятся все сведения, необходимые для взаимодействия между XNA и Windows Forms (окно свойств и панель элементов). Отлично, давайте взглянем на код и попробуем его объяснить: public static Control kontrool; Эта статическая управляющая переменная является выбранным элементом управления в окне XNA. При выборе элемента управления эта переменная будет хранить его имя. public static List<Control> kontroller = new List<Control>(); Эта переменная хранит все элементы управления (повторяющиеся) в окне XNA. public static List<Control> strunq = new List<Control>(); Эта переменная хранит все элементы управления (уникальные) в окне XNA. public static Control selectedcontrol; Эта статическая управляющая переменная является выбранным элементом управления в окне XNA. При выборе элемента управления эта переменная будет хранить его имя. public static bool xmlbuild; В случае значения true мы будем создавать XML-файл.
Переменная "varpub" контролирует, добавляется ли заданный элемент управления или нет. Переменная "a" прибавляет 1 к свойствам name и text элемента управления. Переменная "close" предотвращает повторное добавление указанного элемента управления. Можно рассматривать ее как блокировку. Переменная "atleastonce" контролирует, чтобы указанный элемент управления был добавлен хотя бы один раз.
Функция Button_Added — это ключ, который управляет тем, где кнопка добавляется в игровое окно. ButtonAdd_Num помогает увеличить переменную "a".
Эта функция принимает все повторяющиеся элементы управления и делает их уникальными в списке элементов управления strunq по ссылке. Ее можно вызвать следующим образом: CreateUniqueList(Infos.kontroller,ref Infos.strunq);
В этой функции создания XML мы запрашиваем все уникальные элементы управления в strunq и записываем их в XML-файл. Структура элементов управления Давайте обсудим структуру кода элементов управления и попробуем объяснить ее. Как уже говорилось выше, мы создали 9 элементов управления, начинающихся с "X". Теперь мы приступим к поэтапному объяснению кода элементов управления XButton.
Переменная "dragInProgress" дает нам значение, указывающее, продолжается ли процесс Drag. Переменные "MouseDownX" и "MouseDownY" хранят координаты X и Y выбранного элемента управления.
Когда мы создавали новый элемент управления XButton, это свойство имело значение по умолчанию.
Это логическое свойство по умолчанию предназначено только для чтения, но мы его переопределяем. При выборе элемента управления автоматически рисуется прямоугольник со строками. Чтобы предотвратить это, мы устанавливаем это свойство в значение false.
Эта функция обрабатывает наше положение в элементе управления.
Если мы щелкаем левой кнопкой мыши, то функция меняет фон, и поскольку процесс перетаскивания отсутствует, устанавливает для dragInProgress значение false.
Если мы, находясь в элементе управления, щелкнем его правой кнопкой мыши, то мы его удалим и перезагрузим список элементов управления.
Это функция, с помощью которой "перетаскивается" элемент управления.
Эти функции изменяют обложку элемента управления "Кнопка", когда текущая обложка исчезает в данном элементе управления. Структура пользовательских элементов управления Теперь давайте обсудим пользовательский элемент управления Control_Properties: string[] colorNames = System.Enum.GetNames(typeof(KnownColor)); Мы извлекаем все системные цвета в строковый массив:
Таким образом в поле со списком добавляются системные цвета, сохраненные в colorNames.
Таймер проверяет, выбран ли элемент управления. Если элемент управления выбран, то он добавляется в управляющую переменную "kontrool".
Это помогает нам изменить имя выбранного элемента управления.
Это помогает нам изменить свойство AllowDrop выбранного элемента управления.
С помощью этого кода можно включать или отключать указанный элемент управления.
В comboBox3 хранятся системные цвета, которые были добавлены выше. Можно изменить свойство ForeColor элемента управления, выбрав значение из comboBox3.
Этот код помогает изменить значение Location.X выбранного элемента управления.
Этот код помогает изменить значение Location.Y выбранного элемента управления.
Этот код помогает изменить значение Size.Width выбранного элемента управления.
Этот код помогает изменить значение Size.Height выбранного элемента управления.
Этот код помогает изменить значение Text выбранного элемента управления. Однако, как вам известно, в некоторых элементах управления отсутствует значение Text.
Эти коды представляют вызовы API Win32. Они только отключают кнопку закрытия в форме.
И мы выполняем эти вызовы, отключая кнопку закрытия.
По умолчанию возможность изменения размера форм должна отсутствовать, поэтому мы предоставляем эти значения.
По умолчанию возможность перемещения форм должна отсутствовать, поэтому мы предоставляем эти значения.
Мы отправляем логическое значение в класс Infos, где можно построить XML-файл. Панель элементов
Мы изменяем BorderStyle, чтобы вид этого элемента соответствовал тому, что мы в нем не находимся.
Мы изменяем BorderStyle, чтобы вид этого элемента соответствовал тому, что мы в нем находимся.
С помощью Button_Added мы добавляем в проект элемент управления "Кнопка". GAME1.CS Прежде всего мы добавляем ссылку на Windows.Forms в System.
Создание экземпляров форм Properties_Panel и Toolbox:
В конструкторе Game1:
Теперь добавляем заголовок окна XNA и включаем курсор мыши:
После этого мы устанавливаем нужные расположения окон XNA, панели свойств и панели элементов.
Создаем таймер, который поможет нам показывать элементы управления в форме и динамически изменять значения в Properties_Panel.
В функции конструктора Game1():
Включаем таймер, чтобы он немедленно начал работать.
Этот таймер имеет значение интервала 1 (очень быстрый), и добавление события таймера мы обсудим прямо сейчас.
Давайте обсудим то, что происходит после добавления элемента управления "Кнопка".
Мы динамически запрашиваем, добавлен ли какой-либо элемент управления, и если добавлен, то активен ли он.
мы создаем обработчик событий, который будет отключать перемещение окна XNA.
Давайте запустим наше приложение и попробуем что-нибудь сделать. Создадим интерфейс, аналогичный показанному ниже. Нажмем кнопку "Save" ("Сохранить") и повнимательнее рассмотрим файл controls.xml, который находится по пути x86->bin->debug.
Да, это означает, что мы успешно сделали все, что хотели. Теперь список элементов управления может использоваться в наших экранах. Во второй части я буду говорить о том, как загружать этот XML-файл, добавлять события и создавать экраны. После чего мы успешно закончим процесс создания редактора графического пользовательского интерфейса. Встретимся в следующих статьях! |
Примечание
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.