CheckBox control

CheckBox cho phép người dùng lựa chọn trạng thái tắt hặc mở (on or off), thường để phản ánh giá trị Boolean trong Code-behind. Hãy cùng đi thẳng vào ví dụ trong trường hợp bạn không chắc CheckBox trông ra sao:

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>Enable feature ABC</CheckBox>
		<CheckBox IsChecked="True">Enable feature XYZ</CheckBox>
		<CheckBox>Enable feature WWW</CheckBox>
	</StackPanel>
</Window>

Như bạn thấy, CheckBox rất dễ dùng. Trong CheckBox thứ 2, tôi đã dùng thuộc thính IsChecked để mặc định nó được check, ngoài ra không cần sử dụng thuộc tính nào khác. Thuộc tính IsChecked cũng có thể dùng trong Code-behind nếu bạn muốn kiểm tra 1 CheckBox có được check hay không.

Tùy chỉnh nội dung

CheckBox kế thừa từ lớp ContentControl, điều này có nghĩa là nó có thể được tùy chình nội dung và cách hiển thị bên trong. Nếu bạn chỉ định 1 phần text như tôi đã làm ở ví dụ trên, WPF sẽ đặt một TextBlock control và hiển thị nó, nhưng đấy chỉ là lối tắt để bạn dễ làm việc hơn. ban có thể sử dụng bất cứ loại control nào đặt bên trong nó, bạn sẽ thấy điều đó trong ví dụ kế tiếp:

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Green" FontWeight="Bold">ABC</Run>
			</TextBlock>
		</CheckBox>
		<CheckBox IsChecked="True">
			<WrapPanel>
				<TextBlock>
					Enable feature <Run FontWeight="Bold">XYZ</Run>
				</TextBlock>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="5,0" />
			</WrapPanel>
		</CheckBox>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Blue" TextDecorations="Underline" FontWeight="Bold">WWW</Run>
			</TextBlock>
		</CheckBox>
	</StackPanel>
</Window>

Như bạn thấy trong ví dụ về markup, bạn có thể làm khá nhiều thứ bạn muốn trên nội dung của TextBox. Trong 3 checkbox, tôi đã thực hiện những cách khách nhau trên text, và trên textbox ở giữa tôi thậm chí còn thêm 1 Image control. Bằng cách chỉ định 1 control như là nội dung thay vì chỉ là text đơn thuần, chúng ta có thể có nhiều cách hiển thị control, và điều tuyệt vời là không vấn đề gì xảy ra với phần nội dung khi bạn nhấp chuột vào. Nó sẽ kích hoạc CheckBox và chuyển trạng thái on hoặc off.

Thuộc tính IsThreeState

Như đã đề cập, CheckBox thường ứng với giá trị boolean, có nghĩa là nó chỉ có 2 trạng thái: true hoặc false (on hoặc off). Tuy nhiên, khi 1 kiểu dữ liệu boolean có thể null, sẽ hiệu quả khi cho phép 3 trạng thái (true, false hoặc null), CheckBox cũng có thể hỗ trợ trường hợp này. Bằng cách thiết lập thuộc tính IsThreeState bằng true, CheckBox sẽ có thể nhận trạng thái thứ 3 gọi là "trạng thái vô định".

Một cách sử dụng thông thường là có "Enable all" checkbox dùng để thiết lập trạng thái của các checkbox con cũng như hiện thị trạng thái của 1 tập checkbox. Ví dụ của chúng ta để biết làm thế nào tạo 1 tập hợp các feature có thể chuyển trạng thái on hoặc off với 1 checkbox "Enable all" trên cùng:

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxThreeStateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxThreeStateSample" Height="170" Width="300">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<StackPanel Margin="10,5">
			<CheckBox IsThreeState="True" Name="cbAllFeatures" Checked="cbAllFeatures_CheckedChanged" Unchecked="cbAllFeatures_CheckedChanged">Enable all</CheckBox>
			<StackPanel Margin="20,5">
				<CheckBox Name="cbFeatureAbc" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature ABC</CheckBox>
				<CheckBox Name="cbFeatureXyz" IsChecked="True" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature XYZ</CheckBox>
				<CheckBox Name="cbFeatureWww" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature WWW</CheckBox>
			</StackPanel>
		</StackPanel>
	</StackPanel>
</Window>

using System;
using System.Windows;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class CheckBoxThreeStateSample : Window
	{
		public CheckBoxThreeStateSample()
		{
			InitializeComponent();
		}


		private void cbAllFeatures_CheckedChanged(object sender, RoutedEventArgs e)
		{
			bool newVal = (cbAllFeatures.IsChecked == true);
			cbFeatureAbc.IsChecked = newVal;
			cbFeatureXyz.IsChecked = newVal;
			cbFeatureWww.IsChecked = newVal;
		}

		private void cbFeature_CheckedChanged(object sender, RoutedEventArgs e)
		{
			cbAllFeatures.IsChecked = null;
			if((cbFeatureAbc.IsChecked == true) && (cbFeatureXyz.IsChecked == true) && (cbFeatureWww.IsChecked == true))
				cbAllFeatures.IsChecked = true;
			if((cbFeatureAbc.IsChecked == false) && (cbFeatureXyz.IsChecked == false) && (cbFeatureWww.IsChecked == false))
				cbAllFeatures.IsChecked = false;
		}

	}
}

Ví dụ này hoạt động từ 2 góc độ khác nhau: Nếu bạn check or bỏ check trên checkbox "Enable all" thì tất cả checkbox con sẽ trình bày trạng thái của "Application" hoặc là check hoặc bỏ check. Ngược lại khi bạn check hoặc bỏ check trên checkbox con nó sẽ tác động tới trạng thái checkbox "Enable all": nếu tất cả check hoặc bỏ check thì checkbox "Enable all" sẽ có cùng trạng thái tương tự - ngược lại giá trị sẽ là null, có nghĩa là trạng thái vô định sẽ được gán cho CheckBox.

Tất cả những hành vi có thể được thấy trên màn được chụp ở trên, chúng ta phải đăng ký sự kiện Checked và Unchecked của CheckBox để thu được kết quả trên. Trong thực ví dụ thực tế, bạn có làm mờ giá trị thay vì như thế, nhưng ví dụ trên chỉ nêu ra cách sử dụng cơ bản của thuộc tính IsThreeState để tạo hiệu ứng "Toggle all"