ComboBox控件

ComboBox控件包含一个不可编辑的文本框和一个下拉列表,这个下拉列表是由多个ComboBoxItem子元素组成的。使用ComboBox控件可以节省界面空间,因为ComboBox控件仅显示当前选中的选项,可以通过单击文本框展开下拉列表查看其他选项。如果希望所有选项始终可见,可以使用ListBox控件(ListBox控件下文会有介绍)。

在XAML文件中,ComboBox控件的用法如下所示:

<ComboBox .../>

-或-

<ComboBox ...>

<!--添加子元素-->

</ComboBox>

下面介绍一下ComboBox控件的常用属性:

  • Name属性,获取或设置ComboBox控件的名称。
  • Width属性,获取或设置ComboBox控件文本框的宽度。
  • Height属性,获取或设置ComboBox控件文本框的高度。
  • SelectedValue属性,获取或设置在ComboBox控件下拉列表中选择的选项值。
  • SelectedValuePath属性,获取或设置路径用于获得SelectedValue属性值。

介绍完常用属性后,接着来看一下ComboBox控件的常用事件:

  • SelectionChanged事件,当前列表中的选择项发生改变时触发。
  • Tapped事件,当单击ComboBox控件的文本框时触发。

接下来使用ComboBox控件设计一个在下拉列表中选择项目并显示选中项目内容的应用示例。

新建一个Windows应用商店的空白应用程序项目,并命名为ComboBoxDemo。在MainPage.xaml文件的Grid元素中添加如下代码。

<TextBlock HorizontalAlignment="Left" FontSize="20" Height="24" Margin="478,443,0,0" TextWrapping="Wrap" Text="请选择一项" VerticalAlignment="Top" Width="100"/>

<TextBlock HorizontalAlignment="Left" Margin="478,538,0,0" TextWrapping="Wrap" Text="显示选择:" FontSize="20" VerticalAlignment="Top" Width="100" Height="21"/>

<TextBlock HorizontalAlignment="Left" Name="ShowSelected" FontSize="20" Height="30" Margin="607,538,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="155"/>

<ComboBox Name="ProjectComboBox" SelectedValuePath="Content" SelectionChanged="ProjectComboBox_SelectionChanged" Height="25" Width="100" Margin="633,443,633,301">

<ComboBoxItem Content="项目1"/>

<ComboBoxItem Content="项目2"/>

<ComboBoxItem Content="项目3"/>

</ComboBox>

上面的代码添加了三个TextBlock文本块,前两个文本块用于显示"请选择一项"和"显示选择"文本信息,第三个文本块用于显示选择的项目内容。然后添加了一个ComboBox控件,设置三个ComboBoxItem列表项,内容分别为"项目1"、"项目2"和"项目3"。

打开MainPage.xaml.cs文件,为ComboBox控件的SelectionChanged事件添加事件处理方法ProjectComboBox_SelectionChanged,当下拉列表中的选项发生改变时会触发SelectionChanged事件,并在ShowSelected文本块中显示选中项目的文本内容,代码如下所示:

private void ProjectComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

//显示选择的项目

ShowSelected.Text = "你选择了" + ProjectComboBox.SelectedValue.ToString();

}

在上面的代码中,使用ComboBox控件的SelectedValue属性获取选中列表项的内容并通过ToString方法转换成字符串类型,赋值给文本块ShowSelected的Text属性,以便在前台显示选择项目的文本信息。

运行程序,在界面中显示了一个下拉列表框和两个文本信息,这两个文本信息分别为"请选择一项"和"显示选择:",效果如图4-7所示。单击文本框展开下拉列表,在下拉列表中选择"项目2"选项后会在界面中显示所选内容,效果如图4-8所示。


图4-7 ComboBox控件的使用 图4-8 在列表项中选择选项后效果图

最新文章

  1. 如何一步一步用DDD设计一个电商网站(二)—— 项目架构
  2. 从scheduler is shutted down看程序员的英文水平
  3. 序列化对象为xml字符串
  4. k近邻算法的Java实现
  5. C#压缩文件 不压缩路径
  6. Java字符串的那些事儿。。。。
  7. [ActionScript 3.0] Away3D 灯光的使用
  8. secure CRT记住密码不可用
  9. JAVA类型信息——反射机制
  10. JsRender系列demo-10
  11. HTML Canvas 鼠标画图
  12. mac上搭建svn服务器
  13. 获取Camera 支持视频的尺寸
  14. 如何部署Java_web项目到云服务器上
  15. MySQL Join 的实现原理
  16. document_index_data.go
  17. APP界面设计与页面布局的23条基本原则
  18. C盘突然报警,空间不足,显示成红色了
  19. 带着新人学springboot的应用13(springboot+热部署)
  20. (原+转)使用anaconda遇到的问题

热门文章

  1. [osg][osgEarth][原]基于OE自定义自由飞行漫游器(初级版)
  2. java正则常用记录
  3. 力扣(LeetCode)202. 快乐数
  4. Java代理机制之初见(理解及实现)
  5. MATLAB程序控制结构
  6. Es6构造函数的变身,通常我们称为类
  7. LeetCode--349--两个数组的交集
  8. 20170907wdVBA_GetCellsContentToExcel
  9. vue.js面试题整理
  10. Python操作excel的几种方式--xlrd、xlwt、openpyxl