WPF 入门教程RadioButton介绍

最新推荐文章于 2024-08-11 12:05:48 发布

有技巧搬砖

最新推荐文章于 2024-08-11 12:05:48 发布

阅读量5.6k

点赞数

分类专栏： UI设计 c# WPF MVVM 文章标签： wpf html5 html

本文链接：https://blog.csdn.net/liaohaiyin/article/details/120511814

版权

UI设计同时被 3 个专栏收录

92 篇文章 9 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

MVVM

92 篇文章 18 订阅

订阅专栏

RadioButton 控件允许您为用户提供可能选项的列表，同时只选择其中一个选项。使用 ComboBox 控件可以使用更少的空间实现相同的效果，但是一组单选按钮往往可以让用户更好地了解他们拥有的选项。

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

我们所做的就是添加一个带有问题的标签，然后添加三个单选按钮，每个按钮都有一个可能的答案。我们通过使用最后一个 RadioButton 上的 IsChecked 属性定义了一个默认选项，用户只需单击其他单选按钮之一即可更改该选项。 这也是您希望从代码隐藏中使用的属性来检查是否选中了 RadioButton。

单选按钮组

如果您尝试运行上面的示例，您将看到，正如承诺的那样，只能同时检查一个 RadioButton。但是，如果您想要多组单选按钮，每组都有自己的单独选择，该怎么办？这就是GroupName属性的作用，它允许您指定哪些单选按钮属于一起。下面是一个例子：

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

通过在每个单选按钮上设置 GroupName 属性，现在可以为两个组中的每一个进行选择。如果没有这个，所有六个单选按钮只能选择一个。

自定义内容

RadioButton 继承自 ContentControl 类，这意味着它可以获取自定义内容并在其旁边显示。如果你只是指定一段文本，就像我在上面的例子中所做的那样，WPF 会将它放在 TextBlock 控件中并显示它，但这只是让你更轻松的快捷方式。您可以在其中使用任何类型的控件，我们将在下一个示例中看到：

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

在标记方面，这个例子有点沉重，但概念非常简单。对于每个 RadioButton，我们都有一个 WrapPanel，其中包含一个图像和一段文本。由于我们现在使用 TextBlock 控件来控制文本，这也允许我们以任何我们想要的方式设置文本格式。对于此示例，我更改了文本颜色以匹配选择。图像控件（稍后阅读更多内容）用于为每个选项显示图像。

请注意如何单击 RadioButton 上的任意位置，甚至是图像或文本，以将其打开，因为我们已将其指定为 RadioButton 的内容。如果将其作为单独的面板放置在 RadioButton 旁边，则用户必须直接单击 RadioButton 的圆形圆圈才能将其激活，这不太实用。