[源码下载]

背水一战 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. 蓝牙4.0(BLE)开发

    转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/26740237 作者:小马 IOS学习也一段时间了,该上点干货了.前段时间研究了一下 ...

  2. MAC安装M2Crypto报command &#39;cc&#39; failed with exit status 1

    出错分析主要是因为由于OSX升级之后 /usr/include 没有了,使用命令修改swig寻址路径: sudo env LDFLAGS="-L$(brew --prefix openssl ...

  3. android sdk无法更新或者更新缓慢的解决方案

    win7安装android sdk老出 Fetching https://dl-ssl.google.com/android/repository/addon .这是android sdk不能连接到谷 ...

  4. XMLHttpRequest 对象

    XMLHttpRequest 对象 XML XSLTXML 解析器XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReque ...

  5. PI-利用SoapUI 测试web service的方法介绍

    在运用webservice调用数据的过程中,非常关键的一个步骤就是获取到webservice的地址,并测试webservice的连通情 况,webservice的连通测试主要是两个方面:1,查看web ...

  6. HADOOP2.2.0安装配置指南

    一.     集群环境搭建 这里我们搭建一个由三台机器组成的集群: Ip地址 用户名/密码 主机名 集群中角色 操作系统版本 192.168.0.1 hadoop/hadoop Hadoop-mast ...

  7. excel取值

    1.获取excel表格中的数据的表达式“&(A-Z)” 2.excel表格取值时,如果遇到表达式中要包含引号的,两个引号表示一个引号,因为取值的时候已经用了一对引号了. ="||&q ...

  8. Hibernate自定义数据库查询(排序、输出条数)

    Hibernate数据库操作类(eg:TexDAO.java) /* * queryString HQL语句,first开始条数, max输出条数 ,norder排序 * 例: List lis = ...

  9. PHP中获取某个网页或文件内容的方法

    1. 通过file_get_contents()函数$contents = file_get_contents('http://demo.com/index.php');echo $contents; ...

  10. 微信小程序开发(6) SSL证书及HTTPS服务器

    1. 域名 在万网购买,略 2. 云服务器 阿里云购买,略 3. 安装lnmp 使用lnmp.org程序,略 4. 申请证书 阿里云-管理控制台-安全(云盾)-证书服务-购买证书证书类型: 免费型DV ...