控件（选择类）: ListBox, RadioButton, CheckBox, ToggleSwitch

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

/*
* 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));
}
}
}

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

/*
* 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();
}
}
}

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

/*
* 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();
}
}
}

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

/*
* 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}";
}
}
}