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

时间:2022-11-07 15:09:28

[源码下载]

背水一战 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
[源码下载]