How to handle updated items in an observable collection

Nov 19, 2010 at 8:41 AM

What is the best way to let the UI get notified of any changes of the actual items in an observable collection (located in the view model)?

My specific problem:

I have a property in a view model
public ObservableCollection<IllustrationExtended> Illustrations

A list box in the UI is bound to this collection
<ListBox ItemsSource=”{Binding Illustrations}” ItemContainerStyle=”{StaticResource IllustratorSelectorListBoxItemStyle}” … />

The IllustrationExtended class has a property called HasData, which tells if the illustration is fully loaded. I would like to disable the list box item until the illustration is fully populated, but still display it in the list.

So in the item style, I have added a rectangle that shall be visible if HasData is false. (This solution is because of it is impossible in Silverlight to do any binding in the property setter.)

<Grid x:Name="contentPresenter" Margin="4,0,4,4" Cursor="Hand">
<Image x:Name="itemImage" Source="{Binding ImageSource}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{Binding Illustration.ShortName}" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="{StaticResource BestGray1}"/>
<Rectangle x:Name="itemDisabled" Fill="{StaticResource BestGray2}" IsHitTestVisible="False" Opacity="50" Visibility="{Binding HasData, ConverterParameter=invert, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"/>

Now my concrete question.
How should I do so the visibility of the rectangle change when the HasData property change?


Nov 19, 2010 at 1:01 PM

The ObservableCollection has a CollectionChanged event. You should be able to handle this event and update your viewmodel accordingly.