SplitButton
The SplitButton functions as a Button with primary and secondary parts that can each be pressed separately. The primary part behaves like normal Button and the secondary part opens a Flyout with additional actions.

Is this the right control?

A SplitButton should only be composed of similar actions. Fundamentally, this control is used to group common actions together where one has clear priority over the others. The most common action should be the default and what is shown in the primary part of the SplitButton. Less-common actions should be added to the flyout which is shown when the secondary (drop down) part is pressed.
The user-selection action should be invoked immediately when pressing either the primary part or a secondary action in the flyout. All pressed actions, whether primary or secondary, are immediate.

Common Properties

Property
Description
Content
The content to display in the primary part
Flyout
The Flyout which shows up when the secondary part is clicked
Command
A command to be invoked when the primary button is clicked

Pseudoclasses

Pseudoclass
Description
:pressed
Set when the entire SplitButton is pressed using a keyboard input such as Space or Enter. In this state no distinction is made between primary or secondary parts
:flyout-open
Set when the Flyout is open

API Reference

​SplitButton​

Source code

​SplitButton.cs​

Examples

Basic example

<SplitButton Content="Content" >
<SplitButton.Flyout>
<MenuFlyout Placement="Bottom">
<MenuItem Header="Item 1">
<MenuItem Header="Subitem 1" />
<MenuItem Header="Subitem 2" />
<MenuItem Header="Subitem 3" />
</MenuItem>
<MenuItem Header="Item 2"
InputGesture="Ctrl+A" />
<MenuItem Header="Item 3" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
SplitButton (Flyout closed)
SplitButton (Flyout opened)

Color-Selection example

A common use case of a SplitButton is for coloring text within an editor. Pressing the primary part of the SplitButton will apply the current color to the selected text. Pressing the secondary part will open a Flyout and allow another color to be specified and applied. Again note that when another color is specified in the Flyout, the selected text color will immediately change and the current color will be updated as well.
<!-- We have the following DataTemplate defined -->
<DataTemplate DataType="Color">
<Border CornerRadius="4" Width="20" Height="20" BorderBrush="Gray" BorderThickness="1" >
<Border.Background>
<SolidColorBrush Color="{Binding}" />
</Border.Background>
</Border>
</DataTemplate>
<!-- SelectedColor, ChangeColorCommand and AvailableColors are properties of our ViewModel -->
<SplitButton Content="{Binding SelectedColor}"
Command="{Binding ChangeColorCommand}">
<SplitButton.Flyout>
<Flyout Placement="Bottom">
<ListBox Items="{Binding AvailableColors}"
SelectedItem="{Binding SelectedColor}"
Height="200" Width="200" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Flyout>
</SplitButton.Flyout>
</SplitButton>
Sample of SplitButton for color selection

Export Button Sample

Another common example of the SplitButton could be an export button. When the primary part is pressed, data will be exported using default settings. However, if the secondary part is pressed, additional export options could be specified like β€˜Export to PNG’, β€˜Export to JPG’, etc.
<SplitButton Content="Export to PDF"
Command="{Binding ExportCommand}"
CommandParameter=".pdf">
<SplitButton.Flyout>
<MenuFlyout Placement="RightEdgeAlignedTop">
<MenuItem Header="Export to PNG"
Command="{Binding ExportCommand}"
CommandParameter=".png" />
<MenuItem Header="Export to JPG"
Command="{Binding ExportCommand}"
CommandParameter=".jpg" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
Sample of a SplitButton with different export options
Export as PDF
Copy link
Edit on GitHub
On this page
Is this the right control?
Common Properties
Pseudoclasses
API Reference
Source code
Examples
Basic example
Color-Selection example
Export Button Sample