syncfusion-wpf-dropdownbuttonadv

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF DropDownButtonAdv

实现WPF DropDownButtonAdv

The

DropDownButtonAdv

is a WPF dropdown button control that displays a popup menu when the arrow is clicked. It supports menu items with icons, data binding, command binding, configurable popup direction, resizing, multiline text, and full theme support.

Assembly:

Syncfusion.Shared.WPF

Namespace:

Syncfusion.Windows.Tools.Controls

XAML Schema:

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

DropDownButtonAdv

是一款WPF下拉按钮控件，点击箭头时会显示弹出菜单。它支持带图标的菜单项、数据绑定、命令绑定、可配置的弹出方向、调整大小、多行文本以及完整的主题支持。

程序集：

Syncfusion.Shared.WPF

命名空间：

Syncfusion.Windows.Tools.Controls

XAML架构：

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

When to Use This Skill

何时使用本技能

User wants a button that opens a dropdown list of options
User needs a WPF dropdown button with icons, checkable items, or grouped items

User asks about

DropDownButtonAdv

DropDownMenuGroup

DropDownMenuItem

User needs MVVM binding for dropdown menu items or command binding
User needs to control popup direction, resizing, or multiline label
User asks how to handle dropdown open/close events or item click events

用户需要一个可打开选项下拉列表的按钮
用户需要带有图标、可选项目或分组项目的WPF下拉按钮

用户询问

DropDownButtonAdv

、

DropDownMenuGroup

、

DropDownMenuItem

Quick Start

快速开始

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:DropDownButtonAdv Label="Country" SizeMode="Normal" SmallIcon="Images/flag.png">
    <syncfusion:DropDownMenuGroup>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="India">
            <syncfusion:DropDownMenuItem.Icon>
                <Image Source="Images/india.png"/>
            </syncfusion:DropDownMenuItem.Icon>
        </syncfusion:DropDownMenuItem>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="France"/>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="Germany"/>
    </syncfusion:DropDownMenuGroup>
</syncfusion:DropDownButtonAdv>

csharp

// C# equivalent
DropDownButtonAdv button = new DropDownButtonAdv();
button.Label = "Country";
button.SizeMode = SizeMode.Normal;
button.SmallIcon = new BitmapImage(new Uri("Images/flag.png", UriKind.RelativeOrAbsolute));
DropDownMenuGroup menu = new DropDownMenuGroup();
menu.Items.Add(new DropDownMenuItem { Header = "India", HorizontalAlignment = HorizontalAlignment.Left });
button.Content = menu;

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:DropDownButtonAdv Label="Country" SizeMode="Normal" SmallIcon="Images/flag.png">
    <syncfusion:DropDownMenuGroup>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="India">
            <syncfusion:DropDownMenuItem.Icon>
                <Image Source="Images/india.png"/>
            </syncfusion:DropDownMenuItem.Icon>
        </syncfusion:DropDownMenuItem>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="France"/>
        <syncfusion:DropDownMenuItem HorizontalAlignment="Left" Header="Germany"/>
    </syncfusion:DropDownMenuGroup>
</syncfusion:DropDownButtonAdv>

csharp

// C# equivalent
DropDownButtonAdv button = new DropDownButtonAdv();
button.Label = "Country";
button.SizeMode = SizeMode.Normal;
button.SmallIcon = new BitmapImage(new Uri("Images/flag.png", UriKind.RelativeOrAbsolute));
DropDownMenuGroup menu = new DropDownMenuGroup();
menu.Items.Add(new DropDownMenuItem { Header = "India", HorizontalAlignment = HorizontalAlignment.Left });
button.Content = menu;

Common Patterns

常见模式

Goal	Approach
Static menu items	Declare `DropDownMenuItem` directly inside `DropDownMenuGroup`
Dynamic items from data	Bind `DropDownMenuGroup.ItemsSource` + use `ItemTemplate`
MVVM command on item click	Set `Command` + `CommandParameter` on `DropDownMenuItem`
Popup opens below-left	`DropDirection="BottomLeft"` (default)
Large button with label wrapping	`SizeMode="Large"` + `IsMultiLine="True"`
Checkable items	`IsCheckable="True"` on `DropDownMenuItem`
Custom UIElement in menu	Use `DropDownMenuGroup.MoreItems` property
Scrollable long list	Set `MaxHeight` + `ScrollBarVisibility="Visible"` on group
Resizable popup	`IsResizable="True"` on `DropDownMenuGroup`

