控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch
1、ListBox 的示例
Controls/SelectionControl/ListBoxDemo.xaml

<Page
x:Class="Windows10.Controls.SelectionControl.ListBoxDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.SelectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:common="using:Windows10.Common"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10" Orientation="Horizontal"> <!--
ListBox - 列表框控件
--> <!--
通过 xaml 方式为 ListBox 添加数据 注:如果需要 ListBox 的 item 横向排列的话,可以参考 /Controls/CollectionControl/FlipViewDemo.xaml 中用于显示小点点的 ListBox 的实现
-->
<ListBox x:Name="listBox1" Margin="5" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.Items>
<ListBoxItem Content="ListBoxItem1" />
<ListBoxItem Content="ListBoxItem2" />
<ListBoxItem Content="ListBoxItem3" />
<ListBoxItem Content="ListBoxItem4" />
<ListBoxItem Content="ListBoxItem5" />
</ListBox.Items>
</ListBox> <ListBox x:Name="listBox2" Margin="5" ItemsSource="{x:Bind Employees}" Width="200" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="common:Employee">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{x:Bind Name}" />
<TextBlock Text="{x:Bind Age}" Margin="5 0 0 0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Name="lblMsg2" Margin="5" Width="300" TextWrapping="Wrap" /> </StackPanel>
</Grid>
</Page>

Controls/SelectionControl/ListBoxDemo.xaml.cs

/*
* ListBox - 列表框控件(继承自 Selector, 请参见 /Controls/SelectionControl/SelectorDemo.xaml)
* SelectionMode - 选择的模式
* Single - 单选(默认)
* Multiple - 仅通过鼠标多选
* Extended - 通过鼠标和辅助键(ctrl, shift)多选
* ScrollIntoView(object item) - 滚动到指定数据对象
* SelectAll() - 选中所有项
* SelectedItems - 获取当前选中的数据对象集合
*
*
* ListBoxItem - 列表框控件的 item(继承自 SelectorItem, 请参见 /Controls/SelectionControl/SelectorDemo.xaml)
*/ using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows10.Common;
using System.Linq; namespace Windows10.Controls.SelectionControl
{
public sealed partial class ListBoxDemo : Page
{
public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(30); public ListBoxDemo()
{
this.InitializeComponent(); // 通过鼠标结合 ctrl键 shift键 多选
listBox1.SelectionMode = SelectionMode.Extended; // 仅通过鼠标多选
listBox2.SelectionMode = SelectionMode.Multiple;
listBox2.Loaded += ListBox2_Loaded;
} private void ListBox2_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
listBox2.SelectAll();
// 滚动到最后一条数据
listBox2.ScrollIntoView(this.Employees.Last()); lblMsg2.Text = string.Join(", ", listBox2.SelectedItems.Cast<Employee>().Select(p => p.Name));
}
}
}

2、RadioButton 的示例
Controls/SelectionControl/RadioButtonDemo.xaml

<Page
x:Class="Windows10.Controls.SelectionControl.RadioButtonDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.SelectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <!--
RadioButton - 单选框控件
GroupName - 单选框的组名,同一组单选框只能有一个为选中状态 注:RadioButton 继承自 ToggleButton,关于 ToggleButton 的知识点请参见“/Controls/ButtonControl/ToggleButtonDemo.xaml”
--> <RadioButton Name="rad1" GroupName="groupName1" Margin="5" IsChecked="True" Content="groupName1 - RadioButton1" />
<RadioButton Name="rad2" GroupName="groupName1" Margin="5" Content="groupName1 - RadioButton2" /> <RadioButton Name="rad3" GroupName="groupName2" Margin="5" IsChecked="True" Content="groupName2 - RadioButton1" />
<RadioButton Name="rad4" GroupName="groupName2" Margin="5" Content="groupName2 - RadioButton2" /> </StackPanel>
</Grid>
</Page>

Controls/SelectionControl/RadioButtonDemo.xaml.cs

/*
* RadioButton - 单选框控件(继承自 ToggleButton, 请参见 /Controls/ButtonControl/ToggleButtonDemo.xaml)
*/ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.SelectionControl
{
public sealed partial class RadioButtonDemo : Page
{
public RadioButtonDemo()
{
this.InitializeComponent();
}
}
}

3、CheckBox 的示例
Controls/SelectionControl/CheckBoxDemo.xaml

<Page
x:Class="Windows10.Controls.SelectionControl.CheckBoxDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.SelectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent">
<StackPanel Margin="10 0 10 10"> <!--
CheckBox - 复选框控件 注:CheckBox 继承自 ToggleButton,关于 ToggleButton 的知识点请参见“/Controls/ButtonControl/ToggleButtonDemo.xaml”
--> <CheckBox Name="chk1" Margin="5" IsChecked="True" Content="CheckBox1" /> <CheckBox Name="chk2" Margin="5" IsChecked="False" Content="CheckBox2" /> </StackPanel>
</Grid>
</Page>

Controls/SelectionControl/CheckBoxDemo.xaml.cs

/*
* CheckBox - 复选框控件(继承自 ToggleButton, 请参见 /Controls/ButtonControl/ToggleButtonDemo.xaml)
*/ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.SelectionControl
{
public sealed partial class CheckBoxDemo : Page
{
public CheckBoxDemo()
{
this.InitializeComponent();
}
}
}

4、ToggleSwitch 的示例
Controls/SelectionControl/ToggleSwitchDemo.xaml

