Getting Started with WPF Split Button

This section guides you on getting started with the SplitButtonAdv control. It describes you about the control structure, basic settings, implementation and members.

Control structure

Adding SplitButtonAdv control to an application

The SplitButtonAdv control is available in the following assembly:

  • Syncfusion.Shared.WPF

Setting label

The following code explains how to declare a SplitButtonAdv control using XAML:

<sync:SplitButtonAdv Label="Hello World"/>

The SplitButtonAdv control can be created through C# as follows:

SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";

Setting size mode

The size mode of the SplitButtonAdv control can be easily changed using the property SizeMode. The SizeMode comprises the following values:

  • Small
  • Normal
  • Large

Small mode

When the SizeMode is set to Small, the icon of the DropDownButtonAdv control is displayed without the label.

Use the following code snippet to set the SizeMode to Small:

<sync:SplitButtonAdv SizeMode="Small" Label="Hello World"/>
SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";
button.SizeMode = SizeMode.Small;

Normal mode

The DropDownButtonAdv control retains the default appearance, when the SizeMode is set to Normal,

Use the following code snippet to set the SizeMode to Normal:

<sync:SplitButtonAdv SizeMode="Normal" Label="Hello World"/>
SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";
button.SizeMode = SizeMode.Normal;

Large mode

When the SizeMode is set to Large, the DropDownButtonAdv control is displayed with large icon and provides multiline support.

Use the following code snippet to set the SizeMode to Large:

<sync:SplitButtonAdv SizeMode="Large" Label="Hello World"/>
SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";
button.SizeMode = SizeMode.Large;

Setting image

The Image displayed in the control can be set using two properties:

  • SmallIcon – To set image when SizeMode is Normal or Small.
  • LargeIcon – To set image when SizeMode is Large.

The SmallIcon property can be set as follows:

<sync:SplitButtonAdv SizeMode="Small" Label="Hello World" SmallIcon="employee.png"/>
SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";
button.SizeMode = SizeMode.Small;
button.SmallIcon = new BitmapImage(new Uri("employee.png"));

The SmallIcon property can be set even when the SizeMode is Normal:

<sync:SplitButtonAdv SizeMode="Normal" SmallIcon="employee.png" Label="Hello World"/>
SplitButtonAdv button = new SplitButtonAdv()
button.Label = "Hello World";
button.SizeMode = SizeMode.Normal;
button.SmallIcon = new BitmapImage(new Uri("employee.png"));

The LargeIcon property can be set as follows:

<sync:SplitButtonAdv SizeMode="Large" LargeIcon="employee.png" Label="Hello World"/>
SplitButtonAdv button = new SplitButtonAdv();
button.Label = "Hello World";
button.SizeMode = SizeMode.Large;
button.LargeIcon = new BitmapImage(new Uri("employee.png"));

Adding items to SplitButtonAdv

The DropDownMenuGroup acts as a container for SplitButtonAdv, which provides customization such as Resizing, Header and Scrollbar support.

Adding DropDownMenuItems to DropDownButtonAdv:

<shared:SplitButtonAdv Label="Hello World" x:Name="button" SizeMode="Normal" SmallIcon="employee.png">
<shared:DropDownMenuGroup>
<shared:DropDownMenuItem Header="Menu Item 1"/>
<shared:DropDownMenuItem Header="Menu Item 2"/>
<shared:DropDownMenuItem Header="Menu Item 3"/>
</shared:DropDownMenuGroup>
</shared:SplitButtonAdv>
SplitButtonAdv button = new SplitButtonAdv();
DropDownMenuGroup menu = new DropDownMenuGroup();
DropDownMenuItem menuItem1 = new DropDownMenuItem();
DropDownMenuItem menuItem2 = new DropDownMenuItem();
DropDownMenuItem menuItem3 = new DropDownMenuItem();
menu.Items.Add(menuItem1);
menu.Items.Add(menuItem2);
menu.Items.Add(menuItem3);
button.Content = menuItem1;

SplitButtonAdv members

Properties

Property Table

Name Type Value it accepts Description Default Value Reference Link
Label String String The Label Property of this element can be set to any string value Null Label
SizeMode SizeMode Normal,Small, Large Represents the Size of the element, which may be Normal, Small or Large Normal SizeMode
SmallIcon ImageSource Image URL Represents the Image displayed in the element, when size form is Small or Normal - SmallIcon
LargeIcon ImageSource Image URL Represents the Image displayed in the element, when size form is Large - LargeIcon
IsMultiline Boolean True or False Value which represents whether the Label displayed in two line or not. True IsMultiline

Events

Events Table

Name Event Type Event Args Parameter Description Reference Link
DropDownOpened RoutedEventHandler RoutedEvent Args Occurs after DropDown is opened . DropDownOpened
DropDownOpening CancelEventHandler CancelEventArgs Occurs before DropDown is opened. DropDownOpening
DropDownClosed RoutedEventHandler RoutedEvent Args Occurs after DropDown is closed. DropDownClosed
DropDownClosing CancelEventHandler CancelEventArgs Occurs before DropDown is closed. DropDownClosing
Click RoutedEventHandler RoutedEventArgs Occurs when the element is pressed. Click