目标	实现方式
静态菜单项	在 `DropDownMenuGroup` 内直接声明 `DropDownMenuItem`
来自数据的动态项目	绑定 `DropDownMenuGroup.ItemsSource` + 使用 `ItemTemplate`
项目点击的MVVM命令	在 `DropDownMenuItem` 上设置 `Command` + `CommandParameter`
弹出框在左下方打开	`DropDirection="BottomLeft"` （默认值）
带标签换行的大按钮	`SizeMode="Large"` + `IsMultiLine="True"`
可选项目	在 `DropDownMenuItem` 上设置 `IsCheckable="True"`
菜单中的自定义UIElement	使用 `DropDownMenuGroup.MoreItems` 属性
可滚动的长列表	在分组上设置 `MaxHeight` + `ScrollBarVisibility="Visible"`
可调整大小的弹出框	在 `DropDownMenuGroup` 上设置 `IsResizable="True"`

Key Properties

关键属性

Property	Type	Description
`Label`	`string`	Button text label
`SizeMode`	`SizeMode`	Small / Normal / Large
`SmallIcon`	`ImageSource`	Icon for Small and Normal modes
`LargeIcon`	`ImageSource`	Icon for Large mode
`IconTemplate`	`DataTemplate`	Vector/path icon template (overrides image icons)
`IconTemplateSelector`	`DataTemplateSelector`	Conditionally select icon template
`IconWidth` / `IconHeight`	`double`	Icon dimensions
`DropDirection`	`DropDirection`	Popup position (default: BottomLeft)
`IsMultiLine`	`bool`	Multi-line label (Large mode only)
`DropDownMenuGroup.ItemsSource`	`IEnumerable`	Data-bound menu items
`DropDownMenuGroup.IconBarEnabled`	`bool`	Show vertical icon bar
`DropDownMenuGroup.ScrollBarVisibility`	`ScrollBarVisibility`	Scrollbar in popup
`DropDownMenuGroup.IsResizable`	`bool`	Resize gripper on popup
`DropDownMenuGroup.MoreItems`	`ObservableCollection<UIElement>`	Custom bottom items
`DropDownMenuItem.IsCheckable`	`bool`	Allow check/uncheck
`DropDownMenuItem.Command`	`ICommand`	MVVM command
`DropDownMenuItem.CommandParameter`	`object`	Command parameter

属性	类型	描述
`Label`	`string`	按钮文本标签
`SizeMode`	`SizeMode`	小/正常/大
`SmallIcon`	`ImageSource`	小和正常模式下的图标
`LargeIcon`	`ImageSource`	大模式下的图标
`IconTemplate`	`DataTemplate`	矢量/路径图标模板（覆盖图片图标）
`IconTemplateSelector`	`DataTemplateSelector`	有条件地选择图标模板
`IconWidth` / `IconHeight`	`double`	图标尺寸
`DropDirection`	`DropDirection`	弹出框位置（默认：BottomLeft）
`IsMultiLine`	`bool`	多行标签（仅大模式）
`DropDownMenuGroup.ItemsSource`	`IEnumerable`	数据绑定的菜单项
`DropDownMenuGroup.IconBarEnabled`	`bool`	显示垂直图标栏
`DropDownMenuGroup.ScrollBarVisibility`	`ScrollBarVisibility`	弹出框中的滚动条
`DropDownMenuGroup.IsResizable`	`bool`	弹出框的调整大小抓手
`DropDownMenuGroup.MoreItems`	`ObservableCollection<UIElement>`	自定义底部项目
`DropDownMenuItem.IsCheckable`	`bool`	允许勾选/取消勾选
`DropDownMenuItem.Command`	`ICommand`	MVVM命令
`DropDownMenuItem.CommandParameter`	`object`	命令参数

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly reference (
```
Syncfusion.Shared.WPF
```
)
Add via designer, XAML, or C#
Setting
```
Label
```
,
```
SizeMode
```
(Small/Normal/Large)
SmallIcon, LargeIcon, IconWidth/IconHeight
IconTemplate and IconTemplateSelector
Basic menu items inline
Applying themes with SfSkinManager

📄 阅读： references/getting-started.md

程序集引用（
```
Syncfusion.Shared.WPF
```
）
通过设计器、XAML或C#添加控件
设置
```
Label
```
、
```
SizeMode
```
（小/正常/大）
SmallIcon、LargeIcon、IconWidth/IconHeight
IconTemplate和IconTemplateSelector
内联基础菜单项
使用SfSkinManager应用主题

