trigger button click inside datatemplate

See more:

C#

WPF

ListBox

DataTemplate

I am having problem triggering button which place inside a Datatemplate which is designed for render listboxitems.

listboxitem has a data source as shown

public class WordListItem : INotifyPropertyChanged
    {

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

        private string word;
        private int count;

        public string Word
        {
            get { return word; }
            set 
            {   
                if(value != word)
                    word = value;
                NotifyPropertyChanged("Word");
            }
        }

        public int Count
        {
            get { return count; }
            set 
            {
                if (value != count)
                    count = value;
                NotifyPropertyChanged("Count");
            }
        }

       
}

and I have a datatemplate to render above data as listboxitem :

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:M="clr-namespace:DictUI.Model"
                    xmlns:VM="clr-namespace:DictUI.ViewModel"
                    xmlns:V="clr-namespace:DictUI.Views" 
                    >

<DataTemplate x:Key="ListItemStyle" DataType="{x:Type M:WordListItem}" >
                <Border BorderThickness="1" BorderBrush="Gray" 
                     Padding="7" Name="border" Margin="3">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!--star mark-->
                    <Polygon Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
                             Fill="Yellow" Stroke="Black" StrokeThickness="1"
                             StrokeLineJoin="Round" Width="20" Height="20"
                             Stretch="Fill"
                             Points="9,2 11,7 17,7 12,10 14,15 9,12 4,15 6,10 1,7 7,7"
                             Visibility="Hidden" Name="star"/>
                    <!-- word-->
                    <TextBlock Grid.Row="0" Grid.Column="1" Margin="0,0,8,0"
                                 Name="Result_word"
                                 Text="{Binding Path=Word}"
                                 />
                    <!--infor abour that word, display below word-->
                    <StackPanel Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
                        <TextBlock Text="Times" />
                        <TextBlock Text="{Binding Path=Count}" Name="TotalChecking"/>


                    <Button  Command="{Binding Path= ButtonClick}">
                    </Button>


                    <CheckBox Content="TestCH" removed="AliceBlue"/>
                    </StackPanel>
                </Grid>
            </Border>
</DataTemplate>

  

</ResourceDictionary>

as show in code, the datatemplate bound to attributes of WordListItem to render items in listbox. but I want to bind the command of Button ( which place in datatemplate ) to Viewmodel, its code is below:

public class WordListItemViewModel : ViewModelBase
    {

        private ObservableCollection<WordListItem> _WordItems;

        public WordListItemViewModel()
        {
            if (_WordItems == null)
                _WordItems = new ObservableCollection<WordListItem>();

        }

        public WordListItemViewModel(ObservableCollection<WordListItem> _wordItem)
        {
            if (_wordItem == null)
                throw new Exception("word item is Null");
            if (_WordItems == null)
                _WordItems = new ObservableCollection<WordListItem>();
            _WordItems = _wordItem;

           _ButtonClick = new RelayCommand(param =>this.BtClick());
        }

        public ObservableCollection<WordListItem> WordItmes
        {
            get { return _WordItems; }
            set
            {
                if (value != _WordItems)
                    _WordItems = value;
                NotifyPropertyChanged("WordItmes");
            }
        }

        private static RelayCommand _ButtonClick;
        public  ICommand ButtonClick
        {
            get
            {
                if (_ButtonClick == null)
                    _ButtonClick = new RelayCommand(param => this.BtClick(),param=>this.CanClick);
                return _ButtonClick;
            }
        }

        private void BtClick()
        {
            MessageBox.Show("button inside ListItem is clicked!");
        }

        private bool CanClick
        {
            get { return true; }
        }
}

untill now DataTemplate render items well, but I am having problem to binding ButtonClick (which inside ViewModel) to button (which inside datatemplate).I think it is not good approach to binding button to command inside WordListItem, I should bind it to command inside ViewModel.

is that so difficult?

could anyone help me with this? I am a beginner in VMMV, so please help me with detailed answer or articles.

thanks in advance.