WinUI 3學習筆記（3）—— ComboBox & DropDownButton & SplitButton

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

本篇想介紹相對小眾但頗具使用價值的控制元件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 應用中實現資料繫結

相關文章