[源码下载]

背水一战 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 会抛出 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 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 ComboBoxDemo()
        {
            this.InitializeComponent();

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

            comboBox2.MaxDropDownHeight = ;
            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
[源码下载]

背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox的更多相关文章

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

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  2. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

  5. 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox

    [源码下载] 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) T ...

  6. 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

    [源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...

  7. 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker

    [源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...

  8. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    [源码下载] 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) InkCanv ...

  9. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

随机推荐

  1. win7中 SQL server 2005无法连接到服务器,错误码:18456

    win7中 SQL server 2005无法连接到服务器,错误码:18456.. 数据库刚装完.我用Windows登陆  结果登陆不上去.. 选中SQL Server Management Stud ...

  2. iOS开发——高级篇——iOS 中的 NSTimer

    以前的老代码在使用 NSTimer 时出现了内存泄露 NSTimer fire 我们先用 NSTimer 来做个简单的计时器,每隔5秒钟在控制台输出 Fire .比较想当然的做法是这样的: 1 2 3 ...

  3. VB中 ByRef与ByVal区别

    函数调用的参数传递有"值传递"和"引用传递"两种传递方式.如果采用"值传递",在函数内部改变了参数的值,主调程序的对应变量的值不会改变:如果 ...

  4. 横竖屏切换时Activity的生命周期

    设置横竖屏切换时Activity生命周期的属性设置,在清单文件中的Activity节点中设置.根据具体需求设置: 1.不设置Activity的android:configChanges时,切屏会重新调 ...

  5. 用Delphi获取当前系统时间

    在开发应用程序时往往需要获取当前系统时间.尽管Y2K似乎已经平安过去,但在我们新开发的应用程序中还是要谨慎处理“时间”问题. 在<融会贯通--Delphi4.0实战技巧>(以下简称“该书” ...

  6. Spark、Shark集群安装部署及遇到的问题解决

    1.部署环境 OS:Red Hat Enterprise Linux Server release 6.4 (Santiago) Hadoop:Hadoop 2.4.1 Hive:0.11.0 JDK ...

  7. Saltstack 服务器基本安装

    Salt介绍 Salt是一个基础平台管理工具 Salt是一个配置管理系统,能够维护预定义状态的远程节点 Salt是一个分布式远程执行系统,用来在远程节点上执行命令和查询数据 Salt核心功能 使命令发 ...

  8. 利用socket模块检查端口存活并邮件警报

    可以用来监控一些端口. import socket def check_server(addr, port): s = socket.socket() try: s.connect((addr, po ...

  9. 弱校ACM奋斗史

    看到这篇文章, 已是大三了, 我的ACM之路也即将走向终点, 感慨自己还是不够努力, 给自己的大学留下诸多遗憾. 和他们相比, 我差的就是太远了, 值得高兴的是我们学校有一个好老师-----赵靖老师, ...

  10. 利用神经网络算法的C#手写数字识别

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 下载Demo - 2.77 MB (原始地址):handwritten_character_recognition.zip 下载源码 - 70. ...