How to: create a BarSplitButtonItem

• Aug 01, 2019

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. To add other bar items, use the PopupMenu.

In XAML

Window1.xaml

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

In Code-Behind

Window1.xaml.cs

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());
}

View Example