WinForms: Cara Menambah Berbilang Tema pada Aplikasi Anda

WinForms: Cara Menambah Berbilang Tema pada Aplikasi Anda

Ia adalah perkara biasa untuk aplikasi moden mempunyai pilihan untuk bertukar antara tema yang berbeza. Contohnya, sesetengah aplikasi membenarkan anda menukar antara tema terang atau tema gelap, manakala yang lain mungkin mempunyai lebih banyak pilihan tema.





Windows Forms ialah rangka kerja UI yang membolehkan anda membuat aplikasi desktop. Anda boleh melaksanakan tema dalam apl borang Windows dengan mencipta butang yang boleh dipilih untuk setiap tema.





MAKEUSEOF VIDEO OF THE DAY

Apabila pengguna memilih tema, anda boleh menukar warna latar belakang atau sifat warna teks setiap elemen untuk dipadankan dengan tema yang dipilih.





Cara Sediakan Projek Borang Windows

Mula-mula, buat apl borang Windows baharu. Isi projek baharu dengan beberapa kawalan asas, seperti butang dan label.

  1. Buat a aplikasi Windows Forms baharu dalam Visual Studio.
  2. Dalam projek baharu, gunakan kotak alat untuk mencari kawalan butang.   Tetingkap harta untuk butang dalam apl Winforms
  3. Pilih kawalan butang dan seret ke atas kanvas. Tambah sejumlah tiga kawalan butang.   Tetingkap harta untuk butang dalam apl Winforms
  4. Menggunakan kotak alat, klik dan seret a kawalan label ke atas kanvas. Letakkan label di bawah butang.   Tetingkap harta untuk butang dalam apl Winforms
  5. Gaya butang dan label menggunakan tetingkap sifat. Tukar sifat kepada yang berikut:
    butang1 Saiz 580, 200
    Gaya Rata rata
    Teks Pengguna
    butang2 Saiz 580, 100
    Gaya Rata rata
    Teks Akaun
    butang3 Saiz 580, 100
    Gaya Rata rata
    Teks kebenaran
    label1 Teks Hak Cipta 2022

Cara Mencipta Butang Tetapan dan Senarai Tema

Untuk menu tema mudah berfungsi, buat berbilang butang untuk mewakili setiap tema. Aplikasi ini akan merangkumi tiga tema, tema 'Cahaya', tema 'Alam Semulajadi' dan tema 'Gelap'.



  1. Tambahkan satu lagi kawalan butang pada kanvas untuk mewakili butang tetapan (atau 'Tema').
  2. Tukar sifat butang ini kepada yang berikut:
    Nama btnTetapanTema
    Gaya Rata rata
    Saiz 200, 120
    Teks Tema
  3. Seret tiga lagi butang ke atas kanvas. Butang ini akan mewakili tiga tema yang berbeza. Tukar sifat untuk setiap butang kepada yang berikut:
    Butang pertama Nama btnTema Cahaya
    Warna Belakang WhiteSmoke
    Saiz 200, 80
    Gaya Rata rata
    Teks Cahaya
    Kelihatan Salah
    Butang ke-2 Nama btnTema Alam Semulajadi
    Warna Belakang Hijau Laut Gelap
    Saiz 200, 80
    Gaya Rata rata
    Teks alam semula jadi
    Kelihatan Salah
    Butang ke-3 Nama btnTema Gelap
    Warna Belakang DimGray
    ForeColor putih
    Saiz 200, 80
    Gaya Rata rata
    Teks Gelap
    Kelihatan Salah
  4. Klik dua kali pada Tema butang. Ini akan mencipta kaedah untuk mengendalikan acara 'pada klik'. Kaedah ini akan dijalankan apabila pengguna mengklik butang ini.
  5. Secara lalai, tema 'Cahaya', 'Alam Semula Jadi' dan 'Gelap' tidak akan kelihatan. Di dalam fungsi, tambahkan fungsi untuk menogol keterlihatan butang sama ada untuk ditunjukkan atau disembunyikan.
    private void btnThemeSettings_Click(object sender, EventArgs e) 
    {
    btnNatureTheme.Visible = !btnNatureTheme.Visible;
    btnLightTheme.Visible = !btnLightTheme.Visible;
    btnDarkTheme.Visible = !btnDarkTheme.Visible;
    }
  6. Jalankan aplikasi dengan mengklik butang main hijau di bahagian atas tetingkap Visual Studio.
  7. Pada masa jalan, aplikasi akan menyembunyikan butang untuk setiap tiga tema secara lalai.
  8. Klik pada Tema butang untuk menogol tema untuk ditunjukkan. Anda boleh terus menekan butang Tema butang untuk menogol keterlihatan mereka.

