本篇想介绍相对小众但颇具使用价值的控件SplitButton,提到SplitButton难免会拿来与ComboBox进行比较,同时在WinUI 3的控件库中,还有一个默默无闻的DropDownButton。更加让人傻傻分不清楚,今天我们就来进行简单的区别和讨论。
首先我们看最为常见的ComboBox,核心的用途在于两点。一是节约屏幕空间,二是选中下拉列表的一项内容,其值供后续操作使用。另外ComboBox还可以设置为文本框可编辑,通过TextSubmitted事件获取输入值。

<ComboBox SelectionChanged="ColorComboBox_SelectionChanged" Header="Colors" PlaceholderText="Pick a color" Width="200">
<x:String>Blue</x:String>
<x:String>Green</x:String>
<x:String>Red</x:String>
<x:String>Yellow</x:String>
</ComboBox>

ComboBox除了以字符串形式显示Item,同样也能够编辑ItemTemplate来显示负责的列表内容。它与SplitButton在显示上有一点核心区别,下拉列表被选中Item的样式,会在ComboBox收起下拉框后,原样显示在下拉箭头的左边。而SplitButton,下拉显示的内容,和箭头左边的显示内容并无直接联系。
DropDownButton是个奇葩控件,我个人觉得它存在的意义完全是为了兼容性。该控件从Button继承,但这货被点击时一定会显示它所包含的Flyout,导致Button最核心的Click事件和Command对该控件来说,并没有什么意义。

<DropDownButton Content="Email">
<DropDownButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Send"/>
<MenuFlyoutItem Text="Reply"/>
<MenuFlyoutItem Text="Reply All"/>
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>

做了长长的铺垫以后,终于来到了SplitButton本身。该控件区别与ComboBox主要有两点,一是上文提到的,下拉显示样式,和收起后的显示样式可以不相关。二是SplitButton下拉选中后的值,可以作为Click和Command的参数使用。ComboBox则不存在Click和Command,在被点击时,仅会展开下拉框供再次选择。
SplitButton的使用较为简单,只需定义Content作为选中状态的样式,以及通过Flyout提供下拉状态样式即可。在下面的XAML中,选中时SplitButton将显示为Width=100,Height=32的Rectangle,并填充颜色。而在点击箭头显示的下拉框中,会显示ColorPicker控件。

        <SplitButton>
<Rectangle Width="100" Height="32">
<Rectangle.Fill>
<SolidColorBrush Color="{x:Bind colorPicker.Color,Mode=OneWay}"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<SplitButton.Flyout>
<Flyout>
<ColorPicker x:Name="colorPicker" ></ColorPicker>
</Flyout>
</SplitButton.Flyout>
</SplitButton>

第二个例子参考了《WinUI 3学习笔记(2)—— 用ListView来展示集合》,将在SplitButton中显示分组列表。在ComboBox中自定义ItemTemplate是常见操作,但是相对下拉内容做分组操作就力不从心了。而在SplitButton中,却因Content和Flyout并无直接联系而变的易于实现。我们通过CollectionViewSource对象来定义供XAML使用的分组视图,放置在<SplitButton.Resources>节点中。然后在Flyout中对ListView绑定该视图,并定义HeaderTemplate。

        <SplitButton Grid.Column="1">
<SplitButton.Resources>
<CollectionViewSource x:Name="personListCVS" IsSourceGrouped="True" Source="{x:Bind PersonGroup}"/>
</SplitButton.Resources>
<TextBlock Width="100" Text="{Binding SelectedItem.Name,ElementName=listViewPersons}"></TextBlock>
<SplitButton.Flyout>
<Flyout>
<ListView x:Name="listViewPersons" ItemsSource="{x:Bind personListCVS.View}" Width="120">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</SplitButton.Flyout>
</SplitButton>

本篇我们简单比较了ComboBox,DropDownButton和SplitButton在Windows Desktop App中的应用。个人认为WinUI 3是某软的一次反思和妥协。向非UWP的Desktop技术,如WPF和WinForms开放了最新的UI库和API支持(当然我劝你不要碰WinForms,过于久远且于使用XAML的WPF和UWP不是一个思路)。如果明年的WinUI 3的UnPackage App又回到了exe那种运行模式。那这些年的UWP真的搞了个寂寞。唯一的用途就是在XBOX上用爱奇艺放动画片给小朋友看?

Sample Code:
WinUI3Samples/WinUI3Samples/SplitButtonSample at main · manupstairs/WinUI3Samples (github.com)

话说现在做Windows Desktop App 开发的年轻人真的越来越少了,根本招不到人啊。岗位还是有的,竞争也不激烈。未来.NET 6的MAUI也值得期待一下,还不快来入坑?

以下链接,是MS Learn上Windows开发的入门课程,单个课程三十分钟到60分钟不等,想要补充基础知识的同学点这里:

开始使用 Visual Studio 开发 Windows 10 应用

开发 Windows 10 应用程序

编写首个 Windows 10 应用

创建 Windows 10 应用的用户界面 (UI)

增强 Windows 10 应用的用户界面

在 Windows 10 应用中实现数据绑定

