Универсальный способ настройки внешнего вида WinForms приложения (на примере FAQ.Net)
После размещения первой статьи о своем приложении FAQ.Net (программа заметок под Windows), появились первые пользователи, для которых хочется дальше развивать свою программу для заметок.
Чтобы повысить интерес у пользователей, возникла идея повысить его привлекательность за счет настройки цвета и шрифта.
Требования к настройке внешнего вида приложения
- хранить и загружать свойства отдельных компонентов в XML-файле
- пользователь должен иметь простой инструмент по настройке внешнего вида
- список настраиваемых компонентов должен очень просто расширяться (одной строкой кода)
- при изменении значения свойства пользователь должен сразу видеть изменения на форме
- должна быть кнопка отмены, которая позволит вернуть все изменения назад
Результат работы
Окно настройки внешнего вида:
До и после настроек внешнего вида:
Для решения задачи необходимо
- использовать компонент PropertyGridEx, для отображения и изменения свойств компонентов
- создать класс CustomDesignControl для удобства хранения свойств в XML
- создать форму MainForm, на которой будем изменять внешний вид
- создать форму AppSettingsForm, на которой будем настраивать внешний вид MainForm
- создать класс SettingsXml для удобства работы с XML
Функция отмены изменений внешнего вида
Чтобы реализовать отмену изменений внешнего вида (пункт 5 из требований), решил найти универсальный способ клонирования свойств компонентов которые будут создаваться в памяти и заменять отображаемые компоненты.
Скопировал код, убрал лишние свойства, которые не нужно сохранять, оставив цвета и шрифт.
После проверки работы кода, сразу выяснились недостатки данного способа:
- используется приведение любого контрола к классу Control, а это означает, что половину свойств можно потерять (например, компонент DataGridView унаследован от класса Control, но имеет свой дополнительный набор свойств)
- при клонировании компонента некоторые свойства (например: цвет шрифта внутри ячейки DataGridView) не клонируются, а создают ссылки на клонируемый компонент (возможно, это потому, что используется свойство со своими внутренними свойствами и их нужно как-то по-другому обрабатывать).
Безрезультатно, компонент не смог вернуть изменения обратно.
Попробовал тогда само свойство создать оператором new и задать ему значение методом SetValue:
И этот способ не дал результата. При изменении значения свойства в одном компоненте, оно автоматически обновляется и в клонируемом компоненте.
Другие способы я больше не искал и сделал возврат изменений обычным перезапуском приложения с возможностью сохранения рабочего документа или отмены перезапуска. Это позволило значительно съэкономить память приложения, так как не нужно создавать клоны объектов.
Пример приложения с настройкой внешнего вида
На всякий случай, подготовил готовый код, на котором желающие смогут проверить и возможно доработать функцию отмены изменений внешнего вида без перезагрузки приложения и рассказать нам о проблеме в комментариях.
Нужно добиться, чтобы при нажатии на кнопку «Автотест» на компоненте DataGridView был серый фон и шрифт ячеек был мелкий.
Как красиво оформить виндовс форму
С помощью специального окна Properties (Свойства) справа Visual Studio предоставляет нам удобный интерфейс для управления свойствами элемента:
Большинство этих свойств оказывает влияние на визуальное отображение формы. Пробежимся по основным свойствам:
Name : устанавливает имя формы — точнее имя класса, который наследуется от класса Form
BackColor : указывает на фоновый цвет формы. Щелкнув на это свойство, мы сможем выбрать тот цвет, который нам подходит из списка предложенных цветов или цветовой палитры
BackgroundImage : указывает на фоновое изображение формы
BackgroundImageLayout : определяет, как изображение, заданное в свойстве BackgroundImage, будет располагаться на форме.
ControlBox : указывает, отображается ли меню формы. В данном случае под меню понимается меню самого верхнего уровня, где находятся иконка приложения, заголовок формы, а также кнопки минимизации формы и крестик. Если данное свойство имеет значение false, то мы не увидим ни иконку, ни крестика, с помощью которого обычно закрывается форма
Cursor : определяет тип курсора, который используется на форме
Enabled : если данное свойство имеет значение false, то она не сможет получать ввод от пользователя, то есть мы не сможем нажать на кнопки, ввести текст в текстовые поля и т.д.
Font : задает шрифт для всей формы и всех помещенных на нее элементов управления. Однако, задав у элементов формы свой шрифт, мы можем тем самым переопределить его
ForeColor : цвет шрифта на форме
FormBorderStyle : указывает, как будет отображаться граница формы и строка заголовка. Устанавливая данное свойство в None можно создавать внешний вид приложения произвольной формы
HelpButton : указывает, отображается ли кнопка справки формы
Icon : задает иконку формы
Location : определяет положение по отношению к верхнему левому углу экрана, если для свойства StartPosition установлено значение Manual
MaximizeBox : указывает, будет ли доступна кнопка максимизации окна в заголовке формы
MinimizeBox : указывает, будет ли доступна кнопка минимизации окна
MaximumSize : задает максимальный размер формы
MinimumSize : задает минимальный размер формы
Opacity : задает прозрачность формы
Size : определяет начальный размер формы
StartPosition : указывает на начальную позицию, с которой форма появляется на экране
Text : определяет заголовок формы
TopMost : если данное свойство имеет значение true , то форма всегда будет находиться поверх других окон
Visible : видима ли форма, если мы хотим скрыть форму от пользователя, то можем задать данному свойству значение false
WindowState : указывает, в каком состоянии форма будет находиться при запуске: в нормальном, максимизированном или минимизированном
Программная настройка свойств
С помощью значений свойств в окне Свойства мы можем изменить по своему усмотрению внешний вид формы, но все то же самое мы можем сделать динамически в коде. Перейдем к коду, для этого нажмем правой кнопкой мыши на форме и выберем в появившемся контекстном меню View Code (Просмотр кода). Перед нами открывается файл кода Form1.cs. Изменим его следующим образом:
В данном случае мы настроили несколько свойств отображения формы: заголовок, фоновый цвет, ширину и высоту. При использовании конструктора формы надо учитывать, что весь остальной код должен идти после вызова метода InitializeComponent() , поэтому все установки свойств здесь расположены после этого метода.
Установка размеров формы
Для установки размеров формы можно использовать такие свойства как Width/Height или Size. Width/Height принимают числовые значения, как в вышеприведенном примере. При установке размеров через свойство Size, нам надо присвоить свойству объект типа Size:
Объект Size в свою очередь принимает в конструкторе числовые значения для установки ширины и высоты.
Начальное расположение формы
Начальное расположение формы устанавливается с помощью свойства StartPosition , которое может принимать одно из следующих значений:
Manual : Положение формы определяется свойством Location
CenterScreen : Положение формы в центре экрана
WindowsDefaultLocation : Позиция формы на экране задается системой Windows, а размер определяется свойством Size
WindowsDefaultBounds : Начальная позиция и размер формы на экране задается системой Windows
CenterParent : Положение формы устанавливается в центре родительского окна
Все эти значения содержатся в перечислении FormStartPosition , поэтому, чтобы, например, установить форму в центре экрана, нам надо прописать так:
Фон и цвета формы
Чтобы установить цвет как фона формы, так и шрифта, нам надо использовать цветовое значение, хранящееся в структуре Color:
Кроме того, мы можем в качестве фона задать изображение в свойстве BackgroundImage , выбрав его в окне свойств или в коде, указав путь к изображению:
Чтобы должным образом настроить нужное нам отображение фоновой картинки, надо использовать свойство BackgroundImageLayout , которое может принимать одно из следующих значений:
None : Изображение помещается в верхнем левом углу формы и сохраняет свои первоначальные значения
Tile : Изображение располагается на форме в виде мозаики
Center : Изображение располагается по центру формы
Stretch : Изображение растягивается до размеров формы без сохранения пропорций
Zoom : Изображение растягивается до размеров формы с сохранением пропорций
Изменяем внешний вид System.Windows.Forms.Form
Форма является основным компонентом графического интерфейса программы. Именно на ней размещаются управляющие интерфейсы.
Рассмотрим некоторые из свойств формы, которые влияют на её внешний вид.
Объявляем форму
Для того что бы объявить форму, нам надо добавить библиотеку System.Windows.Forms.dll
После объявляем форму $main_form
Отобразим форму $main_form.
В результате получилась вот такая форма:
Что бы в загаловке формы отобразить текст нужно присвоить его свойству Text нашей формы:
Текст отобразится в заголовке:
Изменение размера формы:
Давайте изменим размер формы.
Это можно сделать через свойства Width(ширина) и Height(высота) формы, где значения параметров это кол-во пикселей.
Этого же результата можно добиться используя параметр формы Size:
Так же можно задать размер с помощью параметра DesktopBounds:
Так же для изменения размеров можно воспользоваться свойством ClientSize
Однако этот параметр задаёт клиентскую область формы, которая по размерам меньше самой формы. Поэтом получившаяся форма, по размерам окажется больше, чем в предыдущих примерах.
Однако данные свойства не ограничивают размер формы в период жизни программы, пользователь может изменить размер формы или распахнуть её на весь экран, что может существенно сказаться на внешнем виде формы. Поэтому иногда форму приходится ограничить возможность сжимать и/или растягивать форму.
Для этогу существуют такие параметры , как MinimumSize(минимальный размер формы) и MaximumSize (максимальный размер формы). Если задать эти параметры, то в период жизни форма не сможет за них выйти.
Пример объявления данных свойств:
Но вычислять область окна бывает довольно сложно, удобнее всего отдать эту задачу автоматическим средствам управления окнами.
Для этого с начала надо разрешить менять размер формы, в зависимости от расположения объектов в области видимости свойством AutoSize перевести его в значение true
После надо выбрать режим автоматического подбора размера формы и указать его в свойстве AutoSizeMode. Существует два режима этого свойства GrowOnly и GrowAndShrink:
GrowOnly — режим разрешает ужимать размер формы если в этой области нет элементов управления, но не меньше, чем указанов параметрах Width и Height
GrowAndShrink — режим разрешает ужимать размер формы если в этой области нет элементов управления, игнорируя параметры Width и Height но не меньше чем MinimumSize, при этом форма не будет растягиваться по требованию пользователя, но форму можно будет развернуть на всё окно.
Шрифты
Так же не малую роль в отображении формы влияют шрифты. К тому же настройки шрифтов наследуются на управляющие элементы принадлежащие этой форме.
Настройки шрифта хранятся в свойстве формы Font данное свойство наследуется другим упавляющим компонентам на форме. Изменять свойства Font по отдельности нельзя, но можно переопределить его польностью следующим образом:
Что бы поменять цвет шрифта существует следующее свойство ForeColor:
Не малуюроль в определении размеров управляющих элементов играет размер шрифта его можно узнать из свойства AutoScaleBaseSize, его так же можно перераспределить.
Шаблон окна
Шаблон окна формы опредиляется парметром FormBorderStyle, который может принимать семь значений Fixed3D, FixedDialog, FixedSingle, FixedToolWindow, None, Sizabl, SizableToolWindow по умолчанию стоит значение Sizable. Заметим, что внешний вид формы на примерах может существенно отличаться на разных компьютерах и существенно зависит от OC. Так же после назначения определённого шаблона окна в дальнейшем его можно будет редактировать другими свойствами формы.
Рассмотрим шаблоны формы:
Fixed3D — Фиксированная трехмерная граница. Форме запрещено менять размер, однако её можно развернуть на весь экран или свернуть.
FixedDialog — Толстая фиксированная граница в диалоговом окне-стиля. Так же как и в Fixed3D запрещено менять размер. Однако иконка в левой верхней части окна не отображается.
FixedSingle — фиксированная, одно строковая граница.
FixedToolWindow — Граница окна инструментов, которое нельзя изменить. Окно инструментов не отображается в панели задач или в окно, которое появляется при нажатии пользователем клавиши ALT+TAB. Хотя форма FixedToolWindow не отображается в панели задач, однако лучше явно необходимо установить свойство ShowInTaskbar в значение false.
None — Форма без рамки. Она не умеет изменять размер, и свёртываться в панель задач, но её можно развернуть.
Sizable — Граница с изменяемыми размерами. Данная форма может изменять размер, разворачиваться и сворачиваться в панель задач.
SizableToolWindow — Окно может изменять размер окна, разворачивать окно на всё окно, сворачивать в панель задач. Однако кнопки MaximizeBox и MinimizeBox не отображаются. Так же окно не отображается в панели задач однако окно появляется при нажатии клавиш ALT+TAB.
Управляющие кнопки
Для управления отображения управляющими кнопками используются следующие свойства ControlBox, MaximizeBox и MinimizeBox.
Свойство ControlBox управляет видимостью всей областью управляющих кнопок. По умолчанию она находиться в состоянии true.
Зададим данному свойству значение false
Если в форме свойству Text присвоить пустое значение, то шапка формы совсем исчезнет.
Вот так будет выглядеть форма:
Включим назад ControlBox и рассмотрим следующие свойства: MaximizeBox и MinimizeBox. Они тоже булевые и служат для того, что бы выключать кнопки развернуть окно и свернуть окно. По умолчанию они имеют свойство true. Рассмотрим как выглядит их выключение:
Однако, если выключить и MaximizeBox и MinimizeBox кнопки перестают быть видимыми:
Заметим так же, что отключение кнопок по одиночке или одновременно влияет не только на отображение этих кнопок и возможностями их использовать, но так же и на свойство формы. Так на форме с выключенным свойством MaximizeBox пользователю отключаются все стандартные возможности распахнуть форму на весь экран. Так же дела обстоят и с MinimizeBox.
С отключённым ControlBox отключается возможность изменять размер формы, но её можно распахнуть и свернуть, например сочитанием клваишь «win»+»up» и «win»+»down».
Иконка.
Иконка отображаемая в левом верхнем углу формы, а так же отображаемая в панели задач может определить через свойство формы Icon например вот так:
Где «d:\favicon.ico» это путь к иконке.
Если же мы не хотим, что бы иконка отображалась, то её можно скрыть, с помощью свойства ShowIcon установив его в состояние false. Если же шаблон окна не подразумевает наличия иконки, её так же можно включить через это свойство установи параметр truе
Элемент захвата
Для того, чтобы задать видимость захвата для изменения размера, отображаемого в правом нижнем углу формы. Нужно воспользоваться свойством SizeGripStyle. Оно имеет 3 значенич Auto, Hide, Show
Данное значение стоит по умолчанию. Форма сама решает отображать этот элемент или нет.
Элемент будет скрыт с формы.
элемент отображается на форме
Цвет и прозрачность.
Что бы задасть цвет формы нужно воспользоваться свойством BackColor, этот параметр будет наследоваться размещённым на данной форме управляющим элементам. Сделаем цвет рабочей области, например синим:
Но однотонный цвет може не совсем удовлетворять нашим потребностям… для этого можно указать картинку в качестве заднего фона, с помощью свойства формы BackgroundImage
Мы так же можем определить, какой цвет на форме будет являтся «прозрачным» но этот эфект больше похож на вырезание дырок в форме, так как клик по прозрачной части формы будет обрабатываться не формой, а окном за ней. Для этого сначало, надо разрешить использовать прозрачность, для этого в свойстве AllowTransparency мы должны присвоить знчение true
$main_form.AllowTransparency =$true
А в свойстве TransparencyKey формы мы должны указать, какой цвет будет заменяться на прозрачный.
Эти параметры прозрачности будут так же наследоваться на управляющие элементы формы.
Это свойство можно использовать для рисования не стандартных окон убрав перед этим рамку формы
Если же мы не хотим делать дырки в форме, а всеволишь сделать её слегка прозрачной, мы можем воспользоваться свойством Opacity, значения в ней колеблятся от 0 это полностью прозрачная до 1, не прозрачная.
Курсор
Для изменения вида курсора в приложении можно воспользоваться свойством формы Cursor:
После данного действия курсор над приложением будет заменятся на «d:\Cursor.cur».
Так же можно узнать перехватывается ли курсор приложением в даннй момент, для этого нужно посмотреть данные свойства формы Capture
Что бы уведомить пользователя о текущем процессе, можно так же включить курсор ожидания указав в свойстве UseWaitCursor значение true
Состояние окна.
Что бы узнать в каком состоянии находиться окно или изменить его, можно воспользоваться свойством формы WindowState оно принимает три значения Maximized, Minimized, Normal.
Что бы развернуть окно:
Свернуть в панель задач:
Перевести в обычный(свободный) режим:
Зеркальный вид окна
Так же есть возможность показать зеркальную форму обычно это используют для приложений в которых ввод текста происходит с права на лево.
Для этого нам нужно сначала включить поддержку ввода текста с права на лево свойством формы RightToLeft
У этого свойства кроме значения YES, который включает поддержку ввода текста с права на лево, существуют другие параметры. Это NO выключает поддержку ввода текста с права на лево. И Inherit — наследовать значения от родительского элемента, установленно по умолчанию.
Только после этого можно отобразить форму зеркально установив свойство формы RightToLeftLayout в значение true
Посмотреть отображается ли форма в зеркальном виде можно из свойства формы IsMirrored.
Отображение в Панели задач.
Для того, что бы скрыть форму из панели задач, есть следующее свойство формы ShowInTaskbar. Это свойство имеет булевый тип и чтобы форма скрылась из пнели задач надо указать значение false. Однако эту форму можно будет найти по «Alt»+»Tab»
Видимость окна.
Так же если надо сделать, что бы форма не закрывалась другими окнами можно воспользоваться свойством TopMost. Если установить его в значение true то другие окна не смогут заслонить его.
Для формы существуют параметры видимости, но для отображения формы лучше пользоваться функция Enabled если установить его в значение false, то его не удасться отобразить методом ShowDialog().
Так же если надо скрыть форму, то это можно сделать изменив свойство Visible на false. Можно так же отобразить форму, но это может быть не всегда хорошей идеей, лучше пользоваться методом ShowDialog.
Комментарии:
Комментарии 12
Огромное спасибо за подробный разбор!
Очень сильно помогло в пониманиии концепции построения GUI для повершела =)
Приятно осознавать, что мой блог помогает людям. ��
Действительно подробно, практически на пальцах. Сохранил в избранном.;)
Но можно задать вопрос? �� Во всех «мануалах» рассказывается как сделать окно, как сделать кнопки, поля и т.д. Но я нигде не нашёл информации (тем более в доходчивой, простой форме как у Вас) — как сделать так, что бы окно не закрывалось при нажатии кнопок. Что бы окно было полноценным, т.с.
Например — есть поле ввода ФИО сотрудника, рядом кнопка «Выбор» или «Поиск» — ввел в поле часть фамилии, нажал на кнопку, запустилась часть скрипта которая делает выборку пользователей, открывается окно ISE со списком найденных пользователей, выбрал необходимого пользователя, нажал Ок, окно ISE закрылось, и в поле ввода уже появилось полное ФИО сотрудника, плюс в этом же окне сразу отобразилась необходимая информация (домен, срок действия пароля и т.д…. не суть), потом, если надо можно было бы воспользоваться еще какими нибудь кнопками, а вот когда нажмешь кнопку «Ок» или «Запустить», тогда уже запустится основная часть скрипта, сделает своё дело, и в этом же окне напишет результат. После этого можно либо закрыть окно кнопкой «Закрыть», «Отмена», кнопкой закрытия окна, либо воспользоваться скриптом (этим окном) еще раз.
Всё, что я не пробовал — ведёт к одному — как только нажму любую кнопку — окно закрывается. ��
Немного удивила проблема. А разве всё работает не так, как вы описали? ��
Как добирусь до винды с powershell попытаюсь состряпать какойнить пример… предположительно это будет завтра.