Проектирование графического интерфейса пользователя

Интерфейс приложения должен быть адаптивным, корректно отображаться и функционировать на мониторах различного типа, с различным разрешением и форм-фактором экрана.

Стартовый экран приложения изображен на рисунке 2.6

Рисунок 2.6 Стартовый экран приложения

 

Окно создания диаграмм изображено на рисунке 2.7

 

Рисунок 2.7 Интерфейс редактора диаграмм

РАЗРАБОТКА ПРОГРАММНОГО ПРОДУКТА

Подключение библиотек

Для осуществления функционала приложения и реализации требуемых функций необходимо некоторые библиотеки компонентов. Самые нужные – это компелекс библиотек DevExpress. Они содержат необходимые компоненты для создания редактора диаграмм. Вторая библиотека –MaterialSkin.dll. Она содержит самодельные элементы управления формы с возможностью подключения материалов. Библиотеки подключались с помощью встроенной утилиты NuGet. На рисунке 3.1 изображен процесс подключения библиотек.

Рисунок 3.1 Добавление ссылок на библиотеки.

 

Разработка пользовательского интерфейса

Программа была написана на языке программирования C# с использованием возможностей Windows API в среде программирования Visual Studio 2022 с пакетом .NETFramework. Интерфейс приложения разрабатывался в конструкторе интерфейса, изображенном на рисунке 3.2.

 

Рисунок 3.2 Конструктор интерфейса в среде разработки VisualStudio 2022

Интерфейс представляет собой форму с размещенным на ней компонентами Button, которые ведут в другие формы-подпрограммы.

 

Разработка основного функционала

После подключения всех необходимых библиотек и расположения компонентов на форме в конструкторе, можно приступать к разработке основного функционала.

 

3.3.1 Главная форма Form1. cs

Главная формаForm1.cs является главным меню программы, из которой возможен доступ к остальным.

В ней написан код для открытия других форм.

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

 

namespace LXDD

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

 

private void Form1_Load(object sender, EventArgs e)

{

 

}

 

private void simpleButton1_Click(object sender, EventArgs e)

{

Майндкарты Diagram = new Майндкарты();

Diagram.Show();

}

 

private void simpleButton2_Click(object sender, EventArgs e)

{

 

}

 

private void simpleButton4_Click(object sender, EventArgs e)

{

 

}

}

}

Форма Form2.cs

Форма Form2.cs является первым встроенным приложением программы «АМР ДОО». Её функция – создание майндкарт и диаграмм, работа с ними, смена стилей, сохранение, печать и экспорт данных, совместимость с другими программами, такими как MSVisio.Программа использует библиотеки DevExpress для создания редактора диаграмм.

Для начала перетаскивается элемент управления diagramControl, и прописываются ему свойства как указаны на рисунке 3.3. Также его следует закрепить в родительном контейнере.

Рис. 3.3 Свойства элемента diagramControl

Это обозначит наше рабочее поле, в котором будут находится диаграммы. После прописывания свойств объекту, исправлению ошибок и тестирования в отдельно предоставленном режиме RunDesigner, а также при сборке всего проекта, можно продолжить со следующими объектами.

Он показывает сетку и линейки, которые помогают конечным пользователям упорядочивать фигуры. Сетку и линейки можно скрыть, переключив соответствующие опции на странице Вид.

Сетка динамически изменяется при масштабировании. Когда пользователь увеличивает или уменьшает масштаб чертежа, расстояние между сетками автоматически изменяется, чтобы соответствовать новому увеличению.

Далее добавляется меню ribbonControl (рисунок 3.4). Элемент управления Ribbon реализует ленточный интерфейс, который был впервые представлен в Microsoft Office. Ленточный пользовательский интерфейс является альтернативой стандартным полосам и иерархической модели меню в приложениях. Он разработан для повышения удобства использования приложений путем группировки команд меню по страницам и категориям. Также, знакомый интерфейс поможет пользователю быстрее переключаться между программами в случае необходимости и ускорит привыкание.

                                       Рис 3.4 Вид элемента ribbon

Часть свойств элемента ribbon указаны на рисунке 3.5.

Рис. 3.5 Свойства элемента ribbon

 

 

