Change wpf data grid row background color when checkbox is checked

Question

I am trying to change the color of my data grid row when the checkbox of the given row is checked, and when unchecked it should reset the value to the previous one.

I am using MVVM to achieve the above mentioned functionality.

My XAML CODE :-

 <Window.Resources>
        <Style x:Key="RowStyle"  TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding DataContext.IsChecked, UpdateSourceTrigger=PropertyChanged}" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

 </Window.Resources>

<Grid>
      <DataGrid Name="lbUsers" ItemsSource="{Binding  Data}" CanUserAddRows="False" Grid.Column="1" Grid.Row="1"  SelectedIndex="{Binding SelectionIndexChange, Mode=TwoWay}" AutoGenerateColumns="False">

            <DataGrid.Columns>

                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox Width="45" Height="20" Command="{Binding ElementName=lbUsers,Path=DataContext.IsChecked}" ></CheckBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>

        </DataGrid>
</Grid>

Given below is view model code :

        public ViewModel ()
        {
            Data = new ObservableCollection<CommonData>
            {

            };

        }



    private ObservableCollection<CommonData> _data;
        public ObservableCollection<CommonData> Data
        {
            get
            {
                if (_data == null)
                {
                    _data = new ObservableCollection<CommonData>()
                    {

                    };

                }

                return _data;
            }
            set
            {
                if (value != this._data)
                {
                    this._data = value;

                    NotifyPropertyChanged("Data");
                }
            }
        }



        private bool _isChecked;
        public bool IsChecked
        {
            get { return _isChecked; }
            set { this._isChecked = value; NotifyPropertyChanged("IsChecked"); }
        } 

Please let me know what wrong am i doing to get the given functionality working.

Thanks in advance, in case of missing information please let me know.

Answer 1

A couple things:

You've assigned an x:Key to the style, but are not using it on the DataGrid . Remove the key to make it the default style for all DataGridRow , or add this to the grid:

RowStyle="{StaticResource RowStyle}"

Within the DataTrigger binding, you will also need add

ElementName=lbUsers

Additionally, your Checkbox is not bound properly -- this is not done through a Command . You will need to change

Command={Binding...

To

IsChecked={Binding...