Intersoft ClientUI Documentation
How-to: Handle Tool Bar Command using MVVM Pattern
| Intersoft ClientUI 8 > ClientUI Fundamentals > MVVM Pattern Overview > MVVM Pattern How-to Topics > How-to: Handle Tool Bar Command using MVVM Pattern |
This example shows how to create DelegateCommand in the ViewModel and bind it to the Command property of the UXToolBarButton in the View.
The following example shows how to create the EditorViewModel and define the DelegateCommand for NewAction and SaveAction.
In the sample, there are two UXToolBarButton, New and Save. The New button is the default UXToolBarButton, while the Save button is a custom UXToolBarButton with the ButtonType property is set to DropDownButton. The UXMenuItem is used in the Save button to create the dropdown menu. You create two UXMenuItem, Save and SaveAs as the dropdown menu items.
The New button is bound to the NewAction DelegateCommand, while the Save and SaveAs menu items are bound to the SaveAction DelegateCommand, but with different CommandParameter. The CommandParameter is used to pass a custom data or parameter to the SaveCommandAction method, which differentiates the action based on the given parameter. The SaveCommandAction is the method that will be triggered when the Save or SaveAs menu item is clicked.
 |
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:UXToolBar HorizontalAlignment="Left" Margin="10,10,0,0" Name="uXToolBar1" VerticalAlignment="Top"> <Intersoft:UXToolGroup> <Intersoft:UXToolBarButton Content="New" Command="{Binding NewAction}"/> <Intersoft:UXToolBarButton Content="Save" ButtonType="DropdownButton"> <Intersoft:UXMenuItem Header="Save" Command="{Binding SaveAction}" CommandParameter="SaveAction"/> <Intersoft:UXMenuItem Header="SaveAs" Command="{Binding SaveAction}" CommandParameter="SaveAsAction"/> </Intersoft:UXToolBarButton> </Intersoft:UXToolGroup> </Intersoft:UXToolBar> </Grid> |
|
| C# |
Copy Code
|
|---|---|
public class EditorViewModel : ViewModelBase { public EditorViewModel() { this.NewAction = new DelegateCommand(NewCommandAction, CanNewAction); this.SaveAction = new DelegateCommand(SaveCommandAction, CanSaveAction); } public DelegateCommand NewAction { get; private set; } public DelegateCommand SaveAction { get; private set; } private bool CanNewAction(object parameter) { //this method validate whether or not the New ToolBarButton is active //In this sample, I will keep the New ToolBarButton to be always active return true; } private bool CanSaveAction(object parameter) { //this method validate whether or not the Save and Save As UXMenuItem is active //In this sample, I will keep the Save and Save As to be always active return true; } private void NewCommandAction(object parameter) { //this method will be triggered when the New ToolBarButton is clicked MessageBoxServiceProvider.Standalone = true; MessageBoxServiceProvider.Show("Execute New Action", "Information", Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null); } private void SaveCommandAction(object parameter) { //this method will be triggered when the Save or Save As UXMenuItem is clicked //the parameter value is get from the CommandParameter value of Save or Save As UXMenuItem MessageBoxServiceProvider.Standalone = true; string actionInformation = ""; if (parameter.ToString() == "SaveAction") actionInformation = "Execute Save Action"; else if (parameter.ToString() == "SaveAsAction") actionInformation = "Execute Save As Action"; MessageBoxServiceProvider.Show(actionInformation, "Information", Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null); } } |
|