WPF binding an image column in a datagrid through a converter, can't update image on property change

Question

I have this datagrid that is bound to an observablecollection of items, like this:

<DataGrid ItemsSource="{Binding Path=MyItems}">

Then, one of the columns is bound to a property of MyItems through a simple converter that switches the bool to an image path.

<DataGridTemplateColumn>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Image Name="DownloadedIcon" Source="{Binding Converter={StaticResource BoolToImageCheckmark}, ConverterParameter=IsDownloaded, UpdateSourceTrigger=PropertyChanged}" Width="16" Height="16" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

The property itself, IsDownloaded, fully implements INotifyPropertyChanged.

This works normally, as the data displayed matches the values of the collection, and the image column properly displays the image based on the property value.

Trouble comes when the property changes. If I bind a text column directly on the property, the content will update when the property is updated. However, the image column, which passes through a converter, will not receive the notification to update.

Any ideas?

Answer 1

Try this:

<DataTemplate>
      <Image Name="DownloadedIcon" Source="{Binding Path=IsDownloaded,Converter={StaticResource BoolToImageCheckmark}}" Width="16" Height="16" />
</DataTemplate>

Also place a breakpoint in the converter, in order to verify the binding is actually working. Note you'll get the bound value via the Value parameter in your converter.

Answer 2

values passed to ConverterParameter do not react to PropertyChanged notifications. Use Path instead of ConverterParameter in your binding, then refer to the value argument in the Convert() function in your converter instead of the parameter argument.

Answer 3

ConverterParameter is not a dependency property and therefore you cannot bind it to a property like you tried to do it. You should bind your image source to the IsDownloaded property and convert that:

<DataTemplate>
  <Image Name="DownloadedIcon" Source="{Binding Path=IsDownloaded,Converter={StaticResource BoolToImageCheckmark}}" Width="16" Height="16" />
</DataTemplate>

Answer 4

Problem is in your converter class.
Since your binding expression do not specify a “Path”, current DataContext use as the path and results in the DataContext object as your value in your converter class. Calculations are performing on this copy of datacontext object.
This approach will succeed at first time when binding being executed. As a result the image column properly displays the image.
Later ‘IsDownloaded’ property changes, it reflects in ObservableCollectionClass, but the image control unable to understand this change since its source property is not bound to any collection class property. Similarly as the converter class received a copy of datacontext object, property changes never reflects in converter class either.
Therefore set the image source property to collection class property 'IsDownloaded'. Any changes happens to this property will trigger the converter class with new value.

Image Name="DownloadedIcon" Source="{Binding Path=IsDownloaded,Converter={StaticResource BoolToImageCheckmark}}" Width="16" Height="16"/> 

UpdateSourceTrigger not required.

Answer 5

in fact, you didn't bind the image to the property IsDownloaded you bind it to the whole object in the list. Path is Important.

<DataGridTemplateColumn>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Image Name="DownloadedIcon" Source="{Binding Converter={StaticResource BoolToImageCheckmark}, ConverterParameter=IsDownloaded, Path=IsDownloaded, UpdateSourceTrigger=PropertyChanged}" Width="16" Height="16" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>