背水一戰 Windows 10 (33) - 控件（選擇類）: ListBox, RadioButton, CheckBox, ToggleSwitch

[源碼下載]

背水一戰 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
[源碼下載]