WinForms: как добавить несколько тем в ваше приложение

Темы — отличный способ позволить вашим пользователям настраивать ваше приложение, не вдаваясь в конкретные детали.

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

Windows Forms — это платформа пользовательского интерфейса, позволяющая создавать настольные приложения. Вы можете реализовать темы в приложении формы Windows, создав выбираемые кнопки для каждой темы.

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

Как настроить проект Windows Form

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

1. Создайте новое приложение Windows Forms в Visual Studio.

2. В новом проекте используйте панель инструментов для поиска элемента управления «кнопка».

3. Выберите элемент управления «Кнопка» и перетащите его на холст. Добавьте в общей сложности три кнопки управления.

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

5. Стилизуйте кнопки и метки, используя окно свойств. Измените свойства на следующие:

   Контроль	Имя свойства	Новое значение
   кнопка1	Размер	580, 200
   Плоский стиль	Плоский
   Текст	Пользователи
   кнопка2	Размер	580, 100
   Плоский стиль	Плоский
   Текст	учетные записи
   кнопка3	Размер	580, 100
   Плоский стиль	Плоский
   Текст	Разрешения
   метка1	Текст	Copyright 2022

Как создать кнопку настроек и список тем

Чтобы простое меню тем работало, создайте несколько кнопок для представления каждой темы. Приложение будет включать в себя три темы: «Светлая», «Природная» и «Темная».

1. Добавьте еще один элемент управления "Кнопка" на холст, чтобы представить кнопку настроек (или "Темы").

2. Измените свойства этой кнопки на следующие:

   Имя свойства	Новое значение
   Имя	btnThemeSettings
   Плоский стиль	Плоский
   Размер	200, 120
   Текст	Темы

3. Перетащите на холст еще три кнопки. Эти кнопки будут представлять три разные темы. Измените свойства каждой из кнопок на следующие:

   Контроль	Имя свойства	Новое значение
   1-я кнопка	Имя	btnLightTheme
   НазадЦвет	Белый дым
   Размер	200, 80
   Плоский стиль	Плоский
   Текст	Легкий
   Видимый	ЛОЖЬ
   2-я кнопка	Имя	btnПриродаТема
   НазадЦвет	ТемноМореЗеленый
   Размер	200, 80
   Плоский стиль	Плоский
   Текст	Природа
   Видимый	ЛОЖЬ
   3-я кнопка	Имя	btnDarkTheme
   НазадЦвет	ДимГрей
   передний цвет	Белый
   Размер	200, 80
   Плоский стиль	Плоский
   Текст	Темный
   Видимый	ЛОЖЬ

4. Дважды щелкните кнопку Темы. Это создаст метод для обработки события «при нажатии». Метод будет запускаться, когда пользователь нажимает эту кнопку.

5. По умолчанию темы «Светлая», «Природа» и «Темная» не будут видны. Внутри функции добавьте функциональность, чтобы переключать видимость кнопок, чтобы показать или скрыть.

   private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}

6. Запустите приложение, нажав зеленую кнопку воспроизведения в верхней части окна Visual Studio.

7. Во время выполнения приложение по умолчанию скрывает кнопки для каждой из трех тем.

8. Нажмите кнопку «Темы », чтобы переключить темы для отображения. Вы можете продолжать нажимать кнопку «Темы », чтобы переключать их видимость.

Как управлять своими темами

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

1. В верхней части C# -файла Form1.cs по умолчанию и внутри класса Form создайте глобальное перечисление. В этом перечислении будут храниться различные типы цветов, которые вы будете использовать в теме.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Внизу объявите три глобальных словаря, по одному для каждой из трех тем. Если вы не знакомы с тем, как использовать словарь в C#, вы можете прочитать больше о словарях .

   Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();

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

   public Form1(){    InitializeComponent();        Light = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.WhiteSmoke },        { ThemeColor.Secondary, Color.Silver },        { ThemeColor.Tertiary, Color.White },        { ThemeColor.Text, Color.Black }    };    Nature = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.DarkSeaGreen },        { ThemeColor.Secondary, Color.AliceBlue },        { ThemeColor.Tertiary, Color.Honeydew },        { ThemeColor.Text, Color.Black }    };    Dark = new Dictionary<ThemeColor, Color>() {        { ThemeColor.Primary, Color.DimGray },        { ThemeColor.Secondary, Color.DimGray },        { ThemeColor.Tertiary, Color.Black },        { ThemeColor.Text, Color.White }    };}

Как изменить тему

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

1. Создайте новую функцию с именем ChangeTheme(). Функция будет принимать цвета темы в качестве аргументов.

2. Внутри функции измените свойства цвета фона элементов пользовательского интерфейса. Новые цвета фона будут использовать цвета выбранной темы.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Создайте новую функцию с именем ChangeTextColor(). Вы можете использовать это, чтобы изменить цвет текста между темным и светлым. Это делается для того, чтобы текст на темном фоне все еще был читабельным.

   private void ChangeTextColor(Color textColor){    // Change color of text    button1.ForeColor = textColor;    button2.ForeColor = textColor;    button3.ForeColor = textColor;    label1.ForeColor = textColor;    btnThemeSettings.ForeColor = textColor;}

4. В конструкторе дважды щелкните элемент управления «Свет». Это откроет файл кода программной части и сгенерирует обработчик событий, когда пользователь нажимает кнопку.

5. Внутри обработчика событий используйте функции ChangeTheme() и ChangeTextColor(). Введите цвета, которые использует тема. Вы можете получить эти цвета из словаря темы «Светлая».

   private void btnLightTheme_Click(object sender, EventArgs e){    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);    ChangeTextColor(Light[ThemeColor.Text]);}

6. Вернитесь в конструктор и нажмите на кнопки «Nature» и «Dark». Также используйте функции ChangeTheme() и ChangeTextColor() в их обработчиках событий.

   private void btnNatureTheme_Click(object sender, EventArgs e){    ChangeTheme(Nature[ThemeColor.Primary], Nature[ThemeColor.Secondary], Nature[ThemeColor.Tertiary]);    ChangeTextColor(Nature[ThemeColor.Text]);}private void btnDarkTheme_Click(object sender, EventArgs e){    ChangeTheme(Dark[ThemeColor.Primary], Dark[ThemeColor.Secondary], Dark[ThemeColor.Tertiary]);    ChangeTextColor(Dark[ThemeColor.Text]);}

7. По умолчанию для темы должна быть установлена ​​«Светлая» тема, когда пользователь впервые открывает приложение. В конструкторе под словарями используйте функции ChangeTheme() и ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Запустите приложение, нажав зеленую кнопку воспроизведения в верхней части окна Visual Studio.

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

10. Нажмите на тему Природа.

11. Нажмите на темную тему.

Создание приложений с помощью Windows Forms

Многие приложения позволяют пользователю переключаться между несколькими темами. Вы можете добавлять темы в приложение Windows Forms, создавая параметры для выбора пользователем.

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

Цвета для каждой из тем используют встроенные цвета Visual Studio. Вам нужно будет использовать правильную цветовую схему, чтобы предоставить пользователям лучший опыт. Вы можете узнать больше о различных способах выбора цветовой схемы для своего приложения.