WinForms: Cách thêm nhiều chủ đề vào ứng dụng của bạn

Các ứng dụng hiện đại thường có tùy chọn chuyển đổi giữa các chủ đề khác nhau. Ví dụ: một số ứng dụng cho phép bạn hoán đổi giữa chủ đề sáng hoặc chủ đề tối, trong khi những ứng dụng khác có thể có nhiều lựa chọn chủ đề hơn.

Windows Forms là một khung giao diện người dùng cho phép bạn tạo các ứng dụng trên máy tính để bàn. Bạn có thể triển khai các chủ đề trong ứng dụng biểu mẫu Windows bằng cách tạo các nút có thể chọn cho từng chủ đề.

LÀM VIDEO TRONG NGÀY

Khi người dùng chọn một chủ đề, bạn có thể thay đổi thuộc tính màu nền hoặc màu văn bản của từng phần tử để phù hợp với chủ đề đã chọn.

Cách thiết lập dự án biểu mẫu Windows

Đầu tiên, tạo một ứng dụng biểu mẫu Windows mới. Điền vào dự án mới với một số điều khiển cơ bản, chẳng hạn như các nút và nhãn.

Tạo một ứng dụng Windows Forms mới trong Visual Studio.
Trong dự án mới, sử dụng hộp công cụ để tìm kiếm một nút điều khiển.
Chọn nút điều khiển và kéo nó lên canvas. Thêm tổng cộng ba nút điều khiển.
Sử dụng hộp công cụ, nhấp và kéo kiểm soát nhãn lên canvas. Đặt nhãn bên dưới các nút.

Tạo kiểu cho các nút và nhãn bằng cách sử dụng cửa sổ thuộc tính. Thay đổi các thuộc tính sau:

button1	Kích thước	580, 200
	FlatStyle	Bằng phẳng
	Chữ	Người dùng
button2	Kích thước	580, 100
	FlatStyle	Bằng phẳng
	Chữ	Tài khoản
button3	Kích thước	580, 100
	FlatStyle	Bằng phẳng
	Chữ	Quyền
label1	Chữ	Bản quyền 2022

Cách tạo nút cài đặt và danh sách chủ đề

Để menu chủ đề đơn giản hoạt động, hãy tạo nhiều nút để đại diện cho từng chủ đề. Ứng dụng sẽ bao gồm ba chủ đề, chủ đề 'Ánh sáng', chủ đề 'Thiên nhiên' và chủ đề 'Bóng tối'.

Thêm một nút điều khiển khác vào canvas để đại diện cho nút cài đặt (hoặc 'Chủ đề').
Thay đổi các thuộc tính của nút này thành như sau:

Tên btnThemeSettings

FlatStyle Bằng phẳng

Kích thước 200, 120

Chữ Chủ đề

Kéo thêm ba nút vào canvas. Các nút này sẽ đại diện cho ba chủ đề khác nhau. Thay đổi các thuộc tính cho từng nút thành như sau:

Nút thứ nhất	Tên	btnLightTheme
	Màu nền	Khói trắng
	Kích thước	200, 80
	FlatStyle	Bằng phẳng
	Chữ	Nhẹ
	Dễ thấy	Sai
Nút thứ 2	Tên	btnNatureTheme
	Màu nền	DarkSeaGreen
	Kích thước	200, 80
	FlatStyle	Bằng phẳng
	Chữ	Thiên nhiên
	Dễ thấy	Sai
Nút thứ 3	Tên	btnDarkTheme
	Màu nền	DimGray
	ForeColor	Trắng
	Kích thước	200, 80
	FlatStyle	Bằng phẳng
	Chữ	Tối
	Dễ thấy	Sai

Bấm đúp vào Chủ đề cái nút. Điều này sẽ tạo ra một phương pháp để xử lý sự kiện “khi nhấp chuột”. Phương thức sẽ chạy khi người dùng nhấp vào nút này.

Theo mặc định, các chủ đề 'Ánh sáng', 'Thiên nhiên' và 'Bóng tối' sẽ không hiển thị. Bên trong chức năng, thêm chức năng chuyển đổi khả năng hiển thị của các nút thành hiển thị hoặc ẩn.

private void btnThemeSettings_Click(object sender, EventArgs e) 
{ 
    btnNatureTheme.Visible = !btnNatureTheme.Visible; 
    btnLightTheme.Visible = !btnLightTheme.Visible; 
    btnDarkTheme.Visible = !btnDarkTheme.Visible; 
}

Chạy ứng dụng bằng cách nhấp vào nút phát màu xanh lục ở đầu cửa sổ Visual Studio.
Trong thời gian chạy, ứng dụng sẽ ẩn các nút cho từng chủ đề trong ba chủ đề theo mặc định.
Bấm vào Chủ đề để chuyển đổi các chủ đề để hiển thị. Bạn có thể tiếp tục nhấn Chủ đề nút để chuyển đổi khả năng hiển thị của họ.

Cách quản lý chủ đề của bạn

