Intersoft ClientUI Documentation
How-to: Create Command with Dropdown Menu using Split Button
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Controls > Control Library > Button Controls Overview > UXSplitButton > How-to: Create Command with Dropdown Menu using Split Button

Glossary Item Box

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.

Example

Description

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.

Code

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

See Also

©2012. All Rights Reserved.