How to: Create a BarSplitButtonItem

Jun 30, 2023

This example creates a BarSplitButtonItem (a button with drop-down). Click the button’s down arrow to display a popup window. To add a custom popup content, use the PopupControlContainer as the PopupControl.

The following image shows the result:

Window1.xaml

xaml

<dxb:BarContainerControl>
    <dxb:ToolBarControl UseWholeRow="True">
        <dxb:BarSplitButtonItem Name="btnFontColor" Content="FontColor" Glyph="{dx:DXImage Image=ChangeFontStyle_16x16.png}" ArrowAlignment="Bottom" ItemClick="btnFontColor_ItemClick">
            <dxb:BarSplitButtonItem.PopupControl>
                <dxb:PopupControlContainer>
                    <UserControl>
                        <dxe:ColorChooser/>
                    </UserControl>
                </dxb:PopupControlContainer>
            </dxb:BarSplitButtonItem.PopupControl>
        </dxb:BarSplitButtonItem>
    </dxb:ToolBarControl>
</dxb:BarContainerControl>

Window1.xaml.cs

csharp

private void btnFontColor_ItemClick(object sender, DevExpress.Xpf.Bars.ItemClickEventArgs e) {
    PopupControlContainer pcc = (e.Item as DevExpress.Xpf.Bars.BarSplitButtonItem).PopupControl as PopupControlContainer;
    Color color = ((pcc.Content as UserControl).Content as ColorChooser).Color;
    MessageBox.Show("Color is applied: " + color.ToString());
}