Intersoft ClientUI Documentation
How-to: Create Command with Dropdown Menu using Split Button
| Intersoft ClientUI 8 > ClientUI Controls > Control Library > Button Controls Overview > UXSplitButton > How-to: Create Command with Dropdown Menu using Split Button |
This example shows how to create drop down menu in UXSplitButton using UXMenuItem and create DelegateCommand in the ViewModel and bind it to UXMenuItem's Command in the View.
The following shows the EditorViewModel with SaveAction and SaveAsAction DelegateCommand.
In the sample, the UXSplitButton has two UXMenuItem, Save and SaveAs. The Save UXMenuItem bind to SaveAction DelegateCommand and SaveAs UXMenuItem bind to SaveAsAction DelegateCommand.
 |
To learn more about how to use MVVM pattern using ClientUI, see Walkthrough: Create Your First ClientUI Application using MVVM Pattern. |
| XAML |
Copy Code
|
|---|---|
<Intersoft:UXPage.Resources> <ViewModels:EditorViewModel x:Key="EditorViewModel"></ViewModels:EditorViewModel> </Intersoft:UXPage.Resources> <Grid x:Name="LayoutRoot" DataContext="{StaticResource EditorViewModel}"> <Intersoft:UXSplitButton Content="File" HorizontalAlignment="Left" Margin="10,10,0,0" Name="uXSplitButton1" VerticalAlignment="Top"> <Intersoft:UXMenuItem Header="Save" Command="{Binding SaveAction}" /> <Intersoft:UXMenuItem Header="Save As" Command="{Binding SaveAsAction}" /> </Intersoft:UXSplitButton> </Grid> |
|
| XAML |
Copy Code
|
|---|---|
public class EditorViewModel : ViewModelBase
{
public EditorViewModel()
{
this.SaveAction = new DelegateCommand(SaveCommandAction, CanSaveAction);
this.SaveAsAction = new DelegateCommand(SaveAsCommandAction, CanSaveAsAction);
}
public DelegateCommand SaveAction { get; private set; }
public DelegateCommand SaveAsAction { get; private set; }
private bool CanSaveAction(object parameter)
{
//this method validate whether or not the Save UXMenuItem is active
//In this sample, I will keep the Save to be always active
return true;
}
private bool CanSaveAsAction(object parameter)
{
//this method validate whether or not the Save As UXMenuItem is active
//In this sample, I will keep the Save As to be always active
return true;
}
private void SaveCommandAction(object parameter)
{
//this method will be triggered when the Save UXMenuItem is clicked
MessageBoxServiceProvider.Standalone = true;
MessageBoxServiceProvider.Show("Execute Save Action", "Information",
Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK,
Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information,
null);
}
private void SaveAsCommandAction(object parameter)
{
//this method will be triggered when the Save As UXMenuItem is clicked
MessageBoxServiceProvider.Standalone = true;
MessageBoxServiceProvider.Show("Execute Save As Action", "Information",
Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK,
Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information,
null);
}
} |
|