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>
效果图如下
**************************************************************************************************************
6、总结和扩展
原生态CheckBox控件看起来并不是那么美观,我们可以通过改写其模板和样式,使其变得更美。使用FlowDirection设置元素内容流向,勾选的√会翻转,看着不是那么好看,想看效果自己编写代码试试。
微软提供的CheckBox 样式和模板:https://docs.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/checkbox-styles-and-templates?view=netframeworkdesktop-4.8
至于本专题后面也会编写有关于自定义CheckBox控件,比如像手机闹钟设置的样式等。
**************************************************************************************************************