RibbonSplitButton Class
A RibbonControl‘s split button that consists of the regular RibbonButton and the dropdown button that displays a dropdown when you click or tap it.
Namespace: DevExpress.WinUI.Ribbon
Assembly: DevExpress.WinUI.Ribbon.v23.2.dll
NuGet Package: DevExpress.WinUI
#Declaration
[ContentProperty(Name = "Content")]
public class RibbonSplitButton :
RibbonButtonBase
#Remarks
The following code sample displays the RibbonSplitButton that is shown in the image above:
<Window ...
xmlns:dxr="using:DevExpress.WinUI.Ribbon">
<Grid>
<dxr:RibbonControl>
<dxr:RibbonControl.Tabs>
<dxr:RibbonTab Caption="Home" >
<dxr:RibbonGroup Caption="File">
<dxr:RibbonSplitButton Content="Highlight" ItemType="SmallWithoutText">
<dxr:RibbonSplitButton.SmallIcon>
<dxc:DXSymbolIconSource Symbol="Highlight" Foreground="DarkOrange"/>
</dxr:RibbonSplitButton.SmallIcon>
<dxr:RibbonSplitButton.Flyout>
<Flyout>
<ColorPicker Color="DarkOrange"/>
</Flyout>
</dxr:RibbonSplitButton.Flyout>
</dxr:RibbonSplitButton>
</dxr:RibbonGroup>
</dxr:RibbonTab>
</dxr:RibbonControl.Tabs>
</dxr:RibbonControl>
<!-- ... -->
</Grid>
</Window>
#Content/Menu
Specify the RibbonButtonBase.Content property to display text next to the button icon.
<dxr:RibbonSplitButton Content="Highlight">
<dxr:RibbonSplitButton.Flyout>
<Flyout>
<ColorPicker Color="DarkOrange"/>
</Flyout>
</dxr:RibbonSplitButton.Flyout>
</dxr:RibbonSplitButton>
Use the RibbonSplitButton.Flyout property to specify the content that is displayed when you click the RibbonSplitButton dropdown button.
#Commands
Use the Command property to specify a command that is invoked when a user clicks a RibbonSplitButton.
The RibbonControl includes the CommandParameter property that allows you to specify a command’s parameter.
#Button Icon
You can use the following properties to display a button icon:
Property | Description | Image |
---|---|---|
Small |
Gets or sets the ribbon button’s small icon (16x16 px). This is a dependency property. | ![]() |
Large |
Gets or sets the ribbon button’s large icon (32x32 px). This is a dependency property. | ![]() |
#Customize Appearance
#Display Modes
The RibbonSplitButton class contains the DisplayMode property that defines the button size and text.
Property | Description | Image |
---|---|---|
Default | If active, a ribbon item can be displayed as a large image with a caption. | - |
Large | If active, a ribbon item can be displayed as a large image with a caption. |
![]() |
Small |
If active, a ribbon item can be displayed as a small image. |
![]() |
Small |
If active, a ribbon item can be displayed as a small image with a caption. |
![]() |
#Appearance Settings
To customize a RibbonSplitButton‘s appearance settings, you can use the following StyleSettings:
Property | Description |
---|---|
Border |
Gets or sets a ribbon button’s border thickness. This is a dependency property. |
Corner |
Gets or sets a corner radius of the ribbon button’s border. This is a dependency property. |
Disabled |
Gets or sets a ribbon button’s disabled state background. This is a dependency property. |
Disabled |
Gets or sets a ribbon button’s disabled state border brush. This is a dependency property. |
Disabled |
Gets or sets a ribbon button’s disabled state foreground. This is a dependency property. |
Hover |
Gets or sets a ribbon button’s hovered state background. This is a dependency property. |
Hover |
Gets or sets a ribbon button’s hovered state border brush. This is a dependency property. |
Hover |
Gets or sets a ribbon button’s hovered state foreground. This is a dependency property. |
Normal |
Gets or sets a ribbon button’s normal state background. This is a dependency property. |
Normal |
Gets or sets a ribbon button’s normal state border brush. This is a dependency property. |
Normal |
Gets or sets a ribbon button’s normal state foreground. This is a dependency property. |
Pressed |
Gets or sets a ribbon button’s pressed state background. This is a dependency property. |
Pressed |
Gets or sets a ribbon button’s pressed state border brush. This is a dependency property. |
Pressed |
Gets or sets a ribbon button’s pressed state foreground. This is a dependency property. |
#ToolTip
You can use the following properties to display a RibbonSplitButton‘s tooltip:
Property | Description |
---|---|
Tool |
Gets or sets the ribbon button’s tooltip. This is a dependency property. |
Tool |
Gets or sets the ribbon button’s tooltip description text that is displayed under the Tool |
Tool |
Gets or sets the ribbon button’s tooltip title text. This is a dependency property. |