Dropdown Menu Items

下拉菜单项

📄 Read: references/dropdown-menu-items.md

```
DropDownMenuGroup
```
as the container element
Declarative
```
DropDownMenuItem
```
with Header and Icon
```
IconBarEnabled
```
(vertical icon strip)
```
ScrollBarVisibility
```
for long item lists
```
IsResizable
```
gripper for popup resize
```
IsCheckable
```
/
```
IsChecked
```
for checkable items
```
MoreItems
```
for custom UIElement additions
```
IsMoreItemsIconTrayEnabled
```

📄 阅读： references/dropdown-menu-items.md

```
DropDownMenuGroup
```
作为容器元素
声明式
```
DropDownMenuItem
```
（带Header和Icon）
```
IconBarEnabled
```
（垂直图标条）
长项目列表的
```
ScrollBarVisibility
```
弹出框调整大小的
```
IsResizable
```
抓手
可选项目的
```
IsCheckable
```
/
```
IsChecked
```
添加自定义UIElement的
```
MoreItems
```
```
IsMoreItemsIconTrayEnabled
```

Data Binding

数据绑定

📄 Read: references/data-binding.md

Model and ViewModel pattern
Binding
```
DropDownMenuGroup.ItemsSource
```
```
ItemTemplate
```
with
```
DataTemplate
```
Binding
```
DropDownMenuItem.Command
```
from ViewModel via
```
x:Reference
```
Full MVVM example with
```
DelegateCommand<T>
```
When to use data binding vs declarative items

📄 阅读： references/data-binding.md

模型与视图模型模式
绑定
```
DropDownMenuGroup.ItemsSource
```
带
```
DataTemplate
```
的
```
ItemTemplate
```
通过
```
x:Reference
```
绑定ViewModel中的
```
DropDownMenuItem.Command
```
使用
```
DelegateCommand<T>
```
的完整MVVM示例
何时使用数据绑定 vs 声明式项目

Command Binding

命令绑定

📄 Read: references/command-binding.md

```
Command
```
and
```
CommandParameter
```
on
```
DropDownMenuItem
```
```
DelegateCommand<T>
```
implementation
```
CanExecute
```
and
```
CanPerformAction
```
toggle pattern
Binding to ViewModel commands in declarative XAML
Gotchas: scoping commands in DataTemplates

📄 阅读： references/command-binding.md

```
DropDownMenuItem
```
上的
```
Command
```
和
```
CommandParameter
```
```
DelegateCommand<T>
```
实现
```
CanExecute
```
和
```
CanPerformAction
```
切换模式
在声明式XAML中绑定到ViewModel命令
注意事项：DataTemplates中的命令作用域

Dropdown Behavior

下拉行为

📄 Read: references/dropdown-behavior.md

```
DropDirection
```
enum: Left, Right, BottomLeft, BottomRight, TopLeft, TopRight
Default direction is
```
BottomLeft
```
```
IsMultiLine
```
for wrapping long labels (Large mode only)
```
FlowDirection
```
for RTL support

📄 阅读： references/dropdown-behavior.md

```
DropDirection
```
枚举：Left、Right、BottomLeft、BottomRight、TopLeft、TopRight
默认方向为
```
BottomLeft
```
长标签换行的
```
IsMultiLine
```
（仅大模式）
支持RTL的
```
FlowDirection
```

Events & Appearance

事件与外观

📄 Read: references/events-and-appearance.md

```
DropDownOpening
```
/
```
DropDownOpened
```
events (cancel support)
```
DropDownClosing
```
/
```
DropDownClosed
```
events
```
DropDownMenuItem.Click
```
event
```
DropDownMenuItem.IsCheckedChanged
```
event
Editing control template in Expression Blend or Visual Studio
SfSkinManager themes + ThemeStudio custom themes

📄 阅读： references/events-and-appearance.md

```
DropDownOpening
```
/
```
DropDownOpened
```
事件（支持取消）
```
DropDownClosing
```
/
```
DropDownClosed
```
事件
```
DropDownMenuItem.Click
```
事件
```
DropDownMenuItem.IsCheckedChanged
```
事件
在Expression Blend或Visual Studio中编辑控件模板
SfSkinManager主题 + ThemeStudio自定义主题