WinForms: як додати кілька тем до програми

Теми — це чудовий спосіб дозволити користувачам налаштувати вашу програму, не надто заглиблюючись у конкретні деталі.

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

Windows Forms — це структура інтерфейсу користувача, яка дозволяє створювати настільні програми. Ви можете реалізувати теми в програмі форми Windows, створивши доступні для вибору кнопки для кожної теми.

Коли користувач вибирає тему, ви можете змінити колір тла або властивості кольору тексту кожного елемента відповідно до вибраної теми.

Як налаштувати проект Windows Form

Спочатку створіть нову програму форми Windows. Заповніть новий проект основними елементами керування, такими як кнопки та мітки.

1. Створіть нову програму Windows Forms у Visual Studio.

2. У новому проекті використовуйте панель інструментів для пошуку елемента керування кнопкою.

3. Виберіть елемент керування кнопкою та перетягніть його на полотно. Додайте загалом три кнопки керування.

4. За допомогою панелі інструментів клацніть і перетягніть елемент керування міткою на полотно. Розмістіть етикетку під кнопками.

5. Стилізуйте кнопки та написи за допомогою вікна властивостей. Змініть властивості на такі:

   КОНТРОЛЬ	Назва власності	Нове значення
   кнопка1	Розмір	580, 200
   FlatStyle	Плоский
   текст	Користувачі
   кнопка2	Розмір	580, 100
   FlatStyle	Плоский
   текст	Облікові записи
   кнопка3	Розмір	580, 100
   FlatStyle	Плоский
   текст	Дозволи
   label1	текст	Авторське право 2022

Як створити кнопку налаштувань і список тем

Щоб просте меню тем працювало, створіть кілька кнопок для представлення кожної теми. Додаток включатиме три теми: «Світлу», «Природу» та «Темну».

1. Додайте інший елемент керування кнопкою на полотно, щоб представити кнопку налаштувань (або «Теми»).

2. Змініть властивості цієї кнопки на такі:

   Назва власності	Нове значення
   Ім’я	btnThemeSettings
   FlatStyle	Плоский
   Розмір	200, 120
   текст	Теми

3. Перетягніть ще три кнопки на полотно. Ці кнопки представлятимуть три різні теми. Змініть властивості для кожної з кнопок на такі:

   КОНТРОЛЬ	Назва власності	Нове значення
   1-а кнопка	Ім’я	btnLightTheme
   BackColor	WhiteSmoke
   Розмір	200, 80
   FlatStyle	Плоский
   текст	світло
   Видно	помилковий
   2-я кнопка	Ім’я	btnNatureTheme
   BackColor	DarkSeaGreen
   Розмір	200, 80
   FlatStyle	Плоский
   текст	природа
   Видно	помилковий
   3-я кнопка	Ім’я	btnDarkTheme
   BackColor	DimGray
   ForeColor	Білий
   Розмір	200, 80
   FlatStyle	Плоский
   текст	Темний
   Видно	помилковий

4. Двічі клацніть кнопку Теми. Це створить метод для обробки події «on click». Метод запускатиметься, коли користувач натискає цю кнопку.

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. Поверніться в дизайнер і натисніть на кнопки «Природа» і «Темний». Також використовуйте функції 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. Вам потрібно буде використовувати правильну колірну схему, щоб надати користувачам кращий досвід. Ви можете дізнатися більше про різні способи вибору колірної схеми для своєї програми.