syncfusion-wpf-button

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Button (ButtonAdv)

实现Syncfusion WPF按钮（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

ButtonAdv是Syncfusion推出的增强型WPF按钮控件。它扩展了标准WPF按钮的功能，支持丰富的图标（SmallIcon、LargeIcon、IconTemplate）、预定义尺寸模式、切换/可勾选行为、多行文本、MVVM命令绑定、圆角，并且可通过SfSkinManager实现完整的主题支持。

所需程序集：

Syncfusion.Shared.WPF

命名空间：

Syncfusion.Windows.Tools.Controls

XAML架构：

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

向应用中添加Syncfusion WPF按钮（设计器、XAML或C#方式）
配置尺寸模式（Small、Normal、Large）和图标
设置切换/可勾选按钮
使用MVVM模式绑定命令
自定义标签、圆角、图标尺寸或多行文本
应用内置主题或编辑按钮模板
处理Click、Checked或Unchecked事件

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

📄 阅读： references/getting-started.md

程序集/NuGet设置
通过设计器、XAML或C#添加ButtonAdv
设置
```
Label
```
属性
```
CornerRadius
```
自定义
```
IsDefault
```
和
```
IsCancel
```
模式
图标优先级加载顺序

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

📄 阅读： references/size-modes-and-icons.md

```
SizeMode
```
枚举：Small、Normal、Large
```
SmallIcon
```
与
```
LargeIcon
```
的使用规则
```
IconWidth
```
/
```
IconHeight
```
尺寸设置
```
IconTemplate
```
（路径数据、字体图标、DataTemplate）
```
IconTemplateSelector
```
动态切换图标
```
IsMultiLine
```
用于大模式下的多行标签

Toggle State

切换状态

📄 Read: references/toggle-state.md

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

📄 阅读： references/toggle-state.md

```
IsCheckable
```
— 启用切换行为
```
IsChecked
```
— 设置初始勾选状态
```
Checked
```
/
```
Unchecked
```
事件
```
Click
```
事件处理程序

MVVM & Commands

MVVM与命令

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

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

📄 阅读： references/mvvm-and-commands.md

```
Command
```
属性绑定（
```
ICommand
```
）
```
CommandParameter
```
传递数据
DelegateCommand实现模式
```
CanExecute
```
和
```
RaiseCanExecuteChanged
```
完整ViewModel示例

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

📄 阅读： references/styling-and-themes.md

通过
```
SfSkinManager
```
应用内置主题
使用Theme Studio创建自定义主题
在Expression Blend中编辑模板
在Visual Studio中编辑模板

Quick Start

快速开始

Minimal XAML Setup

最简XAML设置

xaml

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

xaml

<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

最简C#设置

csharp

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

csharp

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

带大图标按钮

xaml

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

xaml

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

Toggle Button

切换按钮

xaml

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

xaml

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

MVVM Command Binding

MVVM命令绑定

xaml

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

xaml

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

Icon Template (Vector/Font Icon)

图标模板（矢量/字体图标）

xaml

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

xaml

<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

关键属性

Property	Type	Description
`Label`	string	Button text displayed to the user
`SizeMode`	SizeMode	Small (icon only), Normal (icon + label side), Large (icon + label below)
`SmallIcon`	ImageSource	Icon for Small/Normal size modes
`LargeIcon`	ImageSource	Icon for Large size mode
`IconTemplate`	DataTemplate	Vector/font icon template (highest priority)
`IconTemplateSelector`	DataTemplateSelector	Dynamic icon switching
`IconWidth`	double	Custom icon width
`IconHeight`	double	Custom icon height
`CornerRadius`	CornerRadius	Rounded corners (default: 3)
`IsCheckable`	bool	Enables toggle button behavior
`IsChecked`	bool	Initial toggle state
`IsMultiLine`	bool	Multiline label (Large mode only)
`IsDefault`	bool	Activated by Enter key
`IsCancel`	bool	Activated by Escape key
`Command`	ICommand	MVVM command binding
`CommandParameter`	object	Data passed to command handler

Icon priority order:
IconTemplateSelector
→
IconTemplate
→
LargeIcon
→
SmallIcon

属性	类型	描述
`Label`	string	显示给用户的按钮文本
`SizeMode`	SizeMode	Small（仅图标）、Normal（图标+标签并排）、Large（图标+标签上下排列）
`SmallIcon`	ImageSource	Small/Normal尺寸模式下的图标
`LargeIcon`	ImageSource	Large尺寸模式下的图标
`IconTemplate`	DataTemplate	矢量/字体图标模板（优先级最高）
`IconTemplateSelector`	DataTemplateSelector	动态切换图标
`IconWidth`	double	自定义图标宽度
`IconHeight`	double	自定义图标高度
`CornerRadius`	CornerRadius	圆角（默认值：3）
`IsCheckable`	bool	启用切换按钮行为
`IsChecked`	bool	初始切换状态
`IsMultiLine`	bool	多行标签（仅大模式）
`IsDefault`	bool	按Enter键激活
`IsCancel`	bool	按Escape键激活
`Command`	ICommand	MVVM命令绑定
`CommandParameter`	object	传递给命令处理程序的数据

图标优先级顺序：
IconTemplateSelector
→
IconTemplate
→
LargeIcon
→
SmallIcon