WPF教程(十八)复选框

复选框用于勾选或者勾掉某一个选项,在后台代码中表现为一个布尔型值。还是直接来看代码吧,更形象:

<span style="font-size:14px;"><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></span>
A simple CheckBox control

复选框使用非常简单,在第二个复选框中,我使用了IsChecked属性设置默认为勾选,再没别的属性好用的了。你还可以使用IsChecked属性在后台代码中来判断某个复选框是否是勾选状态。

用户内容

复选框继承于ContentControl基类,因此可以设置用户内容到旁边。像上面的例子中,编写一些文字,WPF就会把这些文字放到一个文本块中显示。还可以把任何类型的控件放到里面,如下:

<span style="font-size:14px;"><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></span>
A CheckBox control with custom content

从上面的例子可以看出,你可以在复选框的内容里做很多事情。在三个复选框中,我分别对文字做了不一样的处理,在中间这个更是插入了一张图片。通过内容中的控件,我们可以实现复选框的各种形式,更酷的是,不管你点击了哪一部分控件,都会触发复选框的状态改变。

IsThreeState属性

复选框通常绑定了一个布尔型值,只能有两种状态:true或者false。然而,一个布尔型数据可能为空,就出现了第三种状态(null),复选框也支持这种情况。通过设置IsThreeState属性为true,复选框就拥有了第三种状态,称为中间状态。

这种状态通常用于一个复选框来打开所以子复选框,或者显示它们的集体状态。下面的例子创建了一列可以开关的特性,在它们顶部放了一个Enable all复选框。

<span style="font-size:14px;"><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></span>

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

        }
}

A three state CheckBox control in the inderminate state

A three state CheckBox control in the checked state

A three state CheckBox control in the unchecked state

从两个角度来分析上面的例子:首先,来看Enable all复选框,选中或者不选中它,会导致所有子复选框全部选中或者不选中。然后,来看子复选框,看看它们是如何影响Enable all复选框的,只有当所有的子复选框被选中或者不选中的时候,它才发生改变,除此之外,它处于中间状态。

运行上面的代码可以完整的看到这个过程,当然了,还要把CheckedUnchecked事件订阅到后台代码中。实际应用中,都会用一个值来绑定,上面的例子显示了IsThreeState属性最基本的用法。

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值