背水一戰 Windows 10 (32) - 控件（選擇類）: Selector, ComboBox

[源碼下載]

背水一戰 Windows 10 (32) - 控件（選擇類）: Selector, ComboBox

作者：webabcd


介紹
背水一戰 Windows 10 之 控件（選擇類）

• Selector
• ComboBox

示例
1、Selector(基類) 的示例
Controls/SelectionControl/SelectorDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.SelectorDemo"
    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">

            <TextBlock Name="textBlock" Margin="5" />

            <!--
                ComboBox - 下拉框控件，繼承自 Selector，下面介紹 Selector 的相關知識點
            -->
            <ComboBox Name="comboBox1" Margin="5 20 5 5" ItemsSource="{x:Bind Employees}" Width="200" HorizontalAlignment="Left">
                <ComboBox.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>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <TextBlock Name="lblMsg1" Margin="5" />

            <ComboBox Name="comboBox2" Margin="5 20 5 5" ItemsSource="{x:Bind Employees}" Width="200" HorizontalAlignment="Left">
                <ComboBox.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>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <TextBlock Name="lblMsg2" Margin="5" />


            <!--
                ComboBoxItem - 下拉框控件的 item，繼承自 SelectorItem，下面介紹 SelectorItem 的相關知識點
                    IsSelected - 是否被選中
            -->
            <ComboBox x:Name="comboBox3" Margin="5 20 5 5" Width="200" HorizontalAlignment="Left">
                <ComboBoxItem Content="ComboBoxItem1" IsSelected="True" />
                <ComboBoxItem Content="ComboBoxItem2" />
                <ComboBoxItem Content="ComboBoxItem3" />
            </ComboBox>

        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/SelectorDemo.xaml.cs

/*
 * Selector(基類) - 選擇器控件基類（繼承自 ItemsControl, 請參見 /Controls/CollectionControl/ItemsControlDemo/）
 *     SelectedIndex - 選中項的索引
 *     SelectedItem - 選中項的數據對象
 *     SelectedValuePath - 選中項的值的字段路徑，默認值為空字符串（此時 SelectedValue 的結果與 SelectedItem 相同）
 *     SelectedValue - 選中項的值（字段路徑通過 SelectedValuePath 設置）
 *     bool GetIsSelectionActive(DependencyObject element) - 用於獲取指定的 Selector 控件是否是焦點狀態
 *         如果是焦點狀態，則按下鍵盤 enter 鍵會彈出此 Selector 控件的選項列表，按下 esc 鍵會隱藏此 Selector 控件的選項列表
 *     IsSynchronizedWithCurrentItem - 暫時認為沒用吧，因為設置為 true 后，在 runtime 會報錯
 *     SelectionChanged - 選中項發生變化時觸發的事件
 *     
 *     
 * SelectorItem(基類) - Selector 的 Item（繼承自 ContentControl, 請參見 /Controls/BaseControl/ContentControlDemo/）
 *     IsSelected - 是否被選中
 */

using System;
using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class SelectorDemo : Page
    {
        public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(30);

        public SelectorDemo()
        {
            this.InitializeComponent();

            this.Loaded += SelectorDemo_Loaded;

            // 不設置 SelectedValuePath，則 SelectedValue 的結果與 SelectedItem 相同
            comboBox1.SelectedValuePath = "";
            comboBox1.SelectionChanged += ComboBox1_SelectionChanged;

            // 指定 SelectedValue 的字段路徑
            comboBox2.SelectedValuePath = "Name";
            comboBox2.SelectionChanged += ComboBox2_SelectionChanged;
        }

        private void SelectorDemo_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimer dTimer = new DispatcherTimer();
            dTimer.Interval = TimeSpan.Zero;
            dTimer.Tick += DTimer_Tick;
            dTimer.Start();
        }

        private void DTimer_Tick(object sender, object e)
        {
            textBlock.Text = $"comboBox1 focus:{ComboBox.GetIsSelectionActive(comboBox1)}, comboBox2 focus:{ComboBox.GetIsSelectionActive(comboBox2)}";
        }

        private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // e.RemovedItems - 本次事件中，被取消選中的項
            // e.AddedItems - 本次事件中，新被選中的項

            int selectedIndex = comboBox1.SelectedIndex;

            // SelectedItem 是選中的 Employee 對象
            // SelectedValue 是選中的 Employee 對象
            lblMsg1.Text = $"comboBox1 SelectedItem:{comboBox1.SelectedItem}, SelectedValue:{comboBox1.SelectedValue}";
        }

        private void ComboBox2_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            int selectedIndex = comboBox2.SelectedIndex;

            // SelectedItem 是選中的 Employee 對象
            // SelectedValue 是選中的 Employee 對象的 Name 屬性的值
            lblMsg2.Text = $"comboBox2 SelectedItem:{comboBox2.SelectedItem}, SelectedValue:{comboBox2.SelectedValue}";
        }
    }
}

