Getting Started with WPF Button (ButtonAdv)

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

Control structure

Getting Started

Control Structure

Add ButtonAdv control to an application

The ButtonAdv control is available in the following assembly:

  • Syncfusion.Shared.WPF

Setting label

The following code explains how to declare the ButtonAdv control using XAML.

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

The ButtonAdv control can be created using the C# code as follows:

ButtonAdv button = new ButtonAdv();

button.Label = "Hello World";

Setting Label

Typical ButtonAdv Control

Set size mode

The size mode of the ButtonAdv control can be easily modified by using the property SizeMode. The SizeMode is the enum property which contains the following values:

  • Small
  • Normal
  • Large

Small mode

When the SizeMode is set to Small, the ButtonAdv control is displayed without the label and only icon is present in it.

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

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

button.Label = "Hello World";

button.SizeMode = SizeMode.Small;

Small Mode

ButtonAdv Control with Small SizeMode

Normal mode

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

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

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

button.Label = "Hello World";

button.SizeMode = SizeMode.Normal;

Normal Mode

ButtonAdv control with Normal SizeMode

Large mode

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

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

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

button.Label = "Hello World";

button.SizeMode = SizeMode.Large;

Large Mode

ButtonAdv controls with Large SizeMode

Setting image

The image displayed on the control can be set using the following 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:ButtonAdv SizeMode="Small" Label="Hello World" SmallIcon="employee.png"/>
ButtonAdv button = new ButtonAdv();

button.Label = "Hello World";

button.SizeMode = SizeMode.Small;

button.SmallIcon = new BitmapImage(new Uri("employee.png"));

Setting Image

Small Sized ButtonAdv Control with image

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

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

button.Label = "Hello World";

button.SizeMode = SizeMode.Normal;

button.SmallIcon = new BitmapImage(new Uri("employee.png"));

Normal Mode Image

Normal Sized ButtonAdv Control with Image

The LargeIcon property can be set as follows:

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

button.Label = "Hello World";

button.SizeMode = SizeMode.Large;

button.SmallIcon = new BitmapImage(new Uri("employee.png"));</td></tr>

Large Mode Image

Large Sized ButtonAdv Control with Image

Set icon width and height

The Icon size can be customized using the following two properties:

  • IconWidth
  • IconHeight

Icon Size

ButtonAdv Control with IconSize(80,80)

Icon Size Image

ButtonAdv Control with IconSize(20,20)

The IconWidth and IconHeight can be set as follows:

<sync:ButtonAdv   SizeMode="Normal" IconHeight="20" IconWidth="20"  Label="Hello World"  SmallIcon ="female.png"  />
ButtonAdv button = new ButtonAdv()button.Label = "Hello World";button.IconWidth=20;button.IconHeight=20;

ButtonAdv members

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, that can 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 Null LargeIcon
IsCheckable Boolean True or False Button will act as a Checkable item if true False Checkable Support
IsChecked Boolean True or False Represents the Checked state of the element False Checkable Support
IsMultiline Boolean True or False Represents whether the Label displayed in two line or not True MultiLine Support
Command ICommand ICommand Represents the command to invoke when the button is pressed Null Command Binding
CommandParameter Object Object Represents the parameter to pass the Command property. Null Command Binding
IconWidth double double Represents the width of the icon. 16.0 IconSize
IconHeight double double Represents the height of the icon. 16.0 IconSize

Events

Name Event Type Event Args Parameter Description Reference Link
Click RoutedEventHandler RoutedEvent Args Occurs when ButtonAdv is pressed. Click
Checked RoutedEventHandler RoutedEventArgs Occurs when the Button is Checked. Checked