Question

I am currently doing a test with ICommand and I wonder why ICommand does not fire with button in ListBox.ItemTemplate. But when used outside the template, it works.

here’s the window xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1" x:Class="WpfApplication1.Window2"
        Title="Window2" Height="300" Width="300">
    <Window.DataContext>
        <local:W2VM/>
    </Window.DataContext>

    <Grid>
        <ListBox x:Name="listHistory" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemsSource="{Binding History}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="{Binding ''}" />
                        <Button 
                            Grid.Column="1" 
                            HorizontalAlignment="Right" 
                            x:Uid="btnDeleteHistoryItem" 
                            x:Name="btnDeleteHistoryItem" 
                            Content="r" 
                            FontFamily="Marlett" 
                            Visibility="Hidden" Command="{Binding MeClick}" 

                            />
                    </Grid>

                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" TargetName="btnDeleteHistoryItem" Value="Visible" />
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <Button Content=" exit " VerticalAlignment="Bottom" Command="{Binding ExitCommand}" />
    </Grid>
</Window>

here’s the complete ViewModel code

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();
        }
    }

    public class W2VM : ViewModelBase
    {
        public List<string> _History = new List<string>();
        public List<string> History
        {
            get { return this._History; }
        }

        public ICommand MeClick
        {
            get;
            internal set;
        }

        public ICommand ExitCommand
        {
            get;
            internal set;
        }

        public W2VM()
        {
            this.History.AddRange(new string[] {
                "jayson", "hello", "world"
            });

            this.MeClick = new RelayCommand(Test);
            this.ExitCommand = new RelayCommand(Exit);
        }

        void Exit()
        {
            Application.Current.Shutdown();
        }

        void Test()
        {
            Debug.WriteLine("hello world");

            MessageBox.Show("do something incredible");
        }
    }
}

Test() does not fire

---

ok I got it working..

<Window.Resources>
    <me:W2VM x:Key="local" />
</Window.Resources>

instead of

<Window.DataContext>
    <local:W2VM/>
</Window.DataContext>

and my window grid

<Grid DataContext="{StaticResource local}">
    <ListBox x:Name="listHistory" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemsSource="{Binding History}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding ''}" />
                    <Button 
                        Grid.Column="1" 
                        HorizontalAlignment="Right" 
                        x:Uid="btnDeleteHistoryItem" 
                        x:Name="btnDeleteHistoryItem" 
                        Content="r" 
                        FontFamily="Marlett" 
                        Visibility="Hidden" Command="{Binding MeClick, Source={StaticResource local}}"  />
                </Grid>

                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Visibility" TargetName="btnDeleteHistoryItem" Value="Visible" />
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <Button Content=" exit " VerticalAlignment="Bottom" Command="{Binding ExitCommand}" />
</Grid>

now this will raise another question.

How would I know which ListViewItem was clicked when the btnDeleteHistoryItem command was just routed?

Answer 1

Are you using the relaycommand of mvvm-light?
I use command parameters to pass information to the command method:

<Button 
                        Grid.Column="1" 
                        HorizontalAlignment="Right" 
                        x:Uid="btnDeleteHistoryItem" 
                        x:Name="btnDeleteHistoryItem" 
                        Content="r" 
                        FontFamily="Marlett" 
                        Visibility="Hidden" Command="{Binding MeClick, Source=StaticResource local}}" 
                        CommandParameter="YourUniqueIdentifyingVariable"  />

and then in your view model:

public RelayCommand<string> MeClick{
    get { return _MyClick; }
    private set { _MyClick = value; }
}

public New()
{

    MeClick = new RelayCommand<string>(MySub, MySubIsEnabled);
}

private void MySub(string sParam)
{
    //do stuff here, YourUniqueIdentifyingVariable is sParam
}

private bool MySubIsEnabled(string sParam)
{
    return true;
}

you can bind “YourUniqueIdentifyingVariable” to the ID of the record or some other value that you can process in your command method

Code is untested but should work