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

介绍
背水一战 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}";

        }

    }

}