控件(选择类): 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}"; } } }