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

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

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

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

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

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

1. Создать новое приложение Windows Forms в Visual Studio.
instagram viewer
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. По умолчанию темы «Светлая», «Природа» и «Темная» не будут видны. Внутри функции добавьте функциональность, чтобы переключать видимость кнопок, чтобы показать или скрыть.

   частныйпустотаbtnThemeSettings_Click(отправитель объекта, EventArgs e)
   {
    btnNatureTheme. Видимый = !btnNatureTheme. видимый;
    btnLightTheme. Видимый = !btnLightTheme. видимый;
    btnDarkTheme. Видимый = !btnDarkTheme. видимый;
   }
   

6. Запустите приложение, нажав зеленую кнопку воспроизведения в верхней части окна Visual Studio.
7. Во время выполнения приложение по умолчанию скрывает кнопки для каждой из трех тем.
8. Нажми на Темы кнопка для переключения отображаемых тем. Вы можете продолжать нажимать кнопку Темы Кнопка для переключения их видимости.

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

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

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

   перечисление ТемаЦвет
   {
    Начальный,
    Среднее,
    третичный,
    Текст
   } 

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

   Словарь<ТемаЦвет, Цвет> Свет = новый словарь<ТемаЦвет, Цвет>();
   Словарь<ТемаЦвет, Цвет> Природа = новый словарь<ТемаЦвет, Цвет>();
   Словарь<ТемаЦвет, Цвет> Темный = новый словарь<ТемаЦвет, Цвет>();

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

   публичный Форма1()
   {
    ИнициализироватьКомпонент();
   // Добавляем сюда словари
    Свет = новый словарь<ТемаЦвет, Цвет>() {
    { Цвет темы. Основной цвет. Белый дым },
    { Цвет темы. Вторичный, Цвет. Серебряный },
    { Цвет темы. Третичное, Цвет. Белый },
    { Цвет темы. Цвет текста. черный }
    };
    Природа = новый словарь<ТемаЦвет, Цвет>() {
    { Цвет темы. Основной цвет. темноморезеленый },
    { Цвет темы. Вторичный, Цвет. Алиса Блю },
    { Цвет темы. Третичное, Цвет. Нектар },
    { Цвет темы. Цвет текста. черный }
    };
    Темный = новый словарь<ТемаЦвет, Цвет>() {
    { Цвет темы. Основной цвет. ДимГрей},
    { Цвет темы. Вторичный, Цвет. ДимГрей},
    { Цвет темы. Третичное, Цвет. черный },
    { Цвет темы. Цвет текста. Белый }
    };
   }

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

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

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

   частныйпустотаПоменять тему(Цвет основной цвет, цвет вторичный цвет, цвет третичный цвет)
   {
   // Изменяем цвет фона кнопок
    btnThemeSettings. Цвет фона = основной цвет;
    button1.BackColor = основной цвет;
    button2.BackColor = вторичный цвет;
    button3.BackColor = вторичный цвет;
   это.BackColor = третичный цвет;
   }

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

   частныйпустотаИзменитьЦветТекста(Цвет текстаЦвет)
   {
    // Изменять цвет изтекст
    button1.ForeColor = textColor;
    button2.ForeColor = textColor;
    button3.ForeColor = textColor;
    label1.ForeColor = textColor;
    btnThemeSettings. передний цвет = цвет текста;
   }

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

   частныйпустотаbtnLightTheme_Click(отправитель объекта, EventArgs e)
   {
   Поменять тему(Легкий[Цвет темы. Начальный], Легкий[Цвет темы. Среднее], Легкий[Цвет темы. третичный]);
   ИзменитьЦветТекста(Легкий[Цвет темы. Текст]);
   }

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

   частныйпустотаbtnNatureTheme_Click(отправитель объекта, EventArgs e)
   {
   Поменять тему(Природа[Цвет темы. Начальный], Природа[Цвет темы. Среднее], Природа[Цвет темы. третичный]);
   ИзменитьЦветТекста(Природа[Цвет темы. Текст]);
   }
   частныйпустотаbtnDarkTheme_Click(отправитель объекта, EventArgs e)
   {
   Поменять тему(Темный[Цвет темы. Начальный], Темный[Цвет темы. Среднее], Темный[Цвет темы. третичный]);
   ИзменитьЦветТекста(Темный[Цвет темы. Текст]);
   }

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

   Поменять тему(Легкий[Цвет темы. Начальный], Легкий[Цвет темы. Среднее], Легкий[Цвет темы. третичный]);
   ИзменитьЦветТекста(Легкий[Цвет темы. Текст]);

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

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

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

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

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