RadioButton control

RadioButton cho phép bạn đưa ra các danh sách các tùy chọn dành cho user, và chỉ được chọn một tùy chọn cùng một thời điểm. Bạn có thể đạt được cùng kết quả và sử dụng ít không gian hơn bằng cách sử dụng Combobox control, nhưng thiết lập radio button đem lại cho người dùng 1 cái nhìn tốt hơn về các tùy chọn họ có.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>Yes</RadioButton>
		<RadioButton>No</RadioButton>
		<RadioButton IsChecked="True">Maybe</RadioButton>
	</StackPanel>
</Window>

Tất cả việc chúng ta cần làm là thêm 1 Label với 1 câu hỏi, và sau đó là 3 cái radio button, mỗi cái là 1 câu trả lời. Chúng ta định nghĩa tùy chọn mặc định bằng cách sử dụng thuộc tính IsChecked trên RadioButton cuối, người dùng có thể thay đổi đơn giản bằng cách nhập chuột trên 1 radio button khác. Đây cũng là thuộc tính bạn có thể muốn sử dụng ở Code-behind để kiểm tra 1 RadioButton được chọn hoặc không.

RadioButton groups (nhóm các control RadioButton)

Nếu bạn thử chạy ví dụ trên, bạn sẽ thấy rằng, như đã nói, chỉ một RadioButton có được chọn tại cùng 1 thời điểm. Nhưng sẽ ra sao nếu bạn muốn một vài nhóm radio button, mỗi nhóm có các lựa chọn của riêng nó? Đây là thời điểm thuộc tính GroupName phát huy vai trò, nó cho phép bạn chỉ định radio button nào được nhóm cùng nhau. Đây là 1 ví dụ:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="230" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton GroupName="ready">Yes</RadioButton>
		<RadioButton GroupName="ready">No</RadioButton>
		<RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

		<Label FontWeight="Bold">Male or female?</Label>
		<RadioButton GroupName="sex">Male</RadioButton>
		<RadioButton GroupName="sex">Female</RadioButton>
		<RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
	</StackPanel>
</Window>

Với thuộc tính GroupName được thiết lập trên mỗi radio button, 1 tùy chọn sẽ được chọn trên mỗi group trong 2 group đã cho. Nếu không thiết lập thì chúng ta chỉ có một tùy chọn được chọn trên tất cả 6 radio button.

Tùy chỉnh nội dung

RadioButton thừa kế từ lớp ContentControl, điều này có nghĩa ta có thể tùy chỉnh nội dung và hiển thị. Nếu bạn đánh dấu 1 đoạn text, giống như tôi đã làm ở ví dụ trên, WPF sẽ đặt nó vào bên trong 1 TextBlock control và hiển thị nó, nhưng đây chỉ là 1 lối tắt cho phép làm mọi thứ dễ dàng hơn cho bạn. Bạn có thể sử dụng bất kỳ loại control nào bên trong nó, cũng như bạn sẽ thấy trong ví dụ kế tiếp.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonCustomContentSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Yes" Foreground="Green" />
			</WrapPanel>
		</RadioButton>
		<RadioButton Margin="0,5">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="No" Foreground="Red" />
			</WrapPanel>
		</RadioButton>
		<RadioButton IsChecked="True">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Maybe" Foreground="Gray" />
			</WrapPanel>
		</RadioButton>
	</StackPanel>
</Window>

Việc định dạng uyển chuyển, ví dụ này có một chút phức tạp, nhưng ý tưởng thì tương đối đơn giản. Với mỗi RadioButton chúng ta có 1 WrapPanel với 1 hình ảnh và text bên trong nó. Vì bây giờ chúng ta điều khiển text sử dụng TextBlock control, điều này cho phép chúng ta định dạng text theo như chúng ta muốn. Trong ví dụ này, tôi đã thay đổi màu text để phù hợp với lựa chọn. 1 Image control (đọc thêm ở phần sau) được dùng để hiển thị hình ảnh cho mỗi lựa chọn.

Lưu ý bạn có thể nhấp chuột vào bất cứ vị trí nào trên RadioButton, thậm chí trên hình ảnh hoặc text để chọn nó, bởi vì chúng ta đã chỉ định nó như nội dung của RadioButton. Nếu bạn đặt nó như 1 panel riêng biệt cạnh RadioButton thì người dùng chỉ có thể nhấp chuột trực tiếp trên vòng tròn của RadioButton để chọn nó, điều này thì kém thực tế.