WinUI 3學習筆記(3)—— ComboBox & DropDownButton & SplitButton

樓上那個蜀黍 發表於 2021-09-14

本篇想介紹相對小眾但頗具使用價值的控制元件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 & DropDownButton & SplitButton

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 & DropDownButton & SplitButton

做了長長的鋪墊以後,終於來到了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 & DropDownButton & 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>

WinUI 3學習筆記(3)—— ComboBox & DropDownButton & 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 應用中實現資料繫結