2、ComboBox 的示例
Controls/SelectionControl/ComboBoxDemo.xaml

<Page
    x:Class="Windows10.Controls.SelectionControl.ComboBoxDemo"
    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">

            <!--
                ComboBox - 下拉框控件
                    Header - 可以設置一個純文本，不能命中測試，空 Header 的話不會占用任何空間
                    HeaderTemplate - 可以將 Header 設置為任何 xaml，且支持命中測試
                    PlaceholderText - 占位符水印
            -->

            <!--通過 xaml 方式為 ComboBox 添加數據-->
            <ComboBox x:Name="comboBox1" Margin="5" Width="200" HorizontalAlignment="Left" 
                      Header="comboBox1" PlaceholderText="PlaceholderText">
                <ComboBoxItem Content="ComboBoxItem1" />
                <ComboBoxItem Content="ComboBoxItem2" />
                <ComboBoxItem Content="ComboBoxItem3" />
            </ComboBox>
            <TextBlock Name="lblMsg1" Margin="5" />

            <!--為 ComboBox 綁定數據-->
            <ComboBox x:Name="comboBox2" ItemsSource="{x:Bind Employees}" Margin="5 20 5 5" Width="200" HorizontalAlignment="Left">
                <ComboBox.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="comboBox2" Foreground="Red" />
                    </DataTemplate>
                </ComboBox.HeaderTemplate>
                <ComboBox.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>
                </ComboBox.ItemTemplate>
            </ComboBox>

            <!--通過 xaml 方式為 ComboBox 添加數據（直接用字符串的方式），在 code-behind 中可以通過 SelectedValue 直接獲取選中的字符串-->
            <ComboBox Name="comboBox3" SelectedIndex="0" Width="200" HorizontalAlignment="Left" Margin="5 60 5 5">
                <x:String>Red</x:String>
                <x:String>Green</x:String>
                <x:String>Blue</x:String>
            </ComboBox>
            
        </StackPanel>
    </Grid>
</Page>

Controls/SelectionControl/ComboBoxDemo.xaml.cs

/*
 * ComboBox - 下拉框控件（繼承自 Selector, 請參見 /Controls/SelectionControl/SelectorDemo.xaml）
 *     DropDownOpened - 下拉框打開（彈出選項列表）時觸發的事件
 *     DropDownClosed - 下拉框關閉（隱藏選項列表）時觸發的事件
 *     IsDropDownOpen - 下拉框是否處於打開狀態
 *     MaxDropDownHeight - 下拉框打開后，其選項列表的最大高度
 *     SelectionBoxItem - 下拉框關閉后顯示的數據對象（即下拉框的選項列表隱藏后，在下拉框中顯示的數據對象
 *     
 *     
 * ComboBoxItem - 下拉框控件的 item（繼承自 SelectorItem, 請參見 /Controls/SelectionControl/SelectorDemo.xaml）
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.SelectionControl
{
    public sealed partial class ComboBoxDemo : Page
    {
        public ObservableCollection<Employee> Employees { get; set; } = TestData.GetEmployees(30);

        public ComboBoxDemo()
        {
            this.InitializeComponent();

            comboBox1.DropDownOpened += ComboBox1_DropDownOpened;
            comboBox1.DropDownClosed += ComboBox1_DropDownClosed;

            comboBox2.MaxDropDownHeight = 40;
            comboBox2.Loaded += (x, y) => 
            {
                // 注：如果要設置 IsDropDownOpen 屬性的話，需要等到 ComboBox 加載后在設置
                comboBox2.IsDropDownOpen = true;
            };
        }
        
        private void ComboBox1_DropDownOpened(object sender, object e)
        {
            lblMsg1.Text = "comboBox1 DropDownOpened";
        }

        private void ComboBox1_DropDownClosed(object sender, object e)
        {
            // 通過 SelectionBoxItem 可獲取 ComboBox 的選項列表隱藏后，在 ComboBox 中顯示的數據對象
            lblMsg1.Text = $"comboBox1 DropDownClosed, SelectionBoxItem:{comboBox1.SelectionBoxItem}";
        }
    }
}

OK
[源碼下載]