WPF中单选框RadioButton

单选框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来放置一张图片和一段文字。这里我们用了文本块控件来控制文字的显示,还可以用其他任何形式来展示。在这里我改变了文字的颜色来匹配选择。图片通过图片控件来显示。

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

原文地址:https://www.cnblogs.com/Leozi/p/10798576.html

时间: 2024-08-07 23:46:30

WPF中单选框RadioButton的相关文章

Android中单选框RadioButton的基本用法

总结一下设置图标的三种方式: (1)button属性:主要用于图标大小要求不高,间隔要求也不高的场合. (2)background属性:主要用于能够以较大空间显示图标的场合. (3)drawableLeft属性:主要用于对图标与文字之间的间隔有要求的场合. 注意使用 background 或者 drawableLeft时 要设置 android:button="@null" 监听: radioGroup.setOnCheckedChangeListener(new RadioGroup

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

原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1,准备工作:VS2015 (15对WPF的支持变得异常的好,调试模式下允许自动更改属性.),随VS发布的Blend,几个基础类: 1 public class RelayCommand : ICommand 2 { 3 #region Fields 4 5 readonly Action<object

html与用户交互中单选框与复选框&amp;下拉列表中的情况

使用单选框.复选框,让用户选择 在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 typ

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

在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title> </head> <meta charset="utf-8"> <body> <form action="" method=""> <!--通过name将他们分组--> <inpu

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

如图样: 在View中: <RadioButton IsChecked="{Binding Option, Converter={cvt:EnumToBooleanConverter},ConverterParameter={x:Static enum:RadionButtonOptions.One}}" Content="One" DockPanel.Dock="Top"/> <RadioButton IsChecked=&q

单选框 RadioButton

activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent

wpf中文本框只能输入整数

1 private void txtBarCodeNum_KeyUp(object sender, KeyEventArgs e) 2 { 3 TxtInt(sender as TextBox); 4 } 5 6 private void txtBarCodeNum_TextChanged(object sender, TextChangedEventArgs e) 7 { 8 TxtInt(sender as TextBox); 9 } 10 11 private void TxtInt(Te

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

android 单选框和复选框

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_heig