[源码下载]

背水一战 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(); 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(); 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. 【读书笔记】Asp.Net MVC 上传图片到数据库(会的绕行)

    之前上传图片的做法都是上传到服务器上的文件夹中,再将url保存到数据库.其实在MVC中将图片上传到数据库很便捷的事情,而且不用去存url了.而且这种方式支持ie6(ie6不支持jquery自动提交fo ...

  2. 新人入职100天,聊聊自己的经验&教训

    这篇文章讲了什么? 如题,本屌入职100天之后的经验和教训,具体包含: 对开发的一点感悟. 对如何提问的一点见解. 对Google开发流程的吐槽. 如果你 打算去国外工作. 对Google的开发流程感 ...

  3. 让Chrome 接管邮件连接,收发邮件更方便了

    页面中除了传统的超链接外,还可以将邮箱地址写入<a>标签,意思不表自明,当然是用户点击后就会打开相应的邮件客户端向这个连接指向的邮件地址发邮件. <a href="mail ...

  4. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  5. 日志log2

    public class LoggerHelper2 { private static ConcurrentQueue<string> CqMsg = null; private stat ...

  6. C#实现二维码功能,winform 以及 asp.net均可以用

    二维码现在用途很多,怎么用C#编程生成呢? 准备 ThoughtWorks.QRCode.dll 需要 一个类 QRCode,这个类专门来生成二维码的 using System; using Syst ...

  7. 服务器.htaccess 详解以及 .htaccess 参数说明(转载)

    htaccess文件(或者”分布式配置文件”)提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作为用户,所能使用的命令受到限 ...

  8. Security4:Role 和 Permission

    Grants permissions on a securable to a principal.  The general concept is to GRANT <some permissi ...

  9. ClickOnce部署(5):自定义安全权限

    今天我们来探讨一下在ClickOnce部署中如何严格控制应用程序的权限. 演示应用 为了在下文中能更好地演示,我们先要做一个测试项目.也为了显得简单易懂,我使用最常用且最常见的WinForm项目,这是 ...

  10. 前端MVVM框架avalon揭秘 - HTML编译器

    MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,因为,很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明 ...