Как изменить дизайн windows form в visual studio

Обновлено: 04.07.2024

вы должны рассмотреть возможность использования Windows Presentation Foundation (WPF) вместо Winforms для пользовательского интерфейса. Хотя вам придется обновить среду разработки до Visual Studio 2008 или Visual Studio 2010.

WPF основан на XAML, который является XML-форматом для определения вашего приложения, событий и многое другое. WPF-рекомендуемая технология для использования через Winforms корпорацией Майкрософт. Вы можете начать работу с этого учебника MSDN:получаете Началось с Windows Presentation Foundation.

WPF хорош, потому что он основан на DirectX (нет, вам не нужно знать DirectX вообще) и будет использовать GPU, а не объекты GDI, как традиционные другие платформы пользовательского интерфейса от Microsoft.

в противном случае, если вы действительно настроены на использование Winforms, я бы предложил купить библиотеку сторонних элементов управления.

вероятно, цена Visual Studio, хотя гарантируется для любого проекта, учитывая почасовую заработную плату (раз) количество часов, которое вы бы вложили в любой проект против цены Visual Studio. Можно также использовать экспресс-выпуск Visual Studio.

IMO, "как вы проектируете красивый пользовательский интерфейс" - это как спросить: "Как вы рисуете красивую картину?"Вы можете сделать красивые картины маслом, акварелью или даже углем - это зависит от мастерства художника.

сказав это, использование WPF действительно облегчит вашу жизнь, когда дело доходит до создания пользовательского интерфейса. WinForms довольно жестко закодирован для использования стандартных виджетов Windows. Лично я не думаю, что это плохо: согласованность пользовательского интерфейса тоже важна.

Если у вас есть веб-интерфейс на стороне клиента, и вы не можете перейти на WPF, вы можете использовать элемент управления WebBrowser вместе с jQuery (или любой другой платформой javascript).

Это позволит вам реализовать хороший анимированный интерфейс (т. е. использовать jQuery UI), а также CSS для пользовательского стиля элементов страницы.

самым большим преимуществом этого подхода является то, что вы можете применить свои существующие знания DHTML/Javascript/CSS в отличие от обучения WPF.

самым большим недостатком, вероятно, является то, что элемент управления Webbrowser является большой зависимостью, потому что он просто обертывает базовый HTML-движок, используемый Internet Explorer. Однако это также может быть положительным, поскольку вы получаете полную объектную модель DHTML в своем собственном приложении.

Форма является основным компонентом графического интерфейса программы. Именно на ней размещаются управляющие интерфейсы.

Рассмотрим некоторые из свойств формы, которые влияют на её внешний вид.

Объявляем форму

Для того что бы объявить форму, нам надо добавить библиотеку System.Windows.Forms.dll

После объявляем форму $main_form

Отобразим форму $main_form.

В результате получилась вот такая форма:

DefaultForm

Что бы в загаловке формы отобразить текст нужно присвоить его свойству Text нашей формы:

Текст отобразится в заголовке:

DefaultFormTextHello

Изменение размера формы:

Давайте изменим размер формы.

Это можно сделать через свойства Width(ширина) и Height(высота) формы, где значения параметров это кол-во пикселей.

Этого же результата можно добиться используя параметр формы Size:

$main_form . Size = New-object System . Drawing . Size ( 300 , 500 )

Так же можно задать размер с помощью параметра DesktopBounds:

$main_form . DesktopBounds = New-object System . Drawing . Rectangle ( 0 , 0 , 300 , 500 )

Так же для изменения размеров можно воспользоваться свойством ClientSize

$main_form . ClientSize = New-object System . Drawing . Size ( 300 , 500 )

Однако этот параметр задаёт клиентскую область формы, которая по размерам меньше самой формы. Поэтом получившаяся форма, по размерам окажется больше, чем в предыдущих примерах.

Однако данные свойства не ограничивают размер формы в период жизни программы, пользователь может изменить размер формы или распахнуть её на весь экран, что может существенно сказаться на внешнем виде формы. Поэтому иногда форму приходится ограничить возможность сжимать и/или растягивать форму.

Для этогу существуют такие параметры , как MinimumSize(минимальный размер формы) и MaximumSize (максимальный размер формы). Если задать эти параметры, то в период жизни форма не сможет за них выйти.

Пример объявления данных свойств:

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

Для этого с начала надо разрешить менять размер формы, в зависимости от расположения объектов в области видимости свойством AutoSize перевести его в значение true

После надо выбрать режим автоматического подбора размера формы и указать его в свойстве AutoSizeMode. Существует два режима этого свойства GrowOnly и GrowAndShrink:

