Motywy to świetny sposób na umożliwienie użytkownikom dostosowywania aplikacji bez konieczności zbytniego angażowania się w określone szczegóły.
Nowoczesne aplikacje często mają możliwość przełączania się między różnymi motywami. Na przykład niektóre aplikacje umożliwiają przełączanie między jasnym a ciemnym motywem, podczas gdy inne mogą mieć więcej możliwości wyboru motywu.
Windows Forms to struktura interfejsu użytkownika, która umożliwia tworzenie aplikacji klasycznych. Motywy można zaimplementować w aplikacji formularza systemu Windows, tworząc przyciski do wyboru dla każdego motywu.
Gdy użytkownik wybierze motyw, możesz zmienić kolor tła lub właściwości koloru tekstu każdego elementu, aby pasowały do wybranego motywu.
Jak skonfigurować projekt formularza Windows
Najpierw utwórz nową aplikację formularza systemu Windows. Wypełnij nowy projekt kilkoma podstawowymi kontrolkami, takimi jak przyciski i etykiety.
- Stwórz nowa aplikacja Windows Forms w programie Visual Studio.
- W nowym projekcie użyj przybornika, aby wyszukać kontrolkę przycisku.
- Wybierz sterowanie przyciskiem i przeciągnij go na płótno. Dodaj łącznie trzy przyciski sterujące.
- Korzystając z przybornika, kliknij i przeciągnij kontrola etykiet na płótnie. Umieść etykietę pod przyciskami.
- Stylizuj przyciski i etykiety za pomocą okna właściwości. Zmień właściwości na następujące:
Kontrola Nazwa właściwości Nowa wartość przycisk 1 Rozmiar 580, 200 Styl płaski Mieszkanie Tekst Użytkownicy przycisk2 Rozmiar 580, 100 Styl płaski Mieszkanie Tekst Konta przycisk3 Rozmiar 580, 100 Styl płaski Mieszkanie Tekst Uprawnienia etykieta1 Tekst Prawa autorskie 2022
Jak utworzyć przycisk ustawień i listę motywów
Aby działało proste menu motywów, utwórz wiele przycisków reprezentujących każdy motyw. Aplikacja będzie zawierać trzy motywy: motyw „Jasny”, motyw „Natura” i motyw „Ciemny”.
- Dodaj kolejną kontrolkę przycisku do kanwy, aby reprezentować przycisk ustawień (lub „Motywy”).
- Zmień właściwości tego przycisku na następujące:
Nazwa właściwości Nowa wartość Nazwa Ustawienia motywu btn Styl płaski Mieszkanie Rozmiar 200, 120 Tekst Motywy - Przeciągnij jeszcze trzy przyciski na płótno. Te przyciski będą reprezentować trzy różne motywy. Zmień właściwości każdego z przycisków na następujące:
Kontrola Nazwa właściwości Nowa wartość Pierwszy przycisk Nazwa btnLightTheme PowrótKolor Biały dym Rozmiar 200, 80 Styl płaski Mieszkanie Tekst Światło Widoczny Fałszywy Drugi przycisk Nazwa btnNature Theme PowrótKolor DarkSeaGreen Rozmiar 200, 80 Styl płaski Mieszkanie Tekst Natura Widoczny Fałszywy Trzeci przycisk Nazwa btnDarkTheme PowrótKolor DimGray Kolor przedni Biały Rozmiar 200, 80 Styl płaski Mieszkanie Tekst Ciemny Widoczny Fałszywy - Kliknij dwukrotnie na Motywy przycisk. Stworzy to metodę obsługi zdarzenia „na kliknięcie”. Metoda zostanie uruchomiona, gdy użytkownik kliknie ten przycisk.
- Domyślnie motywy „Jasny”, „Natura” i „Ciemny” nie będą widoczne. Wewnątrz funkcji dodaj funkcję, aby przełączać widoczność przycisków, aby pokazać lub ukryć.
prywatnypróżniabtnThemeSettings_Click(nadawca obiektu, EventArgs e)
{
btnNaturaMotyw. Widoczny = !btnNatureTheme. Widoczny;
btnLightTheme. Widoczny = !btnLightTheme. Widoczny;
btnDarkTheme. Widoczny = !btnDarkTheme. Widoczny;
} - Uruchom aplikację, klikając zielony przycisk odtwarzania w górnej części okna programu Visual Studio.
- W czasie wykonywania aplikacja domyślnie ukryje przyciski dla każdego z trzech motywów.
- Kliknij na Motywy przycisk, aby przełączać motywy do wyświetlenia. Możesz nadal naciskać Motywy przycisk, aby przełączyć ich widoczność.
Jak zarządzać swoimi motywami
Utwórz słowniki dla każdego motywu, aby przechowywać różne kolory, których będzie używał. Dzieje się tak, aby wszystkie kolory motywu były przechowywane w jednym miejscu, na wypadek, gdybyś musiał ich użyć wiele razy. Ułatwia również aktualizowanie motywu o nowe kolory w przyszłości.
- Na górze domyślnej Form1.cs plik C# i wewnątrz Formularz klasy, utwórz wyliczenie globalne. To wyliczenie będzie przechowywać różne typy kolorów, których będziesz używać w motywie.
wyliczenie Kolor motywu
{
Podstawowy,
Wtórny,
Trzeciorzędowy,
Tekst
} - Poniżej zadeklaruj trzy słowniki globalne, po jednym dla każdego z trzech tematów. Możesz przeczytać więcej o słownikach, jeśli nie wiesz, jak używać a słownik w C#.
Słownik<MotywKolor, kolor> Światło = nowy słownik<MotywKolor, kolor>();
Słownik<MotywKolor, kolor> Natura = nowy słownik<MotywKolor, kolor>();
Słownik<MotywKolor, kolor> Ciemny = nowy słownik<MotywKolor, kolor>(); - Wewnątrz konstruktora zainicjuj słowniki. Dodaj wartości dla różnych kolorów, których użyje każdy motyw.
publiczny Formularz 1()
{
InitializeComponent();
// Dodaj słowniki tutaj
Światło = nowy słownik<MotywKolor, kolor>() {
{Kolor motywu. Kolor podstawowy. Biały dym },
{Kolor motywu. Wtórny, kolor. Srebro },
{Kolor motywu. trzeciorzędowy, kolor. Biały },
{Kolor motywu. Kolor tekstu. Czarny }
};
Natura = nowy słownik<MotywKolor, kolor>() {
{Kolor motywu. Kolor podstawowy. DarkSeaGreen },
{Kolor motywu. Wtórny, kolor. AlicjaBlue },
{Kolor motywu. trzeciorzędowy, kolor. Spadzi },
{Kolor motywu. Kolor tekstu. Czarny }
};
Ciemny = nowy słownik<MotywKolor, kolor>() {
{Kolor motywu. Kolor podstawowy. DimGray },
{Kolor motywu. Wtórny, kolor. DimGray },
{Kolor motywu. trzeciorzędowy, kolor. Czarny },
{Kolor motywu. Kolor tekstu. Biały }
};
}
Jak zmienić motyw
Twórz funkcje do zarządzania motywem aplikacji. Te funkcje zmienią kolor tła lub kolor tekstu elementów interfejsu użytkownika na kanwie.
- Utwórz nową funkcję o nazwie Zmień motyw(). Funkcja przyjmie kolory motywu jako argumenty.
- Wewnątrz funkcji zmień właściwości koloru tła elementów interfejsu użytkownika. Nowe kolory tła będą wykorzystywać kolory wybranego motywu.
prywatnypróżniaZmień motyw(Kolor pierwszorzędowy, Kolor drugorzędny, Kolor trzeciorzędowy)
{
// Zmień kolor tła przycisków
Ustawienia motywu btn. BackColor = kolor podstawowy;
button1.BackColor = primaryColor;
button2.BackColor = secondColor;
button3.BackColor = secondColor;
ten.BackColor = trzeciorzędny kolor;
} - Utwórz nową funkcję o nazwie ZmieńKolorTekstu(). Możesz użyć tego do zmiany koloru tekstu z ciemnego na jasny. Ma to na celu zapewnienie, że tekst na ciemnym tle będzie nadal czytelny.
prywatnypróżniaZmieńkolor tekstu(Kolor tekstuKolor)
{
// Zmiana kolor ztekst
button1.ForeColor = kolor tekstu;
button2.ForeColor = textColor;
button3.ForeColor = kolor tekstu;
label1.ForeColor = textColor;
Ustawienia motywu btn. KolorPrzód = Kolor tekstu;
} - Z poziomu projektanta kliknij dwukrotnie kontrolkę przycisku „Światło”. Spowoduje to otwarcie pliku związanego z kodem i wygeneruje procedurę obsługi zdarzeń, gdy użytkownik kliknie przycisk.
- Wewnątrz obsługi zdarzeń użyj Zmień motyw() oraz ZmieńKolorTekstu() Funkcje. Wprowadź kolory, których używa motyw. Możesz pobrać te kolory ze słownika motywów „Jasne”.
prywatnypróżniabtnLightTheme_Click(nadawca obiektu, EventArgs e)
{
Zmień motyw(Światło[Kolor motywu. Podstawowy], Światło[Kolor motywu. Wtórny], Światło[Kolor motywu. Trzeciorzędowy]);
Zmieńkolor tekstu(Światło[Kolor motywu. Tekst]);
} - Wróć do projektanta i kliknij przyciski „Natura” i „Ciemny”. Użyj Zmień motyw() oraz ZmieńKolorTekstu() funkcje w ich programach obsługi zdarzeń.
prywatnypróżniabtnNatureTheme_Click(nadawca obiektu, EventArgs e)
{
Zmień motyw(Natura[Kolor motywu. Podstawowy], Natura[Kolor motywu. Wtórny], Natura[Kolor motywu. Trzeciorzędowy]);
Zmieńkolor tekstu(Natura[Kolor motywu. Tekst]);
}
prywatnypróżniabtnDarkTheme_Click(nadawca obiektu, EventArgs e)
{
Zmień motyw(Ciemny[Kolor motywu. Podstawowy], Ciemny[Kolor motywu. Wtórny], Ciemny[Kolor motywu. Trzeciorzędowy]);
Zmieńkolor tekstu(Ciemny[Kolor motywu. Tekst]);
} - Domyślnie motyw powinien być ustawiony na motyw „Jasny”, gdy użytkownik po raz pierwszy otworzy aplikację. W konstruktorze, pod słownikami, użyj Zmień motyw() oraz ZmieńKolorTekstu() Funkcje.
Zmień motyw(Światło[Kolor motywu. Podstawowy], Światło[Kolor motywu. Wtórny], Światło[Kolor motywu. Trzeciorzędowy]);
Zmieńkolor tekstu(Światło[Kolor motywu. Tekst]); - Uruchom aplikację, klikając zielony przycisk odtwarzania w górnej części okna programu Visual Studio.
- Domyślnie aplikacja używa motywu „Jasny” i stosuje schemat kolorów szarości do kontrolek interfejsu użytkownika. Przełącz przycisk motywów, aby wyświetlić listę motywów.
- Kliknij motyw Natura.
- Kliknij ciemny motyw.
Tworzenie aplikacji za pomocą formularzy Windows
Wiele aplikacji pozwala użytkownikowi przełączać się między wieloma motywami. Możesz dodać motywy do aplikacji Windows Forms, tworząc opcje do wybrania przez użytkownika.
Gdy użytkownik kliknie motyw, możesz zmienić kolor tła, tekst lub inne właściwości, aby dopasować kolory użyte w wybranym motywie.
Kolory dla każdego z motywów używają wbudowanych kolorów programu Visual Studio. Będziesz musiał użyć odpowiedniego schematu kolorów, aby zapewnić użytkownikom lepsze wrażenia. Możesz dowiedzieć się więcej o różnych sposobach wyboru schematu kolorów dla swojej aplikacji.