本篇想介紹相對小眾但頗具使用價值的控制元件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分鐘不等，想要補充基礎知識的同學點這裡：