ToggleSplitButton
The ToggleSplitButton
functions as a ToggleButton
with primary and secondary parts that can each be pressed separately. The primary part behaves like a normal ToggleButton
and the secondary part opens a Flyout
with additional actions.
Is this the right control?
A ToggleSplitButton
is a fairly specialized control and its usage should be restricted to where it makes clear sense from a user-standpoint. It is intended to turn a feature on/off while allowing some additional configurations to be specified rather than the default.
Like a SplitButton
, the most common action should be the default and what is shown in the primary part. However, unlike the SplitButton
, pressing the primary part will turn this feature on or off instead of simply invoking an action. Additional configurations for the feature should be added to the Flyout
which is shown when the secondary (drop down) part is pressed.
Common Properties
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
IsChecked
Gets or sets if the ToggleSplitButton
is checked
Pseudoclasses
:pressed
Set when the entire ToggleSplitButton
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
:checked
Set when the ToggleSplitButton
is checked. (IsChecked="true"
)
API Reference
Source code
Examples
Basic example
<ToggleSplitButton Content="Content"
IsChecked="{Binding IsChecked}">
<ToggleSplitButton.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>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>

SplitButton (Flyout closed, unchecked)

SplitButton (Flyout closed, checked)

SplitButton (Flyout opened, checked)
Text editor with numbered or bulleted list example
Continuing the text editor example from SplitButton
, a common use case of the ToggleSplitButton
is to add bulleted/numbered lists to text. In this example the primary part will toggle the list on/off while the secondary part will open a Flyout
and allow selecting the bullet or number style.
<!-- We have the following Icons defined in our Resources -->
<PathGeometry x:Key="IconData.NumberedList"> {{ Path Data }} </PathGeometry>
<PathGeometry x:Key="IconData.BulletedList"> {{ Path Data }} </PathGeometry>
<ToggleSplitButton IsChecked="{Binding TextEditorHasList}">
<ToggleSplitButton.Content>
<!-- Note: For this example we keep the content static, but you can use dynamic content -->
<PathIcon Data="{DynamicResource IconData.BulletedList}" />
</ToggleSplitButton.Content>
<ToggleSplitButton.Flyout>
<Flyout Placement="Bottom">
<!-- Note: For this example we keep the content static, but you can use dynamic content -->
<ListBox Height="200" Width="200" >
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<PathIcon Data="{DynamicResource IconData.NumberedList}" />
<TextBlock Text="Numbered List" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<PathIcon Data="{DynamicResource IconData.BulletedList}" />
<TextBlock Text="Bulleted List" />
</StackPanel>
</ListBoxItem>
</ListBox>
</Flyout>
</ToggleSplitButton.Flyout>
</ToggleSplitButton>

Sample of ToggleSplitButton for toggle text lists on and off and selecting the list format
最后更新于
这有帮助吗?