$main_form . AutoSizeMode = [ System . Windows . Forms . AutoSizeMode ] : : GrowOnly $main_form . AutoSizeMode = [ System . Windows . Forms . AutoSizeMode ] : : GrowAndShrink

Шрифты

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

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

$main_form . Font = New-Object System . Drawing . Font ( "Calibri" , 24 )

Что бы поменять цвет шрифта существует следующее свойство ForeColor:

Не малуюроль в определении размеров управляющих элементов играет размер шрифта его можно узнать из свойства AutoScaleBaseSize, его так же можно перераспределить.

Шаблон окна

Шаблон окна формы опредиляется парметром FormBorderStyle, который может принимать семь значений Fixed3D, FixedDialog, FixedSingle, FixedToolWindow, None, Sizabl, SizableToolWindow по умолчанию стоит значение Sizable. Заметим, что внешний вид формы на примерах может существенно отличаться на разных компьютерах и существенно зависит от OC. Так же после назначения определённого шаблона окна в дальнейшем его можно будет редактировать другими свойствами формы.

Рассмотрим шаблоны формы:

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : Fixed3D

FormBorderStyleFixed3D

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : FixedDialog

FormBorderStyleFixedDialog

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : FixedSingle

FormBorderStyleFixedSingle

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : FixedToolWindow

FormBorderStyleFixedToolWindow

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : None

FormBorderStyleNone

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : Sizable

FormBorderStyleSizable

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : SizableToolWindow

FormBorderStyleSizableToolWindow

Управляющие кнопки

Для управления отображения управляющими кнопками используются следующие свойства ControlBox, MaximizeBox и MinimizeBox.

Свойство ControlBox управляет видимостью всей областью управляющих кнопок. По умолчанию она находиться в состоянии true.

DefaultFormTextHello

Зададим данному свойству значение false

FormControlBoxFalse

Если в форме свойству Text присвоить пустое значение, то шапка формы совсем исчезнет.

Вот так будет выглядеть форма:

FormNotTitle

Включим назад ControlBox и рассмотрим следующие свойства: MaximizeBox и MinimizeBox. Они тоже булевые и служат для того, что бы выключать кнопки развернуть окно и свернуть окно. По умолчанию они имеют свойство true. Рассмотрим как выглядит их выключение:

FormMaximizeBoxFalse

FormMinimizeBoxFalse

Однако, если выключить и MaximizeBox и MinimizeBox кнопки перестают быть видимыми:

FormMaximizeBoxMinimizeBoxFalse

Заметим так же, что отключение кнопок по одиночке или одновременно влияет не только на отображение этих кнопок и возможностями их использовать, но так же и на свойство формы. Так на форме с выключенным свойством MaximizeBox пользователю отключаются все стандартные возможности распахнуть форму на весь экран. Так же дела обстоят и с MinimizeBox.

Иконка.

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

$main_form . Icon = New-Object System . Drawing . Icon ( "d:\favicon.ico" )

Если же мы не хотим, что бы иконка отображалась, то её можно скрыть, с помощью свойства ShowIcon установив его в состояние false. Если же шаблон окна не подразумевает наличия иконки, её так же можно включить через это свойство установи параметр truе

Элемент захвата

Для того, чтобы задать видимость захвата для изменения размера, отображаемого в правом нижнем углу формы. Нужно воспользоваться свойством SizeGripStyle. Оно имеет 3 значенич Auto, Hide, Show

Данное значение стоит по умолчанию. Форма сама решает отображать этот элемент или нет.

Элемент будет скрыт с формы.

$main_form . SizeGripStyle = [ System . Windows . Forms . SizeGripStyle ] : : Hide

FormSizeGripStyleHide

элемент отображается на форме

$main_form . SizeGripStyle = [ System . Windows . Forms . SizeGripStyle ] : : Show

FormSizeGripStyleShow

Цвет и прозрачность.

Что бы задасть цвет формы нужно воспользоваться свойством BackColor, этот параметр будет наследоваться размещённым на данной форме управляющим элементам. Сделаем цвет рабочей области, например синим:

FormBackColor

$main_form . BackgroundImage = [ System . Drawing . Image ] : : FromFile ( "d:\favicon.jpg" )

FormBackgroundImage

А в свойстве TransparencyKey формы мы должны указать, какой цвет будет заменяться на прозрачный.

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

FormTransparencyKey

Это свойство можно использовать для рисования не стандартных окон убрав перед этим рамку формы