Cara Mengurus Tema Anda

Cipta Kamus untuk setiap tema untuk menyimpan warna berbeza yang akan digunakannya. Ini adalah supaya anda menyimpan semua warna tema anda di satu tempat, sekiranya anda perlu menggunakannya beberapa kali. Ia juga memudahkan jika anda ingin mengemas kini tema dengan warna baharu pada masa hadapan.

  1. Di bahagian atas lalai Borang1.cs C# dan di dalam fail Borang kelas, buat enum global. Enum ini akan menyimpan pelbagai jenis warna yang anda akan gunakan dalam tema.
    enum ThemeColor 
    {
    Primary,
    Secondary,
    Tertiary,
    Text
    }
  2. Di bawahnya, isytiharkan tiga Kamus global, satu untuk setiap tiga tema. Anda boleh membaca lebih lanjut tentang Kamus jika anda tidak biasa dengan cara menggunakan a kamus dalam 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. Di dalam pembina, mulakan kamus. Tambahkan nilai untuk warna berbeza yang akan digunakan oleh setiap tema.
    public Form1() 
    {
    InitializeComponent();
    // Add dictionaries here
    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 }
    };
    }

Cara Menukar Tema

Cipta fungsi untuk mengurus tema aplikasi. Fungsi ini akan menukar warna latar belakang atau warna teks elemen UI pada kanvas.





cara menyambungkan wii ke tv dengan HDMI
  1. Buat fungsi baharu yang dipanggil Tukar tema() . Fungsi ini akan mengambil warna untuk tema sebagai hujah.
  2. Di dalam fungsi, tukar sifat warna latar belakang elemen UI. Warna latar belakang baharu akan menggunakan warna untuk tema yang dipilih.
    private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor) 
    {
    // Change background color of buttons
    btnThemeSettings.BackColor = primaryColor;
    button1.BackColor = primaryColor;
    button2.BackColor = secondaryColor;
    button3.BackColor = secondaryColor;
    this.BackColor = tertiaryColor;
    }
  3. Buat fungsi baharu yang dipanggil ChangeTextColor() . Anda boleh menggunakan ini untuk menukar warna teks antara gelap dan terang. Ini adalah untuk memastikan teks pada latar belakang gelap masih boleh dibaca.
    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. Daripada pereka bentuk, klik dua kali pada kawalan butang 'Cahaya'. Ini akan membuka fail di belakang kod dan menjana pengendali acara apabila pengguna mengklik butang.
  5. Di dalam pengendali acara, gunakan Tukar tema() dan ChangeTextColor() fungsi. Masukkan warna yang digunakan oleh tema. Anda boleh mendapatkan semula warna ini daripada kamus tema 'Ringan'.
    private void btnLightTheme_Click(object sender, EventArgs e) 
    {
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
    ChangeTextColor(Light[ThemeColor.Text]);
    }
  6. Kembali ke pereka bentuk dan klik pada butang 'Nature' dan 'Dark'. Menggunakan Tukar tema() dan ChangeTextColor() berfungsi dalam pengendali acara mereka juga.
    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. Secara lalai, tema harus ditetapkan kepada tema 'Ringan' apabila pengguna mula-mula membuka apl. Dalam pembina, di bawah kamus, gunakan Tukar tema() dan ChangeTextColor() fungsi.
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
    ChangeTextColor(Light[ThemeColor.Text]);
  8. Jalankan aplikasi dengan mengklik butang main hijau di bahagian atas tetingkap Visual Studio.
  9. Secara lalai, aplikasi menggunakan tema 'Cahaya' dan menggunakan skema warna kelabu pada kawalan UI. Togol butang tema untuk melihat senarai tema.
  10. Klik pada tema Alam Semula Jadi.
  11. Klik pada tema Gelap.

Mencipta Aplikasi Menggunakan Borang Windows

Banyak aplikasi membenarkan pengguna bertukar antara berbilang tema. Anda boleh menambah tema pada aplikasi Windows Forms dengan mencipta pilihan untuk dipilih oleh pengguna.

Apabila pengguna mengklik pada tema, anda boleh menukar warna latar belakang, teks atau mana-mana sifat lain untuk dipadankan dengan warna yang digunakan dalam tema yang dipilih.





Warna untuk setiap tema menggunakan warna terbina dalam Visual Studio. Anda perlu menggunakan skema warna yang betul untuk memberikan pengguna pengalaman yang lebih baik. Anda boleh mengetahui lebih lanjut tentang cara berbeza anda boleh memilih skema warna untuk apl anda.