<Page
x:Class="Windows10.Controls.SelectionControl.ToggleSwitchDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.SelectionControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <TextBlock Name="lblMsg" Margin="5" /> <!--
ToggleSwitch - 状态切换控件
Header - 可以设置一个纯文本,不能命中测试,空 Header 的话不会占用任何空间
HeaderTemplate - 可以将 Header 设置为任何 xaml,且支持命中测试
OffContent, OffContentTemplate - 关闭状态时的显示内容
OnContent, OnContentTemplate - 打开状态时的显示内容
IsOn - 是否是 On 的状态
Toggled - “打开/关闭”状态改变后触发的事件
--> <ToggleSwitch Name="toggleSwitch1" Margin="5" Header="wifi1" OnContent="OnContent" OffContent="OffContent" IsOn="True"
Toggled="toggleSwitch1_Toggled"
Style="{StaticResource MyToggleSwitchStyle}" /> <ToggleSwitch Name="toggleSwitch2" Margin="5" IsOn="True" Style="{StaticResource MyToggleSwitchStyle}">
<ToggleSwitch.HeaderTemplate>
<DataTemplate>
<TextBlock Text="wifi2" Foreground="Yellow" />
</DataTemplate>
</ToggleSwitch.HeaderTemplate>
<ToggleSwitch.OnContentTemplate>
<DataTemplate>
<TextBlock Text="OnContent" Foreground="Orange" />
</DataTemplate>
</ToggleSwitch.OnContentTemplate>
<ToggleSwitch.OffContentTemplate>
<DataTemplate>
<TextBlock Text="OffContent" Foreground="Blue" />
</DataTemplate>
</ToggleSwitch.OffContentTemplate>
</ToggleSwitch> </StackPanel>
</Grid>
</Page>

Controls/SelectionControl/ToggleSwitchDemo.xaml.cs

/*
* ToggleSwitch - 状态切换控件(继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/)
*/ using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls; namespace Windows10.Controls.SelectionControl
{
public sealed partial class ToggleSwitchDemo : Page
{
public ToggleSwitchDemo()
{
this.InitializeComponent();
} private void toggleSwitch1_Toggled(object sender, RoutedEventArgs e)
{
lblMsg.Text = $"toggleSwitch1_Toggled, IsOn:{toggleSwitch1.IsOn}";
}
}
}
控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch的更多相关文章
- 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch
[源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...
- 重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch
原文:重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, Rad ...
- 动态子类化CComboBox以得到子控件EDIT及LISTBOX
动态子类化CComboBox以得到子控件EDIT及LISTBOX Joise.LI写于2004-4-6 ComboBox是比较常用的一个控件,有三种样式:CBS_SIMPLE(简单),CBS_DROP ...
- 给C#的treeview控件的部分节点添加checkbox
一.先初始化treeview this.treeView1.CheckBoxes = true; this.treeView1.ShowLines = false; this.treeView1.Dr ...
- 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page
[源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...
- VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入
vs2010的用法和vc6有很大的不同,特别是在一些函数调用那里,当然.控件导入也是很不一样的 安装好控件后就可以在工程里加入teechart控件了 加入方法有如下几种: 1.添加Teechart控件 ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
- ExtJs内的datefield控件选择日期过后的事件监听select
[摘要]: 选择时间过后我们为什么需要监听事件?一般有这样一种情况,那就是用于比较两个时间大小或者需要判断在哪个时间点上需要做什么样的操作.基于这样的种种情况,我们很有必要琢磨一下datefield控 ...
随机推荐
- javascript高级程序设计 读书笔记1
第二章 在HTML中使用JS 加载JS有三种:行内,head头部和外部链接JS 最好使用外部链接<script src="example.js" ></sc ...
- uwsgi+flask环境中安装matplotlib
uwsgi+flask的python有自身的virtual environment,可以通过如下命令进入 . venv/bin/activate 虽然通过sudo apt-get install py ...
- 定时取数据库的schema,并推送到git服务器
写了个脚本,定时去数据库取schema,并推送到公司的git里. #daily_schema.py #/usr/bin/env python import os import datetime,tim ...
- Docker 总结(转载)
原文链接:http://blog.tankywoo.com/docker/2014/05/08/docker-4-summary.html 查看docker的子命令,直接敲docker或完整的dock ...
- 用Javascript判断访问来源操作系统, 设备, 浏览器类型
var browser = { os : function() { var u = navigator.userAgent; return {// 操作系统 linux: !!u.match(/\(X ...
- AAL template: ROI to brain lobe
Reference: Altmann A, Schröter M S, Spoormaker V I, et al. Validation of non-REM sleep stage decodin ...
- linux不同角色server分区方案
服务器角色 分区建议 优点 RAID方案 单机服务器 如8G内存,300G硬盘 /boot 100-200M swap 16G,内存大小8G*2 / 80G /var 20G(也可 ...
- Linux下源码安装ffmpeg及ffmpeg的简单使用说明
一.编译安装 ffmpeg在安装时依赖的包和版本都很让人头疼,不同编译环境也各不相同.公司之前封装了一个又各种出错. 其实办法很简单,就是到官网一步一步按着做就行了:http://trac.ffmpe ...
- jboss EAP 6.2+ 通过代码控制JNDI数据源
通过Jboss提供的API,可以操控JBoss,效果跟在管理控制台手动操作完全一样,下面是示例代码: 一.pom.xml添加依赖项 <dependency> <groupId> ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...