$main_form . FormBorderStyle = [ System . Windows . Forms . FormBorderStyle ] : : None

Если же мы не хотим делать дырки в форме, а всеволишь сделать её слегка прозрачной, мы можем воспользоваться свойством Opacity, значения в ней колеблятся от 0 это полностью прозрачная до 1, не прозрачная.

FormOpacity

Курсор

Для изменения вида курсора в приложении можно воспользоваться свойством формы Cursor:

$main_form . Cursor = New-Object System . Windows . Forms . Cursor ( "d:\Cursor.cur" )

Так же можно узнать перехватывается ли курсор приложением в даннй момент, для этого нужно посмотреть данные свойства формы Capture

Что бы уведомить пользователя о текущем процессе, можно так же включить курсор ожидания указав в свойстве UseWaitCursor значение true

Состояние окна.

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

Что бы развернуть окно:

$main_form . WindowState = [ System . Windows . Forms . FormWindowState ] : : Maximized

Свернуть в панель задач:

Перевести в обычный(свободный) режим:

$main_form . WindowState = [ System . Windows . Forms . FormWindowState ] : : Normal

Зеркальный вид окна

Так же есть возможность показать зеркальную форму обычно это используют для приложений в которых ввод текста происходит с права на лево.

Для этого нам нужно сначала включить поддержку ввода текста с права на лево свойством формы RightToLeft

$main_form . RightToLeft = [ System . Windows . Forms . RightToLeft ] : : YES

Только после этого можно отобразить форму зеркально установив свойство формы RightToLeftLayout в значение true

FormMirrored

Посмотреть отображается ли форма в зеркальном виде можно из свойства формы IsMirrored.

Отображение в Панели задач.

Видимость окна.

Так же если надо сделать, что бы форма не закрывалась другими окнами можно воспользоваться свойством TopMost. Если установить его в значение true то другие окна не смогут заслонить его.

Для формы существуют параметры видимости, но для отображения формы лучше пользоваться функция Enabled если установить его в значение false, то его не удасться отобразить методом ShowDialog().

Так же если надо скрыть форму, то это можно сделать изменив свойство Visible на false. Можно так же отобразить форму, но это может быть не всегда хорошей идеей, лучше пользоваться методом ShowDialog.

Комментарии:

Комментарии 12

Огромное спасибо за подробный разбор!
Очень сильно помогло в пониманиии концепции построения GUI для повершела =)

Приятно осознавать, что мой блог помогает людям. 🙂

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

Требования к настройке внешнего вида приложения

  1. хранить и загружать свойства отдельных компонентов в XML-файле
  2. пользователь должен иметь простой инструмент по настройке внешнего вида
  3. список настраиваемых компонентов должен очень просто расширяться (одной строкой кода)
  4. при изменении значения свойства пользователь должен сразу видеть изменения на форме
  5. должна быть кнопка отмены, которая позволит вернуть все изменения назад

Результат работы

Окно настройки внешнего вида:


До и после настроек внешнего вида:


Для решения задачи необходимо

  1. использовать компонент PropertyGridEx, для отображения и изменения свойств компонентов
  2. создать класс CustomDesignControl для удобства хранения свойств в XML
  3. создать форму MainForm, на которой будем изменять внешний вид
  4. создать форму AppSettingsForm, на которой будем настраивать внешний вид MainForm
  5. создать класс SettingsXml для удобства работы с XML

Функция отмены изменений внешнего вида

Чтобы реализовать отмену изменений внешнего вида (пункт 5 из требований), решил найти универсальный способ клонирования свойств компонентов которые будут создаваться в памяти и заменять отображаемые компоненты.


Скопировал код, убрал лишние свойства, которые не нужно сохранять, оставив цвета и шрифт.
После проверки работы кода, сразу выяснились недостатки данного способа:

  1. используется приведение любого контрола к классу Control, а это означает, что половину свойств можно потерять (например, компонент DataGridView унаследован от класса Control, но имеет свой дополнительный набор свойств)
  2. при клонировании компонента некоторые свойства (например: цвет шрифта внутри ячейки DataGridView) не клонируются, а создают ссылки на клонируемый компонент (возможно, это потому, что используется свойство со своими внутренними свойствами и их нужно как-то по-другому обрабатывать).


Безрезультатно, компонент не смог вернуть изменения обратно.

Попробовал тогда само свойство создать оператором new и задать ему значение методом SetValue:


И этот способ не дал результата. При изменении значения свойства в одном компоненте, оно автоматически обновляется и в клонируемом компоненте.

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

Пример приложения с настройкой внешнего вида

