Loading...
Loading...
Implement Syncfusion WPF SplitButton (SplitButtonAdv) with dropdown menus, command binding, and data binding. This skill applies whenever a user mentions WPF splitbutton, dropdown buttons with menus, the SplitButtonAdv control, implementing splitbutton patterns, button–menu combinations, or scenarios that require a button with both a default action and a dropdown menu. It is also relevant for WPF command-enabled splitbutton, MVVM-based splitbutton implementations, data‑bound dropdown menus, or any situation involving buttons that offer selectable dropdown items.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-splitbuttonSplitButtonAdvSplitButtonAdv
├── Primary Button (default action)
│ ├── Label (text)
│ ├── Icon (SmallIcon/LargeIcon/IconTemplate)
│ └── Command (ICommand binding)
└── Dropdown Arrow (opens menu)
└── DropDownMenuGroup (container)
├── DropDownMenuItem (standard items)
│ ├── Header (text)
│ ├── Icon (image)
│ ├── IsCheckable (checkbox support)
│ └── Command (ICommand binding)
└── MoreItems (custom UIElement items)<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
<Grid>
<syncfusion:SplitButtonAdv Label="Colors"
SizeMode="Normal"
Click="SplitButton_Click">
<syncfusion:DropDownMenuGroup>
<syncfusion:DropDownMenuItem Header="Red"
Click="MenuItem_Click"/>
<syncfusion:DropDownMenuItem Header="Green"
Click="MenuItem_Click"/>
<syncfusion:DropDownMenuItem Header="Blue"
Click="MenuItem_Click"/>
</syncfusion:DropDownMenuGroup>
</syncfusion:SplitButtonAdv>
</Grid>
</Window>using Syncfusion.Windows.Tools.Controls;
private void SplitButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Primary action executed");
}
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
var menuItem = sender as DropDownMenuItem;
MessageBox.Show($"Selected: {menuItem.Header}");
}<syncfusion:SplitButtonAdv Label="Country" SizeMode="Normal">
<syncfusion:DropDownMenuGroup ItemsSource="{Binding Countries}">
<syncfusion:DropDownMenuGroup.ItemTemplate>
<DataTemplate>
<syncfusion:DropDownMenuItem
Header="{Binding Name}"
Command="{Binding DataContext.SelectCountryCommand,
RelativeSource={RelativeSource AncestorType=syncfusion:SplitButtonAdv}}"
CommandParameter="{Binding}">
<syncfusion:DropDownMenuItem.Icon>
<Image Source="{Binding FlagIcon}"/>
</syncfusion:DropDownMenuItem.Icon>
</syncfusion:DropDownMenuItem>
</DataTemplate>
</syncfusion:DropDownMenuGroup.ItemTemplate>
</syncfusion:DropDownMenuGroup>
</syncfusion:SplitButtonAdv>public class ViewModel : NotificationObject
{
private bool _canPerformAction = true;
public DelegateCommand<object> ClickCommand { get; set; }
public bool CanPerformAction
{
get => _canPerformAction;
set
{
_canPerformAction = value;
ClickCommand.RaiseCanExecuteChanged();
RaisePropertyChanged(nameof(CanPerformAction));
}
}
public ViewModel()
{
ClickCommand = new DelegateCommand<object>(
ExecuteAction,
CanExecuteAction);
}
private bool CanExecuteAction(object parameter) => CanPerformAction;
private void ExecuteAction(object parameter)
{
MessageBox.Show($"Action executed: {parameter}");
}
}<syncfusion:SplitButtonAdv Label="Action"
Command="{Binding ClickCommand}"
CommandParameter="Primary Action">
<!-- Dropdown items -->
</syncfusion:SplitButtonAdv><Window.Resources>
<DataTemplate x:Key="customIconTemplate">
<Grid Width="32" Height="32">
<Path Data="M10,0 L20,10 L10,20 L0,10 Z"
Fill="#FF3A3A38"
Stretch="Fill"/>
</Grid>
</DataTemplate>
</Window.Resources>
<syncfusion:SplitButtonAdv Label="Custom Icon"
SizeMode="Large"
IconTemplate="{StaticResource customIconTemplate}">
<!-- Dropdown items -->
</syncfusion:SplitButtonAdv><syncfusion:SplitButtonAdv Label="Options" SizeMode="Normal">
<syncfusion:DropDownMenuGroup MaxHeight="200"
ScrollBarVisibility="Visible"
IconBarEnabled="True">
<syncfusion:DropDownMenuItem Header="Option 1"
IsCheckable="True"
IsChecked="True"/>
<syncfusion:DropDownMenuItem Header="Option 2"
IsCheckable="True"/>
<syncfusion:DropDownMenuItem Header="Option 3"
IsCheckable="True"/>
<!-- More items... -->
</syncfusion:DropDownMenuGroup>
</syncfusion:SplitButtonAdv>| Property | Type | Description |
|---|---|---|
| string | Text displayed on the button |
| SizeMode | Size mode: Small, Normal, or Large |
| ImageSource | Icon for Small/Normal modes |
| ImageSource | Icon for Large mode |
| DataTemplate | Custom icon template (overrides SmallIcon/LargeIcon) |
| DataTemplateSelector | Dynamic icon template selection |
| double | Width of the icon |
| double | Height of the icon |
| ICommand | Command for primary button click |
| object | Parameter passed to Command |
| DropDirection | Popup position: Left, Right, BottomLeft, etc. |
| bool | Enable multiline text in Large mode |
| bool | Activate button with Enter key |
| Property | Type | Description |
|---|---|---|
| IEnumerable | Data source for menu items |
| DataTemplate | Template for menu item rendering |
| bool | Show/hide vertical icon bar |
| ScrollBarVisibility | Scrollbar visibility for long lists |
| bool | Enable gripper for resizing popup |
| double | Maximum height of dropdown popup |
| ObservableCollection<UIElement> | Custom items at bottom of menu |
| bool | Icon bar for custom items |
| Property | Type | Description |
|---|---|---|
| object | Text or content of menu item |
| object | Icon displayed before header |
| bool | Enable checkbox for item |
| bool | Checked state of item |
| ICommand | Command for menu item click |
| object | Parameter passed to Command |