Implementing Syncfusion WPF Button (ButtonAdv)

The ButtonAdv is Syncfusion's enhanced WPF button control. It extends the standard WPF button with rich icon support (SmallIcon, LargeIcon, IconTemplate), predefined size modes, toggle/checkable behavior, multiline text, MVVM command binding, corner radius, and full theme support via SfSkinManager.

Assembly required: Syncfusion.Shared.WPF Namespace: Syncfusion.Windows.Tools.Controls XAML schema: http://schemas.syncfusion.com/wpf

When to Use This Skill

• Adding a Syncfusion WPF button to an application (designer, XAML, or C#)
• Configuring size modes (Small, Normal, Large) and icons
• Setting up a toggle/checkable button
• Binding commands using MVVM pattern
• Customizing label, corner radius, icon size, or multiline text
• Applying built-in themes or editing button templates
• Handling Click, Checked, or Unchecked events

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly / NuGet setup
• Adding ButtonAdv via designer, XAML, or C#
• Setting the Label property
• CornerRadius customization
• IsDefault and IsCancel modes
• Icon priority loading order

Size Modes & Icons

📄 Read: references/size-modes-and-icons.md

• SizeMode enum: Small, Normal, Large
• SmallIcon vs LargeIcon usage rules
• IconWidth / IconHeight sizing
• IconTemplate (path data, font icons, DataTemplate)
• IconTemplateSelector for dynamic icon switching
• IsMultiLine for large-mode multiline labels

Toggle State

📄 Read: references/toggle-state.md

• IsCheckable — enable toggle behavior
• IsChecked — set initial checked state
• Checked / Unchecked events
• Click event handler

MVVM & Commands

📄 Read: references/mvvm-and-commands.md

• Command property binding (ICommand)
• CommandParameter for passing data
• DelegateCommand implementation pattern
• CanExecute and RaiseCanExecuteChanged
• Full ViewModel example

Styling & Themes

📄 Read: references/styling-and-themes.md

• Applying built-in themes via SfSkinManager
• Creating custom themes with Theme Studio
• Editing templates in Expression Blend
• Editing templates in Visual Studio

Quick Start

Minimal XAML Setup

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:ButtonAdv Label="Log in"
                              SizeMode="Normal"
                              SmallIcon="Images/user.png"
                              Width="120" Height="36"/>
    </Grid>
</Window>

Minimal C# Setup

using Syncfusion.Windows.Tools.Controls;

ButtonAdv button = new ButtonAdv();
button.Label = "Log in";
button.SizeMode = SizeMode.Normal;
button.SmallIcon = new BitmapImage(new Uri("Images/user.png", UriKind.RelativeOrAbsolute));
Root.Children.Add(button);

Common Patterns

Button with Large Icon

<syncfusion:ButtonAdv Label="Save"
                      SizeMode="Large"
                      LargeIcon="Images/save-large.png"
                      Width="68" Height="68"/>

Toggle Button

<syncfusion:ButtonAdv Label="Bold"
                      SizeMode="Normal"
                      SmallIcon="Images/bold.png"
                      IsCheckable="True"
                      IsChecked="False"
                      Checked="OnBoldChecked"
                      Unchecked="OnBoldUnchecked"/>

MVVM Command Binding

<syncfusion:ButtonAdv Label="Submit"
                      SizeMode="Normal"
                      Command="{Binding SubmitCommand}"
                      CommandParameter="SubmitAction"/>

Icon Template (Vector/Font Icon)

<syncfusion:ButtonAdv Label="User" SizeMode="Normal">
    <syncfusion:ButtonAdv.IconTemplate>
        <DataTemplate>
            <Grid Width="16" Height="16">
                <Path Data="M16,0 C19.6,0 22.5,2.9 22.5,6.5 ..."
                      Fill="#FF3A3A38" Stretch="Fill"/>
            </Grid>
        </DataTemplate>
    </syncfusion:ButtonAdv.IconTemplate>
</syncfusion:ButtonAdv>

Key Properties

Icon priority order: IconTemplateSelector → IconTemplate → LargeIcon → SmallIcon