Tạo Từ điển cho mỗi chủ đề để lưu trữ các màu khác nhau mà nó sẽ sử dụng. Điều này là để bạn lưu trữ tất cả các màu chủ đề của mình ở một nơi, trong trường hợp bạn cần sử dụng chúng nhiều lần. Nó cũng giúp bạn dễ dàng hơn nếu bạn muốn cập nhật chủ đề với các màu mới trong tương lai.

Ở trên cùng của mặc định Form1.cs Tệp C # và bên trong Hình thức lớp, tạo một enum toàn cục. Enum này sẽ lưu trữ các loại màu khác nhau mà bạn sẽ sử dụng trong một chủ đề.
```
enum ThemeColor 
{ 
    Primary, 
    Secondary, 
    Tertiary, 
    Text 
}  
```

Bên dưới, khai báo ba Từ điển toàn cầu, một cho mỗi chủ đề trong số ba chủ đề. Bạn có thể đọc thêm về Từ điển nếu bạn không quen với cách sử dụng từ điển trong 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>();

Bên trong hàm khởi tạo, khởi tạo các từ điển. Thêm giá trị cho các màu khác nhau mà mỗi chủ đề sẽ sử dụng.

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 } 
    }; 
}

Cách thay đổi chủ đề

Tạo các chức năng để quản lý chủ đề của ứng dụng. Các chức năng này sẽ thay đổi màu nền hoặc màu văn bản của các phần tử giao diện người dùng trên canvas.

Tạo một chức năng mới được gọi là ChangeTheme () . Hàm sẽ lấy màu sắc của một chủ đề làm đối số.

Bên trong hàm, thay đổi thuộc tính màu nền của các phần tử giao diện người dùng. Các màu nền mới sẽ sử dụng các màu cho chủ đề đã chọn.

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; 
}

Tạo một chức năng mới được gọi là ChangeTextColor () . Bạn có thể sử dụng điều này để thay đổi màu sắc của văn bản giữa tối và sáng. Điều này nhằm đảm bảo rằng văn bản trên nền tối vẫn có thể đọc được.

private void ChangeTextColor(Color textColor) 
{ 
    // Change color of text 
    button1.ForeColor = textColor; 
    button2.ForeColor = textColor; 
    button3.ForeColor = textColor; 
    label1.ForeColor = textColor; 
    btnThemeSettings.ForeColor = textColor; 
}

Từ trình thiết kế, nhấp đúp vào nút điều khiển 'Light'. Thao tác này sẽ mở tệp mã phía sau và tạo trình xử lý sự kiện khi người dùng nhấp vào nút.
Bên trong trình xử lý sự kiện, hãy sử dụng ChangeTheme () và ChangeTextColor () chức năng. Nhập các màu mà chủ đề đang sử dụng. Bạn có thể truy xuất những màu này từ từ điển chủ đề 'Ánh sáng '.
```
private void btnLightTheme_Click(object sender, EventArgs e) 
{ 
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
    ChangeTextColor(Light[ThemeColor.Text]); 
}
```

Quay lại trình thiết kế và nhấp vào nút 'Tự nhiên' và 'Tối'. Sử dụng ChangeTheme () và ChangeTextColor () các chức năng trong trình xử lý sự kiện của chúng.

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]); 
}

Theo mặc định, chủ đề phải được đặt thành chủ đề 'Ánh sáng' khi người dùng mở ứng dụng lần đầu tiên. Trong hàm tạo, bên dưới từ điển, sử dụng ChangeTheme () và ChangeTextColor () chức năng.
```
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
ChangeTextColor(Light[ThemeColor.Text]);
```
Chạy ứng dụng bằng cách nhấp vào nút phát màu xanh lục ở đầu cửa sổ Visual Studio.
Theo mặc định, ứng dụng sử dụng chủ đề 'Ánh sáng' và áp dụng bảng màu xám cho các điều khiển giao diện người dùng. Chuyển đổi nút chủ đề để xem danh sách các chủ đề.
Nhấp vào chủ đề Thiên nhiên.
Nhấp vào chủ đề Tối.

Tạo ứng dụng bằng Windows Forms

Nhiều ứng dụng cho phép người dùng chuyển đổi giữa nhiều chủ đề. Bạn có thể thêm chủ đề vào ứng dụng Windows Forms bằng cách tạo các tùy chọn để người dùng chọn.

samsung one ui home là gì

Khi người dùng nhấp vào một chủ đề, bạn có thể thay đổi màu nền, văn bản hoặc bất kỳ thuộc tính nào khác để phù hợp với màu được sử dụng trong chủ đề đã chọn.

Màu sắc cho mỗi chủ đề sử dụng màu có sẵn của Visual Studio. Bạn sẽ cần sử dụng bảng màu phù hợp để mang đến cho người dùng trải nghiệm tốt hơn. Bạn có thể tìm hiểu thêm về các cách khác nhau mà bạn có thể chọn bảng màu cho ứng dụng của mình.

Tên	btnThemeSettings
FlatStyle	Bằng phẳng
Kích thước	200, 120
Chữ	Chủ đề