Getting Started with WPF Dropdown Button (DropDownButtonAdv)

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

Adding DropDownButtonAdv to an application

The DropDownButtonAdv control is available in the following assembly:

  • Syncfusion.Shared.WPF

Setting label

The following code explains how to add a DropDownButtonAdv control using XAML:

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

The DropDownButtonAdv control can be created using C# as follows:

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

Setting size mode

The size mode of the DropDownButtonAdv can be easily modified using the property SizeMode. The SizeMode property contains 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:DropDownButtonAdv SizeMode="Small" Label="Hello World"/>
DropDownButtonAdv button = new DropDownButtonAdv()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:DropDownButtonAdv SizeMode="Normal" Label="Hello World"/>
DropDownButtonAdv button = new DropDownButtonAdv()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:DropDownButtonAdv SizeMode="Large" Label="Hello World"/>
DropDownButtonAdv button = new DropDownButtonAdv()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 the image when SizeMode is Normal or Small.
  • LargeIcon – To set the image when SizeMode is Large.

The SmallIcon property can be set as follows:

<sync:DropDownButtonAdv SizeMode="Small" Label="Hello World" SmallIcon="employee.png"/>
DropDownButtonAdv button = new DropDownButtonAdv()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:DropDownButtonAdv SizeMode="Normal" SmallIcon="employee.png" Label="Hello World"/>
DropDownButtonAdv button = new DropDownButtonAdv()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:DropDownButtonAdv SizeMode="Large" LargeIcon="employee.png" Label="Hello World"/>
DropDownButtonAdv button = new DropDownButtonAdv();
button.Label = "Hello World";
button.SizeMode = SizeMode.Large;
button.LargeIcon = new BitmapImage(new Uri("employee.png"));

Adding items to DropDownButtonAdv

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

Adding DropDownMenuItems to DropDownButtonAdv:

<shared:DropDownButtonAdv 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:DropDownButtonAdv>
DropDownButtonAdv button = new DropDownButtonAdv();
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 = menu;

Properties

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 Multiline Support

Events

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