<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>

/* * Selector(基类) - 选择器控件基类（继承自 ItemsControl, 请参见 /Controls/CollectionControl/ItemsControlDemo/） *     SelectedIndex - 选中项的索引 *     SelectedItem - 选中项的数据对象 *     SelectedValuePath - 选中项的值的字段路径，默认值为空字符串（此时 SelectedValue 的结果与 SelectedItem 相同） *     SelectedValue - 选中项的值（字段路径通过 SelectedValuePath 设置） *     bool GetIsSelectionActive(DependencyObject element) - 用于获取指定的 Selector 控件是否是焦点状态 *         如果是焦点状态，则按下键盘 enter 键会弹出此 Selector 控件的选项列表，按下 esc 键会隐藏此 Selector 控件的选项列表 *     IsSynchronizedWithCurrentItem - 暂时认为没用吧，因为设置为 true 后，在 runtime 会抛出 Windows.UI.Xaml.Markup.XamlParseException 异常 *     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}";        }    }}

<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>

/* * 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}";        }    }}