背水一战 Windows 10 (33)

sunfull

　　[源码下载]




背水一战 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(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}";
}
}
}
　　
OK
[源码下载]