Bind command in WPF using MVVM

Question

I am learning MVVM and WPF. I have a xaml file in my project and which has a simple click event handler in the code behind.

Now I want to do the same in MVVM. I read a lot of articles and also read many answers in sof. But still unable to do this.

Can anyone please give a simple example in which a button click event is done in MVVM.

Edit

<Window x:Class="WhiteBalance.BaseCalWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:uc="clr-namespace:NumberUpDownControl;assembly=NumberUpDownControl"
        xmlns:viewn="clr-namespace:WhiteBalance.ViewModels"
        Title="RefImgSettingWindow"  Height="900" Width="1000" ResizeMode="NoResize" 
        BorderThickness="4">
    <Window.Resources>
        <viewn:DashBoardViewModel x:Key="demokey"></viewn:DashBoardViewModel>
    </Window.Resources>
    <Grid x:Name="gdParent" DataContext="{StaticResource demokey}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="490" />
            <ColumnDefinition Width="488*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="300" />
            <RowDefinition Height="300" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0">
            <Label Content="{Binding Path=NAME,Mode=TwoWay}" Height="28" Name="lblTest" />
            <Button Content="Capture" Height="23" Name="btnCapture" Width="75" Command="{Binding Path=SaveCommand}"
                             Canvas.Left="94" Canvas.Top="254" />

        </StackPanel>
    </Grid>
</Window>

namespace WhiteBalance.ViewModels
{
    public class DashBoardViewModel: ObservableObject
    {
        private string _name = "dsqdasd";

        public string NAME
        {
            get { return _name; }
            set { _name = value; }
        }

        public ICommand SaveCommand
        {
            get;
            set;
        }

        private bool CanExecuteSaveCommand()
        {
            return true;    // !string.IsNullOrEmpty(LastName);
        }

        private void CreateSaveCommand()
        {
            SaveCommand = new RelayCommand(SaveExecute, CanExecuteSaveCommand);
        }

        public void SaveExecute()
        {
            //Person.Save(_newPerson);
            NAME = "Changed Name";
        }

        public DashBoardViewModel()
        {
            //objModel.TestText = "This will change";
            NAME = "TestName";
        }
    }
}

Thanks in advance.

Is it mandatory to use MVVM framework? I am not aware of any framework. The only thing I got is I need to use ICommand but how to use this and what changes is needed in ViewModel, I don't know. — Narendra
– Narendra, Commented May 1, 2013 at 8:28
No, but it helps A LOT, I'd recommend MVVM Light galasoft.ch/mvvm — D.Rosado
– D.Rosado, Commented May 1, 2013 at 8:30

Community · Accepted Answer · 2017-05-23 12:01:59Z

28

You can bind the Command property of the button to any property that returns ICommand. Prism implements a nice convenient command called DelegateCommand that is very easy to use (here is a knock-off of it):

public ICommand MyButtonClickCommand 
{
    get { return new DelegateCommand<object>(FuncToCall, FuncToEvaluate); }
}

private void FuncToCall(object context)
{
    //this is called when the button is clicked
}

private bool FuncToEvaluate(object context)
{
    //this is called to evaluate whether FuncToCall can be called
    //for example you can return true or false based on some validation logic
    return true;
}



<Button x:Name="myButton" Command="{Binding MyButtonClickCommand}" />

The CodeProject example How to use Commands in WPF has a very similar example with code that you can easily work through. The previous Stack Overflow question has an example using RoutedCommands that are statically bound to: How to bind Close command to a button, and How to bind WPF button to a command in ViewModelBase? has a slightly more advanced example.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered May 1, 2013 at 8:26

slugster

50k14 gold badges105 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Narendra Over a year ago

Thanks @slugster. Is DelegateCommand is a system defined class or do I need to create this? I am checking the links provided by you.

slugster Over a year ago

@Narendra It's defined in the Prism libraries, you just need to reference them, or look at the link to the knock-off version.

Narendra Over a year ago

I have added the recent changes in question. Can you please tell why it is not calling the required function?

slugster Over a year ago

@Narendra From what I can see you never call CreateSaveCommand() so the value of SaveCommand will be null.

CookiePolicy · Accepted Answer · 2019-10-09 09:00:18Z

5

Seeing a lot of answers implementing this ICommand interface, I suggest a simpler option, which is to use the built in System.Windows.Input

Here's an example:

Xaml View:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="SomeDialog"
    SizeToContent="WidthAndHeight"
    WindowStartupLocation="CenterOwner" 
    ResizeMode="CanResizeWithGrip">

    <StackPanel>
        <Button Width="Auto" Command="{Binding ClearCommand}" Content="Clear"/>
    </StackPanel>

</Window>

View Code behind:

using System.Windows;

public partial class SomeDialog : Window
{
    public SomeDialog()
    {
        var vm = new ViewModel();
        DataContext = vm;
        CommandBindings.AddRange(vm.Commands);
        InitializeComponent();
    }
 }

View model:

using System.Windows.Input;

public class ViewModel : ViewModelBase
{
    readonly CommandBindingCollection commands = new CommandBindingCollection();

    public static RoutedUICommand ClearCommand { get; set; } = new RoutedUICommand("Clear", "ClearCommand", typeof(ErrorDialog));

    public CommandBindingCollection Commands
    {
        get
        {
            commands.Add(new CommandBinding(ClearCommand, OnClearExecuted);
            return commands;
        }
    }

    void OnClearExecuted(object sender, ExecutedRoutedEventArgs e)
    {
        view.DialogResult = true; //Indicate things
        view.Close(); //Close the window
    }
}

Call like this:

public void OpenSomeDialog()
{
    var dialog = new SomeDialog() {Owner = Application.Current.MainWindow};
    bool? b = dialog.ShowDialog();
    if (b != null && (bool) b)
        //Do things
}

Now go dialog things.

answered Oct 9, 2019 at 9:00

CookiePolicy

511 silver badge2 bronze badges

2 Comments

StefanoV Over a year ago

Such a great answer. I upvoted and I'm using in my solution with the little improvement binding the button text to the RoutedUICommand.Text property: <Button Command="{Binding ClearCommand}" Content="{Binding ClearCommand.Text}"/>

Tony Vitabile Over a year ago

There's a problem with your example. In the ViewModel class, every time the Commands property is retrieved, a new CommandBinding for the ClearCommand will be added to the commands collection. The code should only add the CommandBinding to the collection once upon instantiation.

Collectives™ on Stack Overflow

Bind command in WPF using MVVM

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related