Tema adalah cara yang bagus untuk memungkinkan pengguna menyesuaikan aplikasi Anda tanpa harus terlalu terlibat dalam detail spesifik.
Biasanya aplikasi modern memiliki opsi untuk beralih di antara tema yang berbeda. Misalnya, beberapa aplikasi memungkinkan Anda untuk bertukar antara tema terang atau tema gelap, sementara yang lain mungkin memiliki lebih banyak pilihan tema.
Windows Forms adalah kerangka kerja UI yang memungkinkan Anda membuat aplikasi desktop. Anda dapat menerapkan tema dalam aplikasi formulir Windows dengan membuat tombol yang dapat dipilih untuk setiap tema.
Saat pengguna memilih tema, Anda dapat mengubah warna latar belakang atau properti warna teks dari setiap elemen agar sesuai dengan tema yang dipilih.
Cara Mengatur Proyek Formulir Windows
Pertama, buat aplikasi formulir Windows baru. Isi proyek baru dengan beberapa kontrol dasar, seperti tombol dan label.
- Membuat aplikasi Windows Forms baru di Visual Studio.
- Di proyek baru, gunakan kotak alat untuk mencari kontrol tombol.
- Pilih kontrol tombol dan seret ke kanvas. Tambahkan total tiga kontrol tombol.
- Menggunakan kotak alat, klik dan seret a kontrol label ke atas kanvas. Tempatkan label di bawah tombol.
- Gaya tombol dan label menggunakan jendela properti. Ubah properti menjadi berikut:
Kontrol Nama properti Nilai baru tombol1 Ukuran 580, 200 FlatStyle Datar Teks Pengguna tombol2 Ukuran 580, 100 FlatStyle Datar Teks Akun tombol3 Ukuran 580, 100 FlatStyle Datar Teks Izin label1 Teks Hak Cipta 2022
Cara Membuat Tombol Pengaturan dan Daftar Tema
Agar menu tema sederhana berfungsi, buat beberapa tombol untuk mewakili setiap tema. Aplikasi ini akan mencakup tiga tema, tema "Terang", tema "Alam", dan tema "Gelap".
- Tambahkan kontrol tombol lain ke kanvas untuk mewakili tombol pengaturan (atau "Tema").
- Ubah properti tombol ini menjadi yang berikut:
Nama properti Nilai baru Nama btnPengaturan Tema FlatStyle Datar Ukuran 200, 120 Teks Tema - Seret tiga tombol lagi ke kanvas. Tombol-tombol ini akan mewakili tiga tema yang berbeda. Ubah properti untuk masing-masing tombol menjadi berikut ini:
Kontrol Nama properti Nilai baru Tombol 1 Nama btnTema Cahaya Warna Belakang Asap putih Ukuran 200, 80 FlatStyle Datar Teks Lampu Terlihat PALSU Tombol ke-2 Nama btnTema Alam Warna Belakang GelapLautHijau Ukuran 200, 80 FlatStyle Datar Teks Alam Terlihat PALSU Tombol ke-3 Nama btnTema Gelap Warna Belakang redup abu-abu Warna Depan Putih Ukuran 200, 80 FlatStyle Datar Teks Gelap Terlihat PALSU - Klik dua kali pada Tema tombol. Ini akan membuat metode untuk menangani acara "saat diklik". Metode ini akan berjalan ketika pengguna mengklik tombol ini.
- Secara default, tema "Terang", "Alam", dan "Gelap" tidak akan terlihat. Di dalam fungsi, tambahkan fungsionalitas untuk mengaktifkan visibilitas tombol untuk ditampilkan atau disembunyikan.
pribadiruang kosongbtnThemeSettings_Click(pengirim objek, EventArgs e)
{
btnTema Alam. Terlihat = !btnNatureTheme. Terlihat;
btnTema Cahaya. Terlihat = !btnLightTheme. Terlihat;
btnTema Gelap. Terlihat = !btnDarkTheme. Terlihat;
} - Jalankan aplikasi dengan mengklik tombol putar hijau di bagian atas jendela Visual Studio.
- Saat runtime, aplikasi akan menyembunyikan tombol untuk masing-masing dari tiga tema secara default.
- Klik pada Tema tombol untuk beralih tema untuk ditampilkan. Anda dapat terus menekan tombol Tema tombol untuk mengaktifkan visibilitas mereka.
Bagaimana Mengelola Tema Anda
Buat Kamus untuk setiap tema untuk menyimpan warna berbeda yang akan digunakan. Ini agar Anda menyimpan semua warna tema Anda di satu tempat, jika Anda perlu menggunakannya beberapa kali. Ini juga memudahkan jika Anda ingin memperbarui tema dengan warna baru di masa mendatang.
- Di bagian atas default Formulir1.cs C# file dan di dalam Membentuk kelas, buat enum global. Enum ini akan menyimpan berbagai jenis warna yang akan Anda gunakan dalam sebuah tema.
enum TemaWarna
{
Utama,
Sekunder,
Tersier,
Teks
} - Di bawahnya, nyatakan tiga Kamus global, satu untuk masing-masing dari tiga tema. Anda dapat membaca lebih lanjut tentang Kamus jika Anda tidak terbiasa dengan cara menggunakan a kamus dalam C#.
Kamus<Warna Tema, Warna> Cahaya = Kamus baru<Warna Tema, Warna>();
Kamus<Warna Tema, Warna> Alam = Kamus baru<Warna Tema, Warna>();
Kamus<Warna Tema, Warna> Gelap = Kamus baru<Warna Tema, Warna>(); - Di dalam konstruktor, inisialisasi kamus. Tambahkan nilai untuk warna berbeda yang akan digunakan setiap tema.
publik Formulir1()
{
Inisialisasi Komponen();
// Tambahkan kamus di sini
Cahaya = Kamus baru<Warna Tema, Warna>() {
{ Warna Tema. Utama, Warna. Asap putih },
{ Warna Tema. Sekunder, Warna. Perak },
{ Warna Tema. Tersier, Warna. Putih },
{ Warna Tema. Warna teks. Hitam }
};
Alam = Kamus baru<Warna Tema, Warna>() {
{ Warna Tema. Utama, Warna. DarkSeaGreen },
{ Warna Tema. Sekunder, Warna. AliceBiru },
{ Warna Tema. Tersier, Warna. embun },
{ Warna Tema. Warna teks. Hitam }
};
Gelap = Kamus baru<Warna Tema, Warna>() {
{ Warna Tema. Utama, Warna. redup abu-abu },
{ Warna Tema. Sekunder, Warna. redup abu-abu },
{ Warna Tema. Tersier, Warna. Hitam },
{ Warna Tema. Warna teks. Putih }
};
}
Cara Mengubah Tema
Buat fungsi untuk mengelola tema aplikasi. Fungsi-fungsi ini akan mengubah warna latar belakang atau warna teks elemen UI di kanvas.
- Buat fungsi baru bernama Ubah Tema(). Fungsi akan mengambil warna untuk tema sebagai argumen.
- Di dalam fungsi, ubah properti warna latar belakang elemen UI. Warna latar belakang baru akan menggunakan warna untuk tema yang dipilih.
pribadiruang kosongUbah Tema(Warna Warna Primer, Warna Sekunder, Warna Tersier)
{
// Ubah warna latar belakang tombol
btnPengaturan Tema. Warna Belakang = warna primer;
button1.BackColor = warna primer;
button2.BackColor = secondaryColor;
button3.BackColor = secondaryColor;
ini.BackColor = warna tersier;
} - Buat fungsi baru bernama Ubah WarnaTeks(). Anda dapat menggunakan ini untuk mengubah warna teks antara gelap dan terang. Ini untuk memastikan bahwa teks dengan latar belakang gelap tetap dapat dibaca.
pribadiruang kosongUbah WarnaTeks(Warna teks warna)
{
// Mengubah warna dariteks
button1.ForeColor = warna teks;
button2.ForeColor = warna teks;
button3.ForeColor = warna teks;
label1.ForeColor = warna teks;
btnPengaturan Tema. Warna Depan = warna teks;
} - Dari perancang, klik dua kali pada kontrol tombol "Cahaya". Ini akan membuka file di belakang kode dan menghasilkan event handler ketika pengguna mengklik tombol.
- Di dalam event handler, gunakan Ubah Tema() dan Ubah WarnaTeks() fungsi. Masukkan warna yang digunakan tema. Anda dapat mengambil warna-warna ini dari kamus tema "Cahaya".
pribadiruang kosongbtnLightTheme_Click(pengirim objek, EventArgs e)
{
Ubah Tema(Lampu[Warna Tema. Utama], Lampu[Warna Tema. Sekunder], Lampu[Warna Tema. Tersier]);
Ubah WarnaTeks(Lampu[Warna Tema. Teks]);
} - Kembali ke desainer dan klik tombol "Alam" dan "Gelap". Menggunakan Ubah Tema() dan Ubah WarnaTeks() fungsi di event handler mereka juga.
pribadiruang kosongbtnNatureTheme_Click(pengirim objek, EventArgs e)
{
Ubah Tema(Alam[Warna Tema. Utama], Alam[Warna Tema. Sekunder], Alam[Warna Tema. Tersier]);
Ubah WarnaTeks(Alam[Warna Tema. Teks]);
}
pribadiruang kosongbtnDarkTheme_Click(pengirim objek, EventArgs e)
{
Ubah Tema(Gelap[Warna Tema. Utama], Gelap[Warna Tema. Sekunder], Gelap[Warna Tema. Tersier]);
Ubah WarnaTeks(Gelap[Warna Tema. Teks]);
} - Secara default, tema harus disetel ke tema "Ringan" saat pengguna pertama kali membuka aplikasi. Di konstruktor, di bawah kamus, gunakan Ubah Tema() dan Ubah WarnaTeks() fungsi.
Ubah Tema(Lampu[Warna Tema. Utama], Lampu[Warna Tema. Sekunder], Lampu[Warna Tema. Tersier]);
Ubah WarnaTeks(Lampu[Warna Tema. Teks]); - Jalankan aplikasi dengan mengklik tombol putar hijau di bagian atas jendela Visual Studio.
- Secara default, aplikasi menggunakan tema "Cahaya" dan menerapkan skema warna abu-abu ke kontrol UI. Alihkan tombol tema untuk melihat daftar tema.
- Klik pada tema Alam.
- Klik pada tema Gelap.
Membuat Aplikasi Menggunakan Formulir Windows
Banyak aplikasi memungkinkan pengguna untuk beralih di antara beberapa tema. Anda dapat menambahkan tema ke aplikasi Windows Forms dengan membuat opsi untuk dipilih pengguna.
Saat pengguna mengklik tema, Anda dapat mengubah warna latar belakang, teks, atau properti lainnya agar sesuai dengan warna yang digunakan dalam tema yang dipilih.
Warna untuk setiap tema menggunakan warna bawaan Visual Studio. Anda perlu menggunakan skema warna yang tepat untuk memberikan pengalaman yang lebih baik kepada pengguna. Anda dapat mempelajari lebih lanjut tentang berbagai cara Anda dapat memilih skema warna untuk aplikasi Anda.