Данный элемент является самым большим по функционалу в приложении. Как видно на рисунке 3.4, имеется 4 главных вкладки, 2 вкладки, активнные только при работе с медиаконтентом, содержимое вкладок, используемое для изменения контента или вида самого приложения, быстрые кнопки отмены/вперед, а также меню сохранения.

Разберем каждый элемент отдельно.

 

· Главная – используется для основных функций с диаграммами

o Буфер обмена – копирование, вырезание, вставка контента

o Шрифт – настройки шрифта

o Параграф – настройки отображения текста

o Инструмент – смена инструментария (указатель, соединения, фигуры)

o Стили фигур – смена вида фигур

o Упорядочить – возможность передвижения объектов по слоям

· Вставка (рисунок 3.6) – работа с добавлением элементов

o Контейнер – создание объекта Контейнера с разными разновидностями

o Лист – создание объекта Лист с разными разновидностями

o Фото – импорт фотографий

Рис 3.6 Вид вкладки Вставка

 

· Дизайн (рисунок 3.7) – работа с видом всей страницы

o Страница – настройки вида страницы

o Темы – общая тема всей диаграммы

o Настройка – привязка элементов

o Поля – форматирование диаграмм и соединений

 

Рис 3.7 Вид вкладки Дизайн

· Вид (рисунок 3.8) – настройка вида рабочего поля

o Вид – настройка полей и панелей

o Приближение – изменение размера рабочего окна

 

Рис 3.8 Вид вкладки Вид

Далее разберем элемент ToolBoxDock. Для него прописаны свойства как на рисунке 3.9.

                                                                                       Рис 3.9 Свойства элемента ToolBoxDock

ToolBoxDock используется для выбора необходимых фигур из встроенной библиотеки и использовании их при построении диаграмм/майндкарт

 

 

Помимо описанного интерфейса, в программе также доступны горячие клавиши, в основном совпадающие с обычными в приложениях MSOffice. Таблица горячих клавиш с указанием соответствующей команды. (таблица 3.9)

Таблица 3.10

Горячие клавиши программы