WinUI 3学习笔记(3)—— ComboBox & DropDownButton & SplitButton的更多相关文章

  1. WinUI 3学习笔记(2)—— 用ListView来展示集合

    在WPF的时代,我们多是使用ListBox和ListView来展示,纵向滚动条显示的集合数据.这两个控件的默认样式,以及对触控的支持,已完全落后于时代.他们两个分别长这样,和Win10及Win11的风 ...

  2. ExtJs学习笔记之ComboBox组件

    ComboBox组件 (1)ComboBox控件支持自动完成.远程加载.和许多其他特性. (2)ComboBox就像是传统的HTML文本 <input> 域和 <select> ...

  3. WPF学习笔记:ComboBox的数据绑定

    UI <UserControl x:Class="UnitViews.UserMeUV" xmlns="http://schemas.microsoft.com/w ...

  4. 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  5. Ext.Net学习笔记10:Ext.Net ComboBox用法

    ComboBox是最常用的控件之一,它与HTML中的Select控件很像,但可以进行多选.自定义显示格式.分页等. ComboBox用法 <ext:ComboBox runat="se ...

  6. MVVM学习笔记

    MVVM学习笔记 1.MVVM的简介 MVVM模式是Model-View-ViewModel模式的简称,也就是由模型(Model).视图(View).视图模型(ViewModel),其目的是为了实现将 ...

  7. AU3学习笔记

    目录 1. AU3是什么?能做什么? 2. 乱学AU3中的命令(语言相关)? 3. 通过简单示例学习AU3? 4. 正则表达式的学习(对大小写敏感) 5.对于GUI的相关学习 1.        AU ...

  8. VSTO 学习笔记(六)在 Excel 2010中使用RDLC报表

    原文:VSTO 学习笔记(六)在 Excel 2010中使用RDLC报表 Excel具有强大的图表显示.分析功能,这点毋庸置疑,但是如果将常规MIS系统中的数据以报表的形式在Excel中显示,却并不那 ...

  9. 【Windows Universal Platform】只是学习笔记 - 开始

    我是初学,之前没有windows/windows phone的应用开发经验:开博的目的只是记录和督促自己学习. 心血来潮也好,或是个人喜好的原因,想学着自己开发APP了(PS:以前做过web 开发) ...

  10. Java设计模式学习笔记(四) 抽象工厂模式

    前言 本篇是设计模式学习笔记的其中一篇文章,如对其他模式有兴趣,可从该地址查找设计模式学习笔记汇总地址 1. 抽象工厂模式概述 工厂方法模式通过引入工厂等级结构,解决了简单工厂模式中工厂类职责太重的问 ...

随机推荐

  1. PAT 1028. 人口普查(20)

    某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的--假设已知镇上没有超过200岁的老人,而今天是2014年9月 ...

  2. Java集合系列:-----------04fail-fast总结(通过ArrayList来说明fail-fast的原理以及解决办法)

    前面,我们已经学习了ArrayList.接下来,我们以ArrayList为例,对Iterator的fail-fast机制进行了解.内容包括::1 fail-fast简介2 fail-fast示例3 f ...

  3. Pb (数据存储单位)

    PB (数据存储单位) 编辑 pb指petabyte,它是较高级的存储单位,其上还有EB,ZB,YB等单位. 它等于1,125,899,906,842,624(2的50次方)字节,“大约”是一千个te ...

  4. vector list array deque

    因此在实际使用时,如何选择这三个容器中哪一个,应根据你的需要而定,一般应遵循下面 的原则:   1.如果你需要高效的随即存取,而不在乎插入和删除的效率,使用vector   2.如果你需要大量的插入和 ...

  5. Linux 中执行命令

    第一步: 在txt文件(文件名为cmd_file)中写入代码:echo this is content! 第二步: 授权chmod 555 cmd_file 第三步: 运行 ./cmd_file -- ...

  6. tcp/ip 卷一 读书笔记(2)物理层和链路层网络

    物理层和链路层网络 术语 链路 是一对相邻结点间的物理线路,中间没有任何其他的交换结点. 数据链路 除了物理线路外,还必须有通信协议来控制这些数据的传输. 帧 数据链路层的协议数据单元(PDU) 串行 ...

  7. linux xargs【转】

    -i -I 参数区别 http://man.linuxde.net/xargs 它们都是用来作参数扩展替换的,以下两句代码其实效果一样 cat arg.txt|xargs -i sh sk.sh -p ...

  8. SQL 必知必会&#183;笔记&lt;16&gt;使用视图

    1.视图 视图是虚拟的表.与包含数据的表不一样,视图只包含使用时动态检索数据的查询. 为什么使用视图 重用SQL 语句 简化复杂的SQL 操作.在编写查询后,可以方便地重用它而不必知道其基本查询细节 ...

  9. JavaScript中的typeof操作符用法实例

    在Web前端开发中,我们经常需要判断变量的数据类型.鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型——typeof就是负责提供这方便信息的操作符.   对一个值使用t ...

  10. iOS 添加第三方.framework 打包上传iTunesConnect 遇到的坑

    1.添加完第三方库,模拟器运行没事,打iOS通用设备包的时候报一个错. ld: '/Users/jiangwei.wang/Documents/Project/APP NAME/SeosMobileK ...