Image in ToggleButton not changing

Question

I am currently working on a WPF application which contains a datagrid with 3 columns Closed,Checked and Active as shown in the XAML code and they are linked to 3 boolean DataObject members(IsClosed,IsCheck and IsActive) respectively. On clicking each of the togglebuttons, the bound boolean properties must change and based on the boolean data, the images of togglebuttons must change. The data is getting changed at the backend code on clicking the respective togglebuttons but the DataTrigger is not working.

XAML CODE:

        <DataGrid.Columns>
            ...
            <DataGridTemplateColumn Header="Closed" Width="60">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ToggleButton IsChecked="{Binding Path=IsClosed, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      IsEnabled="{Binding Path=IsCheck, Converter={StaticResource toggleButtonEnableConverter}}">
                            <ToggleButton.Content>
                                <Image>
                                    <Image.Style>
                                        <Style TargetType="Image">
                                            <Setter Property="Source" Value="{Binding Path=IsClosed, Converter={StaticResource imageConverter}}"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=IsClosed, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="true">
                                                    <Setter Property="Source" Value="{Binding Path=IsClosed, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding Path=IsClosed, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="false">
                                                    <Setter Property="Source" Value="{Binding Path=IsClosed, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </ToggleButton.Content>

                        </ToggleButton>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Header="Checked" Width="60">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ToggleButton Visibility="{Binding Path=IsClosed, 
                                                           Converter={StaticResource ResourceKey=booleanToVisibilityConverter}}" 
                                      IsChecked="{Binding Path=IsCheck, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      IsEnabled="{Binding Path=IsActive, Converter={StaticResource toggleButtonEnableConverter}}">
                            <ToggleButton.Content>
                                <Image>
                                    <Image.Style>
                                        <Style TargetType="Image">
                                            <Setter Property="Source" Value="{Binding Path=IsCheck, Converter={StaticResource imageConverter}}"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=IsCheck, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="true">
                                                    <Setter Property="Source" Value="{Binding Path=IsCheck, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding Path=IsCheck, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="false">
                                                    <Setter Property="Source" Value="{Binding Path=IsCheck, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </ToggleButton.Content>
                        </ToggleButton>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Header="Active" Width="60">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ToggleButton Visibility="{Binding Path=IsCheck, 
                                                            Converter={StaticResource ResourceKey=booleanToVisibilityConverter}}"
                                      IsChecked="{Binding Path=IsActive, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                            <ToggleButton.Content>
                                <Image>
                                    <Image.Style>
                                        <Style TargetType="Image">
                                            <Setter Property="Source" Value="{Binding Path=IsActive, Converter={StaticResource imageConverter}}"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=IsActive, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="true">
                                                    <Setter Property="Source" Value="{Binding Path=IsActive, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding Path=IsActive, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="false">
                                                    <Setter Property="Source" Value="{Binding Path=IsActive, Converter={StaticResource imageConverter}}"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </ToggleButton.Content>
                        </ToggleButton>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        </DataGrid.Columns>
    </DataGrid>

Converters:

public class ImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (value is bool && ((bool)value)) ? Images.TickImage : Images.CrossImage; 
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

public class Images
    {
        public static BitmapImage TickImage = new BitmapImage(new Uri("K:\\projects\\ContentSets\\Ownership\\SOMA\\Staging\\Utility\\Images\\icon_tick.gif", UriKind.Absolute));
        public static BitmapImage CrossImage = new BitmapImage(new Uri("K:\\projects\\ContentSets\\Ownership\\SOMA\\Staging\\Utility\\Images\\icon_cross.gif", UriKind.Absolute));

    }

public class ToggleButtonEnableConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return !(bool)value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

The images are loaded as per the boolean values on startup(so no issue with the image source), but the images do change on click of ToggleButton (though the bound properties are affected).

Answer 1

Update your DataTrigger binding to properties of Togglebutton like IsChecked, IsEnabled etc instead of context properties:

  <DataTrigger Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="true">
    <Setter Property="Source" Value="{Binding Path=IsClosed, Converter={StaticResource imageConverter}}"/>
  </DataTrigger>
  <DataTrigger Binding="{Binding Path=IsChecked, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}" Value="false">
      <Setter Property="Source" Value="{Binding Path=IsClosed, Converter={StaticResource imageConverter}}"/>
   </DataTrigger>

Also I dont understand why do you need triggers.. you have not changed anything in trigger... The binding you did in the trigger setter is same as default setter... so it should work without even triggers