custom command on wpf

Question

I have read a few blogs regarding how to hook custom command to xam but I am still fuzzy on how to implement it using my own sample. There must be something I have missed along the line and was not aware of.

I would like to try to create a class that contains my commands that I can reuse them, then try to hook it to my button on xaml.

This is my command class:

namespace TestCommand.Commands
{
    public static class TestButtonCommand
    {
        static RoutedUICommand addFruit = 
            new RoutedUICommand("Add new fruit name", "AddFruit", typeof(TestButtonCommand));
        public static RoutedUICommand AddFruit
        {
            get
            {
                return addFruit;
            }
        }
    }
}

My Xaml class:

<Window x:Class="TestCommand.MainWindow"
                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"
                xmlns:local="clr-namespace:TestCommand"
                xmlns:MyCommands='clr-namespace:TestCommand.Commands'
                mc:Ignorable="d"
                Title="MainWindow"
                Height="350"
                Width="525">
    <StackPanel Orientation='Vertical'>
        <Button x:Name='AddFruit'
                        Height='auto'
                        Width='auto'
                        HorizontalAlignment='Center'
                        Content='Add New Fruit'
                        Margin='0,25,0,10'
                        Click='AddFruit_Click' />
        <Button x:Name='AddFruit2'
                        Height='auto'
                        Width='auto'
                        HorizontalAlignment='Center'
                        Content='Add New Fruit 2'
                        Margin='0,10,0,100'>
            <Button.CommandBindings>
                <CommandBinding Command='{x:Static MyCommands:TestButtonCommand.AddFruit}'
                                                Executed='CommandBinding_Executed'
                                                CanExecute='CommandBinding_CanExecute' />
            </Button.CommandBindings>
        </Button>
    </StackPanel>
</Window>

My code behind

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void AddFruit_Click(object sender, RoutedEventArgs e)
    {
        Fruits.Add("Durian", "Green");
    }

    private void CommandBinding_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        Fruits.Add("Durian", "Green");
    }

    private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
    {
        e.CanExecute = true;
    }
}

}

For the sake of comparison, the first button uses the traditional click event and I can see the event got fired and new fruit added but when I clicked the 2nd button, nothing happened. I must have not hooked it correctly. I would appreciate any hint, pointer of what was done incorrectly.

My Model classes are listed below:

namespace TestCommand.Models
{
    public class Fruit
    {
        public string FruitName { get; set; }
        public string FruitColor { get; set; }
        public bool Selected { get; set; }

    }
}

namespace TestCommand.Models
{
    public class Fruits
    {
        private static List<Fruit> _fruitList;
        public static void Add(string f, string c)
        {
            _fruitList.Add(new Fruit
            {
                FruitName = f,
                FruitColor = c,
                Selected = false
            });
        }
        static Fruits()
        {
            _fruitList = new List<Fruit>();
            _fruitList.Add(new Fruit
            {
                FruitName = "Mango",
                FruitColor = "Yellow",
                Selected = false
            });
            _fruitList.Add(new Fruit
            {
                FruitName = "Mango",
                FruitColor = "Yellow",
                Selected = false
            });
            _fruitList.Add(new Fruit
            {
                FruitName = "Water Melon",
                FruitColor = "Green",
                Selected = false
            });
            _fruitList.Add(new Fruit
            {
                FruitName = "Apple",
                FruitColor = "Red",
                Selected = false
            });
            _fruitList.Add(new Fruit
            {
                FruitName = "Banana",
                FruitColor = "Yellow",
                Selected = false
            });
            _fruitList.Add(new Fruit
            {
                FruitName = "Orange",
                FruitColor = "Orange",
                Selected = false
            });
        }
        public static List<Fruit> getAllFruit(bool bSelected = false)
        {
            var result = (bSelected ?
                                        _fruitList.Where(x => x.Selected = true).ToList<Fruit>()
                                        : _fruitList.ToList<Fruit>());
            return result;
        }
    }
}

Answer 1

Try to set the Command property of the Button to your command:

<Button x:Name='AddFruit2'
        Height='auto'
        Width='auto'
        HorizontalAlignment='Center'
        Content='Add New Fruit 2'
        Margin='0,10,0,100'
        Command="{x:Static MyCommands:TestButtonCommand.AddFruit}">
    <Button.CommandBindings>
        <CommandBinding Command='{x:Static MyCommands:TestButtonCommand.AddFruit}'
                        Executed='CommandBinding_Executed'
                        CanExecute='CommandBinding_CanExecute' />
    </Button.CommandBindings>
</Button>