Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

SplitButton Class

A split button control.

Namespace: DevExpress.Xpf.Core

Assembly: DevExpress.Xpf.Core.v24.1.dll

NuGet Package: DevExpress.Wpf.Core

#Declaration

public class SplitButton :
    DropDownButtonBase

#Remarks

The SplitButton control consists of two buttons.

  • Main button
  • Dropdown button

SplitButton

The SplitButton control offers the following features.

  • Total control over the main button content

    Use the Content property to specify the content of the main button.

    <dx:SplitButton x:Name="splitButton" Glyph="{dx:DXImage Image=Close_16x16.png}" Height="90">
        <dx:SplitButton.Content>
            <Grid>
                <Ellipse Height="80" Width="150" Fill="#FFAFAFF3"/>
                <TextBlock TextAlignment="Center" VerticalAlignment="Center" FontSize="30">Button</TextBlock>
            </Grid>
        </dx:SplitButton.Content>
    </dx:SplitButton>
    
  • Custom dropdown content

    You can embed any custom content in the SplitButton‘s dropdown. The following example demonstrates a DateNavigator control embedded in a SplitButton‘s dropdown.

    <dx:SplitButton Height="25" Width="175" Content="SplitButton">
        <dxe:DateNavigator/>
    </dx:SplitButton>
    

#Customize Appearance

SplitButton - Customize Appearance

  1. Glyph, GlyphHeight, GlyphWidth
  2. Background, Foreground, FontSize
  3. ArrowGlyph, ArrowAlignment, ArrowPadding
  4. Height, BorderBrush, BorderThickness, CornerRadius, Width
  5. SeparatorThickness
  6. ArrowBackground, ArrowBorderBrush, ArrowBorderThickness, ArrowCornerRadius
<Window ...
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core">
    <dx:SplitButton Background="#FFE9EBEC" BorderThickness="2" BorderBrush="#FF0D3A50"
                    CornerRadius="5" Height="30" Width="150" Content="Upload" FontSize="10" 
                    Foreground="#ff505050" Glyph="{dx:DXImage SvgImages/Arrows/MoveUp.svg}" 
                    GlyphHeight="20" GlyphWidth="20"
                    ArrowGlyph="{dx:SvgImageSource Uri='pack://application:,,,/DevExpress.Images.v24.1;component/SvgImages/Icon Builder/Actions_Arrow3Down.svg', Size='15,15'}"
                    ArrowBackground="#FFE9EBEC" ArrowBorderBrush="#FF0D3A50" ArrowBorderThickness="2"/>
</Window>

Tip

Refer to the following topic for more information: Appearance Customization.

See Also