WPF DataGridTemplateColumn background color not changing on datagrid row selected

Question

I have below WPF Toolkit DataGrid. I have created a custom column using DataGridTemplateColumn which contains a toggle button (without text).

When datagrid row is selected, toggle button background color is correctly changed with the same color as row selection but the cell's background is not changing the color, it remains white. Why?

This is the appearance of the DataGridTemplateColumn column before and after row selection.

Before:

After:

Here the code:

<UserControl.Resources>        
    <ResourceDictionary>

        <!-- Body content datagrid cell vertical centering -->
        <Style x:Key="Body_Content_DataGrid_Centering" TargetType="{x:Type dg:DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type dg:DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</UserControl.Resources>

<!-- Other Stuff -->

<dg:DataGrid x:Name="MyDg"   
             ItemsSource="{Binding Path=ListOfItems}"
             Margin="3 5 5 5"
             AutoGenerateColumns="False"
             CanUserAddRows="False" CanUserResizeRows="False"
             SelectionMode="Single" 
             SelectedItem="{Binding Path=MySelectedItem}"
             ColumnWidth="*"
             AlternationCount="2" 
             Focusable="False" SelectionUnit="FullRow"
             CellStyle="{StaticResource Body_Content_DataGrid_Centering}">

    <dg:DataGrid.Columns>

        <dg:DataGridTemplateColumn Header="Selection" Width="Auto" CanUserResize="False">
            <dg:DataGridTemplateColumn.CellStyle>
                <Style TargetType="dg:DataGridCell">
                    <Setter Property="HorizontalAlignment"  Value="Center"/>
                </Style>
            </dg:DataGridTemplateColumn.CellStyle>
            <dg:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ToggleButton Content="" IsChecked="{Binding Path=IsSelected}">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <StackPanel Orientation="Horizontal">
                                    <Image MaxWidth="32" MaxHeight="32">
                                        <Image.Style>
                                            <Style>
                                                <Setter Property="Image.Source" Value="/My.Graphics;component/PNG/Unchecked.png" />
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding IsChecked, 
                                                                           RelativeSource={RelativeSource  Mode=FindAncestor, 
                                                                                           AncestorType={x:Type ToggleButton}}}" Value="True">
                                                        <Setter Property="Image.Source" Value="/My.Graphics;component/PNG/Checked.png" />
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Image.Style>
                                    </Image>
                                 <!--   <ContentPresenter Content="{TemplateBinding Content}" Margin="0,0,0,0" />-->
                                </StackPanel>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                </DataTemplate>
            </dg:DataGridTemplateColumn.CellTemplate>
        </dg:DataGridTemplateColumn>
     </dg:DataGrid.Columns>
</dg:DataGrid>

Answer 1

Finally, I have solved it, the problem was in the style declaration for the DataGridTemplateColumn.

Despite setting toggle button background to Transparent it was not working as Raviraj suggested.

Finally the solution was to change the piece of code regarding to the DataGridTemplateColumn:

<dg:DataGridTemplateColumn.CellStyle>
    <Style TargetType="dg:DataGridCell">
        <Setter Property="HorizontalAlignment"  Value="Center"/>
    </Style>
</dg:DataGridTemplateColumn.CellStyle>

By this one:

<dg:DataGridTemplateColumn.CellStyle>
    <Style TargetType="dg:DataGridCell">                                    
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type dg:DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">                                                   
                        <ContentPresenter HorizontalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</dg:DataGridTemplateColumn.CellStyle>

Doing this is working.

Below the result.

Before row selection:

After row selection: