Question

I’m displaying a list of items in a WPF ListView, the items have a Quantity, Order Code and a Description. The columns are bound to fields in an ObservableCollection held in the View Model. This is all very standard and works as would expect. However, in the Quantity Column of the ListView I am adding two button + and -, the idea being that when they are pressed the value of the quantity either increments or decrements. The problem is that because these buttons are not bound to a field in the ObservableCollection I cannot get a link from the button being pressed in the List View to the record in the ObservableCollection. I have tried getting the item selected in the ListView but it is the button that gets selected when pressed and not the ListView item, I have also captured the item beneath the mouse pointer when the button is pressed but it could be pressed using the keyboard.

I feel there must be a (simple!) way of doing this but I can’t find it.

This is the XAML:

<ListViewName="AccessoriesContent" >
    <ListView.View>
        <GridView>
            <GridView.Columns>
                <GridViewColumn Header="Select">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel  Orientation="Horizontal" Name="QuantityStack">
                                <Button Name="SubtractAccessoryButton" Command="vx:DataCommands.SubtractAccessory" Content="-" />
                                <TextBox Name="QuantityTextBox" Text="{Binding Quantity, Mode=TwoWay}" />
                                <Button Name="AddAccessoryButton" Command="vx:DataCommands.AddAccessory" Content="+" />
                            </StackPanel>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Order Code"  DisplayMemberBinding="{Binding OrderCode}" />
                <GridViewColumn Header="Description"  DisplayMemberBinding="{Binding Description}" />
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>

The code behind:

    public MainWindow()
    {
        //CommandBindings.Add(
        InitializeComponent();
        AccessoryVM = new AccessoryViewModel();
        AccessoriesContent.ItemsSource = AccessoryVM.AccessoryCollection;
    }

And the ViewModel:

class AccessoryViewModel
{
    ObservableCollection<AccessoryData> _AccessoryCollection =
    new ObservableCollection<AccessoryData>();

    public ObservableCollection<AccessoryData> AccessoryCollection
    { get { return _AccessoryCollection; } }

    public void PopulateAccessories(string order_code)
    {
        // Read the data and populate AccessoryCollection
    }
}

public class AccessoryData : INotifyPropertyChanged
{
    private int _quantity;
    public int Quantity
    {
        get { return _quantity; }
        set
        {
            this._quantity = value;
            Notify("Quantity");
        }
    }
    public string OrderCode { get; set; }
    public string Description { get; set; }


    public event PropertyChangedEventHandler PropertyChanged;
    protected void Notify(string propName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Beyond this I have two methods SubtractAccessory and AddAccessory which are triggered by the buttons but I have yet to populate them with anything that would work.

Answer 1

Another option is to create a RelayCommand (see here). In this model you create an ICommand property on each of your items. You then set this property to a new RelayCommand that accepts a delegate you would like to be ran when that command is activated. So this could be a QuantityUp method and a QuantityDown method on your AccessoryData. Once you’ve got your ICommand property in place you simply bind to it like this, where QuantityUpCommand is your ICommand property.

 <GridViewColumn Header="" >
   <GridViewColumn.CellTemplate>
     <DataTemplate>
       <Button Height="15" Width="15" Content="+" Command="{Binding QuantityUpCommand}"/>
     </DataTemplate>
   </GridViewColumn.CellTemplate>
 </GridViewColumn>

The AccessoryData would look something like this

private RelayCommand _quantityUpCommand;
public ICommand QuantityUpCommand
{
    get
    {
        if (_quantityUpCommand == null)
        {
            _quantityUpCommand = new RelayCommand(QuantityUp);
        }
        return _quantityUpCommand;
    }
}

public void QuantityUp(object obj)
{
   Quantity++;
}

And RelayCommand looks something like this:

public class RelayCommand: ICommand
{
        #region Fields

        readonly Action<object> _execute;
        readonly Predicate<object> _canExecute;

        #endregion // Fields

        #region Constructors

        public RelayCommand(Action<object> execute)
            : this(execute, null)
        {
        }

        public RelayCommand(Action<object> execute, Predicate<object> canExecute)
        {
            if (execute == null)
                throw new ArgumentNullException("execute");

            _execute = execute;
            _canExecute = canExecute;
        }
        #endregion // Constructors

        #region ICommand Members

        public bool CanExecute(object parameter)
        {
            return _canExecute == null ? true : _canExecute(parameter);
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public void Execute(object parameter)
        {
            _execute(parameter);
        }

        #endregion // ICommand Members
}