На всякий случай, подготовил готовый код, на котором желающие смогут проверить и возможно доработать функцию отмены изменений внешнего вида без перезагрузки приложения и рассказать нам о проблеме в комментариях.
Нужно добиться, чтобы при нажатии на кнопку «Автотест» на компоненте DataGridView был серый фон и шрифт ячеек был мелкий.

Уроки программирования, алгоритмы, статьи, исходники, примеры программ и полезные советы

Как поменять цвет фона элементов в Windows Forms

В данной статье мы разберем несколько вариантов изменения цвета элементов Windows Forms на примере фона формы Form1 и прочих компонентов.

Способ №1. Изменение цвета в свойствах элемента.

Для многих это самый легкий способ изменения цветовой палитры элементов, так как не надо писать код, всё визуализировано и интуитивно понятно.

Здесь имеется большое количество цветовых схем и их визуальных представлений.

Выберем для примера какой-либо из цветов, чтобы изменить фон формы:

Легко, незамысловато, понятно.

Следующие способы будут производиться в коде.

Способ №2. Изменение цвета, используя структуру Color.

Это самый простой способ среди кодовых вариаций.

Если мы захотим закрасить фон формы в зеленый цвет, то строка кода будет выглядеть вот так:

При запуске форма будет выглядеть так:

Если понадобится изменить цвет, например, кнопки Button на тёмно-бордовый, код будет таким:

Данный способ прост тем, что требуется лишь написать название цвета, которых также большое количество.

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

Способ №3. Изменение цвета, используя метод Color.Argb.

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

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

Словесно это выглядит вот так:

Названиеэлементаформы.BackColor = Color.FromArgb(Насыщенность красного, Насыщенность зеленого, Насыщенность синего);

Чтобы закрасить фон программы в чёрный цвет, используя данный метод, надо написать вот такую строку:

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

1. Установите MaterialSkin через NuGet

Пакеты Nuget обозревателя решений

В появившемся окне перейдите на вкладку Обзор и найдите MaterialSkin выберите пакет (с последней версией, а именно обновленной MaterialSkin) в списке и установите его в своем проекте:

Заметка

После завершения установки пакета вы сможете работать с Material Design в своем проекте. Посетите официальный репозиторий на Github для получения дополнительной информации об этой библиотеке.

2. Добавьте элементы управления материалом в панель инструментов элементов управления.

С MaterialSking вы сможете перетаскивать элементы управления в ваши формы так же, как и с традиционными элементами управления. Чтобы быть организованным, мы рекомендуем вам создать настраиваемую вкладку панели инструментов для хранения внутри эксклюзивных элементов управления этой библиотеки. Сделайте правый клик на пустом месте панели инструментов и в выпадающем меню выберите «Добавить вкладку», это позволит вам создать пустую вкладку и дать собственное имя, в этом случае мы назовем его «Material Controls»:

Вкладка панели инструментов управления материалами

Затем щелкните правой кнопкой мыши на созданной вами вкладке (элементы управления Metro) и выберите «Выбрать элементы» в меню:

Панель инструментов контроля материалов

WinForms MetroFramework Выбор компонентов

Когда появится средство просмотра файлов, вам нужно будет перейти в папку вашего проекта WinForms, затем в папке пакетов найдите папку MaterialSking, а затем в lib. Внутри папки lib должен быть файл dll, выберите его нажатием на open:

Файл DLL материалов управления

Список контроля материалов

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

Контроль материалов WinForms

И вы сможете просто перетаскивать нужные элементы управления в форме так же, как вы используете стандартные компоненты Windows.

3. Установить стиль материала

Начните с импорта пространств имен MaterialSkin в верхней части вашего класса:

Тогда вы сможете изменить тип вашей формы. Как правило, декларация вашей формы имеет Form напр., например class Form1 : Form , но если вы хотите это с Material Style, то вам нужно изменить тип Form в MaterialForm :

Теперь в функции конструктора вашего класса, в этом случае Form1 , под InitializeComponent Чтобы добавить функцию, добавьте код для использования Material Skin вместо значения по умолчанию и измените цветовую палитру формы:

Как видите, реализация пользовательских элементов управления для WinForms довольно проста. Сохраните изменения и запустите форму, чтобы увидеть, что происходит!

4. Пример

В следующем примере показано, как создать форму Material Styled на главной форме в простом проекте WinForms:

Предыдущий код будет генерировать следующую форму:

Затем вы можете просто перетащить некоторые элементы управления из панели инструментов, созданной на шаге 2, и создать удивительные формы:

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

Читайте также: