WinUI 3学习笔记(3)—— ComboBox & DropDownButton & SplitButton

摘要:
本篇想介绍相对小众但颇具使用价值的控件SplitButton,提到SplitButton难免会拿来与ComboBox进行比较,同时在WinUI3的控件库中,还有一个默默无闻的DropDownButton。而SplitButton,下拉显示的内容,和箭头左边的显示内容并无直接联系。DropDownButton是个奇葩控件,我个人觉得它存在的意义完全是为了兼容性。做了长长的铺垫以后,终于来到了SplitButton本身。ComboBox则不存在Click和Command,在被点击时,仅会展开下拉框供再次选择。而在SplitButton中,却因Content和Flyout并无直接联系而变的易于实现。

本篇想介绍相对小众但颇具使用价值的控件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>

WinUI 3学习笔记(3)—— ComboBox &amp; DropDownButton &amp; SplitButton第1张

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>

WinUI 3学习笔记(3)—— ComboBox &amp; DropDownButton &amp; SplitButton第2张

做了长长的铺垫以后,终于来到了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学习笔记(3)—— ComboBox &amp; DropDownButton &amp; SplitButton第3张

第二个例子参考了《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>

WinUI 3学习笔记(3)—— ComboBox &amp; DropDownButton &amp; SplitButton第4张

本篇我们简单比较了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 &amp;amp; DropDownButton &amp;amp; SplitButton》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇LoadRunner中log的使用总结使用qemu模拟调试内核和debian根文件系统下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

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

UI <UserControl x: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"...

Combobox 控件绑定数据

ComboBox 类:表示带有下拉列表的选择控件,通过单击控件上的箭头可显示或隐藏下拉列表。 绑定集合对象// .xaml using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;...

扩展WinForm的ComboBox

个人认为winform的combobox不是那么的好用,所以自己扩展了一下。重新定义Items属性,并且支持树结构。为每项加入了CheckBox状态。丰富的列表项类ListItem。效果如图:代码清单: {[Designer(typeof(ControlDesigner))]publicclassComboBox:System.Windows.Forms....

WPF 基础学习笔记

学习笔记: WPF中对于控件名字的命名,可在code中找到,例如如下:x:Name=“MassText” ... 如何获取WPF richTextBox的text?有别于winform,比较复杂。 string richText1 = new TextRange(RichTextBox1.Document.ContentStart, RichTextBo...

【转】文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

看见一大侠介绍这种联想的效果,很棒! 怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属性,一个属性是AutoCompleteMode,指定控件中使用的自动完成功能的模式,有四种模式,分别是: None:禁用控...

关于silverlight的combobox选择项改变的问题

昨天接手一个项目,要帮忙做项目里的一个项目统计功能罢了,本来也没什么,麻烦就在于,它要用silverlight.所以然遇到了一路问题。其中之一就是这个[Silverlight中为ComboBox设定当前选择项]。网上搜了大堆资料,其中大同小异,答案如下: 方法一: this.comboBox1.SelectedItem = (from p in this...