WPF 控件专题 CheckBox 控件详解

最新推荐文章于 2024-04-01 00:08:38 发布

^@^lemon tea^@^

最新推荐文章于 2024-04-01 00:08:38 发布

阅读量9.2k

点赞数 2

分类专栏： # WPF 控件专题文章标签： WPF CheckBox控件 WPF CheckBox CheckBox详解

本文链接：https://blog.csdn.net/BYH371256/article/details/125337721

版权

WPF 控件专题专栏收录该内容

53 篇文章 89 订阅

订阅专栏

1、CheckBox 介绍

CheckBox：复选框控件，是一种非常简单易用的组件，有启用/禁用两种状态，分别由CheckBox 控件的 Checked 和 Unchecked 事件来实现。

CheckBox 控件继承 ToggleButton 并可以有三种状态：选中 (选定的) 、未选中 (清除) 和不确定。CheckBox 是一个 ContentControl，这意味着它可以包含任何类型 (的单个对象，例如字符串、图像或面板) 。

IsChecked 属性来默认设置选中状态，默认为不选中（False）。
**************************************************************************************************************

2、CheckBox 常用属性介绍

Background：背景。 BorderBrush：边框颜色。 BorderThickness：边框宽度。

Content：获取或设置 ContentControl 的内容。

FontFamily：获取或设置控件的字体系列。

FontSize：获取或设置字号。

FontStretch：获取或设置字体在屏幕上紧缩或加宽的程度。

FontStyle：获取或设置字体样式。

FontWeight：获取或设置指定字体的粗细。

Foreground：前景色。 Width/Height：宽度/高度。 IsEnabled：使能，是否可用。

IsChecked：获取或设置是否选中 ToggleButton，最重要的属性。

IsMouseOver：鼠标是否移入控件元素区域内。 IsPressed：是否按下。

Margin：元素外边距。 Name：元素标识名称。 Opacity：透明度。

Template：控件模板。 Visibility：可见性设置。

FlowDirection：获取或设置文本和其他用户界面 (UI) 元素在控制其布局的任何父元素内流动的方向。

   RenderTransform：获取或设置影响此元素的呈现位置的转换信息。（旋转角度等设置）

   RenderTransformOrigin：获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。

HorizontalAlignment/VerticalAlignment：获取或设置在父元素（如面板或项控件）中组合此元素时所应用的水平对齐特征/垂直对齐特征。

HorizontalContentAlignment/VerticalContentAlignment：获取或设置控件内容的水平对齐方式/垂直对齐方式。

**************************************************************************************************************

3、具体示例代码

<StackPanel Orientation="Vertical" Margin="10">
	<CheckBox Width="120" Height="35" Content="CheckBox 测试" Foreground="#dddddd" HorizontalAlignment="Center" VerticalAlignment="Center"
			  HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" IsChecked="True"/>
	<!--使用Border设置背景色，可看出CheckBox的位置-->
	<Border Background="Teal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10">
		<CheckBox Width="120" Height="35" Content="CheckBox 测试1" Foreground="#dddddd" HorizontalAlignment="Center" VerticalAlignment="Center"
			  HorizontalContentAlignment="Right" VerticalContentAlignment="Center" IsChecked="True"/>
	</Border>
	<!--设置元素Content水平居左和垂直顶部对齐-->
	<Border Background="Teal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 20 0 10">
		<CheckBox Width="120" Height="35" Content="CheckBox 测试2" Foreground="#dddddd" HorizontalAlignment="Center" VerticalAlignment="Center"
			  HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
	</Border>
	<!--使用TextBlock显示CheckBox的状态-->
	<TextBlock FontSize="14" Foreground="#dddddd" VerticalAlignment="Center">
		<Run>状态为：</Run>
		<Run x:Name="status"></Run>
	</TextBlock>
</StackPanel>

后台代码

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
	CheckBox cbtemp = (CheckBox)sender;
	if(cbtemp != null)
	{
		this.status.Text = cbtemp.Content + "  " + cbtemp.IsChecked.ToString();
	}
}

private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
	CheckBox cbtemp = (CheckBox)sender;
	if (cbtemp != null)
	{
		this.status.Text = cbtemp.Content + "  " + cbtemp.IsChecked.ToString();
	}
}

**************************************************************************************************************

4、代码示例效果图

左图为CheckBox 测试2这个按钮选中触发Checked事件的效果图，有图为触发UnChecked事件效果图

在上面的效果图我们可以看出，通过HorizontalContentAlignment和VerticalContentAlignment可以控制Content的显示，居左还是居右，居上还是居底部等；

**************************************************************************************************************

5、CheckBox简单改写

代码示例如下

<Window.Resources>
	<Style TargetType="CheckBox">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="CheckBox">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="20"/>
						</Grid.ColumnDefinitions>
						<TextBlock Grid.Column="0" Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}" 
							   Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
						<Grid Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
							<Image x:Name="imageNoChecked" Source="/Images/unchecked.png"
								   Height="14" Width="14"  Visibility="Visible" />
							<Image x:Name="imageChecked" Source="/Images/checked.png"
								   Height="14" Width="14"  Visibility="Collapsed" />
						</Grid>
					</Grid>
					<ControlTemplate.Triggers >
						<Trigger Property="IsChecked" Value="True">
							<Setter TargetName="imageChecked" Property="Visibility" Value="Visible" />
							<Setter TargetName="imageNoChecked" Property="Visibility" Value="Collapsed" />
						</Trigger>
						<Trigger Property="IsChecked" Value="False">
							<Setter TargetName="imageChecked" Property="Visibility" Value="Collapsed" />
							<Setter TargetName="imageNoChecked" Property="Visibility" Value="Visible" />
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>
<StackPanel Orientation="Vertical" Margin="10">
	<CheckBox Width="120" Height="35" Content="CheckBox 测试" Foreground="#dddddd" HorizontalAlignment="Center" VerticalAlignment="Center"
			  HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" IsChecked="False"/>

	<CheckBox Width="120" Height="35" Content="CheckBox 测试1" Foreground="#dddddd" HorizontalAlignment="Center" VerticalAlignment="Center"
			  HorizontalContentAlignment="Right" VerticalContentAlignment="Center" IsChecked="True"/>
</StackPanel>

效果图如下