Горячие клавиши	Команда
ESC	DiagramCommandsBase.CancelCommand
DELETE	DiagramCommandsBase.DeleteCommand
CTRL+C	DiagramCommandsBase.CopyCommand
CTRL+V	DiagramCommandsBase.PasteCommand
CTRL+X	DiagramCommandsBase.CutCommand
CTRL+A	DiagramCommandsBase.SelectAllCommand
CTRL+N	DiagramCommandsBase.NewFileCommand
CTRL+O	DiagramCommandsBase.OpenFileCommand
CTRL+S	DiagramCommandsBase.SaveFileCommand
CTRL+P	DiagramCommandsBase.ShowPrintPreviewCommand
CTRL+1	DiagramCommandsBase.SelectToolCommand.WithParameter(CommandParameters.SelectTool_PointerTool)
CTRL+3	DiagramCommandsBase.SelectToolCommand.WithParameter(CommandParameters.SelectTool_ConnectorTool)
CTRL+8	DiagramCommandsBase.SelectToolCommand.WithParameter(CommandParameters.SelectTool_RectangleTool)
CTRL+9	DiagramCommandsBase.SelectToolCommand.WithParameter(CommandParameters.SelectTool_EllipseTool)
CTRL+SHIFT+T	DiagramCommandsBase.SetVerticalAlignmentCommand.WithParameter(VerticalAlignment.Top)
CTRL+SHIFT+M	DiagramCommandsBase.SetVerticalAlignmentCommand.WithParameter(VerticalAlignment.Center)
CTRL+SHIFT+V	DiagramCommandsBase.SetVerticalAlignmentCommand.WithParameter(VerticalAlignment.Bottom)
CTRL+SHIFT+L	DiagramCommandsBase.SetHorizontalAlignmentCommand.WithParameter(VerticalAlignment.Left)
CTRL+SHIFT+R	DiagramCommandsBase.SetHorizontalAlignmentCommand.WithParameter(VerticalAlignment.Right)
CTRL+SHIFT+C	DiagramCommandsBase.SetHorizontalAlignmentCommand.WithParameter(VerticalAlignment.Center)
CTRL+SHIFT+J	DiagramCommandsBase.SetHorizontalAlignmentCommand.WithParameter(VerticalAlignment.Justify)
CTRL+SHIFT+S	DiagramCommandsBase.SaveFileAsCommand
CTRL+Z	DiagramCommandsBase.UndoCommand
CTRL+Y	DiagramCommandsBase.RedoCommand
CTRL+SHIFT+Z	DiagramCommandsBase.RedoCommand
F2	DiagramCommandsBase.EditCommand
CTRL+LEFT ARROW	DiagramCommandsBase.MoveSelectionNoSnapCommand.WithParameter(Direction.Left)
LEFT ARROW	DiagramCommandsBase.MoveSelectionCommand.WithParameter(Direction.Left)
CTRL+UP ARROW	DiagramCommandsBase.MoveSelectionNoSnapCommand.WithParameter(Direction.Up)
UP ARROW	DiagramCommandsBase.MoveSelectionCommand.WithParameter(Direction.Up)
CTRL+RIGHT ARROW	DiagramCommandsBase.MoveSelectionNoSnapCommand.WithParameter(Direction.Right)
RIGHT ARROW	DiagramCommandsBase.MoveSelectionCommand.WithParameter(Direction.Right)
CTRL+DOWN ARROW	DiagramCommandsBase.MoveSelectionNoSnapCommand.WithParameter(Direction.Down)
DOWN ARROW	DiagramCommandsBase.MoveSelectionCommand.WithParameter(Direction.Down)
CTRL+SHIFT+PERIOD	DiagramCommandsBase.IncreaseFontSizeCommand
CTRL+SHIFT+COMMA	DiagramCommandsBase.DecreaseFontSizeCommand
CTRL+B	DiagramCommandsBase.ToggleFontBoldCommand
CTRL+U	DiagramCommandsBase.ToggleFontUnderlineCommand
CTRL+I	DiagramCommandsBase.ToggleFontItalicCommand
CTRL+SHIFT+F	DiagramCommandsBase.BringToFrontCommand
CTRL+SHIFT+B	DiagramCommandsBase.SendToBackCommand
CTRL+SHIFT+W	DiagramCommandsBase.FitToPageCommand
CTRL+SHIFT+TAB	DiagramCommandsBase.FocusPrevControlCommand
CTRL+TAB	DiagramCommandsBase.FocusNextControlCommand
SHIFT+TAB	DiagramCommandsBase.SelectPrevItemCommand
TAB	DiagramCommandsBase.SelectNextItemCommand

 

Существует несколько способов взаимодействия с объектами при построении диаграмм/майндкарт.

· Выделение

Щелкните фигуру, чтобы выделить ее. Чтобы выделить несколько фигур, удерживайте клавишу CTRL или SHIFT и щелкайте по каждой фигуре, которую нужно выделить. Кроме того, щелкните на холсте и перетащите, чтобы создать прямоугольник выделения вокруг фигур, которые нужно выделить. Чтобы выделить все фигуры на странице, нажмите комбинацию клавиш CTRL+A. Выбранные фигуры будут очерчены прямоугольником с ручками выделения. Чтобы отменить выделение фигуры, удерживайте клавишу CTRL или SHIFT и щелкните ее. Чтобы отменить выделение всех фигур, нажмите клавишу ESC.

· Перемещение

Чтобы переместить выделенную фигуру/фигуры, перетащите ее с помощью мыши или нажмите клавиши со стрелками.

· Изменение размера

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

· Копирование

Чтобы скопировать выделенную фигуру или несколько фигур, перетащите ее, удерживая клавишу CTRL, или нажмите комбинацию клавиш CTRL+C, чтобы скопировать выделение в буфер обмена, а затем нажмите комбинацию клавиш CTRL+V, чтобы вставить содержимое буфера обмена на холст.

· Вращение

Чтобы повернуть выделенную фигуру или несколько фигур, перетащите ручку вращения.

· Трансформация

Некоторые фигуры при выделении отображаются желтыми ручками. Эти фигуры можно трансформировать, перетаскивая эти ручки.

· Редактирование текста

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

· Разворачивание/сворачивание подчиненных элементов

Нажмите кнопку развернуть/свернуть под фигурой, чтобы показать или скрыть подчиненные элементы;