单选框RadioButton的基本使用:

<StackPanel Margin="10">
<Label FontWeight="Bold">Are you ready?</Label>
<RadioButton>Yes</RadioButton>
<RadioButton>No</RadioButton>
<RadioButton IsChecked="True">Maybe</RadioButton>
</StackPanel>

如图:

其中Radio Button中的IsChecked属性为True时,时设置默认选中,用户点击另外两个中的一个就可以改变这个属性。这个属性也用在后台代码中,来检查一个单选框是否被选中。

单选框组的用法:

运行上面的例子,你会发现只能有一个单选框被选中。那么,如果你同时有好几组单选框,每组都有其自己的选项,如何来选呢?GroupName属性正是用在这种情况下,蕴蓄你哪几个单选框是一起的。

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

如图:

使用GroupName属性来设置单选框类别,分成了两组。如果没有这个属性,那么这六个单选框只能选中一个。

用户内容:

和复选框一样,单选框也是继承于ContentControl基类,能够放置用户内容并在旁边显示。如果你只是定义了一串文字,那么WPF会自动生成一个文本块来显示它们。除了文字,你还可以放置各种控件到里面,如下面的例子:

Xaml:

<StackPanel Margin="10">
<Label FontWeight="Bold">Are you ready?</Label>
<RadioButton>
<WrapPanel>
<Image Width="16" Height="16" Margin="0,0,5,0" Source="Resources/timg (8).jpg" />
<TextBlock Text="Yes" Foreground="Green" />
</WrapPanel>
</RadioButton>
<RadioButton Margin="0,5">
<WrapPanel>
<Image Width="16" Height="16" Margin="0,0,5,0" Source="Resources/timg (8).jpg" />
<TextBlock Text="No" Foreground="Red" />
</WrapPanel>
</RadioButton>
<RadioButton IsChecked="True">
<WrapPanel>
<Image Width="16" Height="16" Margin="0,0,5,0" Source="Resources/timg (8).jpg" />
<TextBlock Text="Maybe" Foreground="Gray" />
</WrapPanel>
</RadioButton>
</StackPanel>

如图:

标记很好用,上面的例子看起来很繁琐,但是要表达的概念很简单。每个单选框我们都使用一个WrapPanel来放置一张图片和一段文字。这里我们用了文本块控件来控制文字的显示,还可以用其他任何形式来展示。在这里我改变了文字的颜色来匹配选择。图片通过图片控件来显示。

注意你只要点击单选框的任何地方,不管是图片还是文字,都可以选中它。这是因为图片和文字都是单选框的内容。如果你在单选框旁边放置一个单独的容器,用户就必须去点击单选框中的小圆圈才能生效,这是非常不切实际。

WPF中单选框RadioButton的更多相关文章

  1. Android中单选框RadioButton的基本用法

    总结一下设置图标的三种方式: (1)button属性:主要用于图标大小要求不高,间隔要求也不高的场合. (2)background属性:主要用于能够以较大空间显示图标的场合. (3)drawableL ...

  2. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  3. 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

    原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...

  4. 用css实现html中单选框样式改变

     我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...

  5. form中 单选框 input[type="radio"] 分组

    在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...

  6. vue中单选框与多选框的实现与美化

    我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...

  7. WPF中多个RadioButton绑定到一个属性

    如图样: 在View中: <RadioButton IsChecked="{Binding Option, Converter={cvt:EnumToBooleanConverter} ...

  8. vue中单选框,利用不存在的值标示选中状态

    1.效果预览 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 单选框 RadioButton

    activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

随机推荐

  1. 利用ant 和 Junit 生成测试报告

    我们除了使用java来直接运行junit之外,我们还可以使用junit提供的junit task与ant结合来运行. 涉及的几个主要的ant task如下: <junit>,定义一个jun ...

  2. E20180506-hm

    更新: 2019/02/19 原来忘记分类,把此博文归入单词类 criterion n. 规范; (批评.判断等的) 标准,准则; criteria  n. (批评.判断等的) 标准,准则( crit ...

  3. 51nod - 1420 - 数袋鼠好有趣 - 贪心 - 二分

    https://www.51nod.com/Challenge/Problem.html#!#problemId=1420 一开始乱搞了一发,每个袋鼠二分找最小的能放它的,然后二分的范围从下一个开始保 ...

  4. 《C#入门经典》学习笔记(集合、比较和转换)

    http://xiang-ai-2002.blog.163.com/blog/static/8477933201041824429161/ 集合 C#中的数组是作为System.Array类的实例来执 ...

  5. Unity Prefabs

    通过上一期的学习,我们知道为了如何向场景中添加一个物体.问题来了,如果需要对这个立方体进行修改应该怎么做呢?那我们肯定就得修改这段代码,能不能将立方体本身从我们的开发中单独提出来呢?这就涉及到我们今天 ...

  6. hoj2665 Factory of XiaoE

    Factory of XiaoE My Tags   (Edit)   Source : zhouguyue & lilu0355 & xiaoE   Time limit : 1 s ...

  7. [Xcode 实际操作]一、博主领进门-(13)在控制台的几种打印输出语句和po命令

    目录:[Swift]Xcode实际操作 本文将演几种在控制台输出日志的方式. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class ...

  8. 使用Decimal.js解决前端计算金钱失真问题

    1.加载 $ npm install --save decimal.js 2.页面导入 import {Decimal} from 'decimal.js' 3.使用 // 加法 new Decima ...

  9. unicode码表和标准下载 unicode官网

  10. nutzboot dubbo zookeeper简单使用

    提供方和消费方properties 配置基本差不多 nutz.application.name这个值不一样 提供方配置自动端口就行server.port=0 消费方一般需要对外提供web服务配置ip和 ...