[源码下载]

背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

作者:webabcd

介绍
背水一战 Windows 10 之 控件(选择类)

  • 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(); 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}";
}
}
}

OK
[源码下载]

背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch的更多相关文章

  1. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  2. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

  5. 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

    [源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...

  6. 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker

    [源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...

  7. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    [源码下载] 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) InkCanv ...

  8. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  9. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

随机推荐

  1. 探索c#之一致性Hash详解

    阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片, ...

  2. 探索c#之storm的TimeCacheMap

    阅读目录: 概述 算法介绍 清理线程 获取.插入.删除 总结 概述 最近在看storm,发现其中的TimeCacheMap算法设计颇为高效,就简单分享介绍下. 思考一下如果需要一个带过期淘汰的缓存容器 ...

  3. clojure基础入门(一)

    最近在看storm的源码,就学习分享下clojure语法. 阅读目录: 概述 变量 运算符 流程控制 总结 概述 clojure是一种运行在JVM上的Lisp方言,属于函数式编程范式,它和java可以 ...

  4. 跟vczh看实例学编译原理——一:Tinymoe的设计哲学

    自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...

  5. [ASP.NET MVC 小牛之路]09 - Controller 和 Action (1)

    我们知道,在 MVC 中每个请求都会提交到 Controller 进行处理.Controller 是和请求密切相关的,它包含了对请求的逻辑处理,能对 Model 进行操作并选择 View 呈现给用户, ...

  6. 利用typescript使backbone强类型智能提示

    模型类一旦多了没有强类型和智能提示是相当痛苦的,所以. 仅仅用ts定义一个模型类: class Person extends Backbone.Model { defaults = { Name:&q ...

  7. 【转】C# using的三种使用方法

    原文地址http://www.cnblogs.com/fashui/archive/2011/09/29/2195061.html,感谢心茶前辈的总结. 1.using指令 using+命名空间,这种 ...

  8. MVC4做网站后台:用户管理 ——用户组补充

    上次做完发现存在点问题. 1.是类型显示的为数字(如下图): 2.是不能根据类型进行查询. 首先做查询.easyui-datagrid可以添加toolbar. 在datagrid的data-optio ...

  9. c语言表白程序代码

    双十一要到了,好激动啊!!! 是时候准备出手了! 花了一天的时间写的表白代码. 表示自己弱弱的.....   看了网上好多都是js写的,感觉碉堡了!js用的不熟,前端不好,java,Python写起来 ...

  10. 【原创】开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...