Silverlight DataGrid column sorting does not update programmatically modified cells

Question

In my first Silverlight application, I wrote a program that sends custom search strings to the Flickr REST API and displays the results in a DataGrid . The specified grid is defined as follows:

 <data:DataGrid x:Name="PhotoGrid" AutoGenerateColumns="False"> <data:DataGrid.Columns> <data:DataGridTextColumn Header="Photo Title" Binding="{Binding Title}" CanUserSort="True" CanUserReorder="True" CanUserResize="True" IsReadOnly="True" /> <data:DataGridTemplateColumn Header="Photo" SortMemberPath="ImageUrl"> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <TextBlock Text="Click here to show image" MouseLeftButtonUp="ShowPhoto"/> <Image Visibility="Collapsed" MouseLeftButtonUp="HidePhoto"/> </StackPanel> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> </data:DataGrid.Columns> </data:DataGrid> 

This is a simple two-column table. The first column contains the name of the photo, and the second contains the text "Click here to show image." It clicks the ShowPhoto() call, which updates the Image element Source property with the BitmapImage obtained from the Flickr photo URI and sets the visibility of the image to Visible . Clicking on the image thus hides it again. All of this was easy to implement and works great.

But whenever I click on one of the column headings to sort by that column, the cells that I updated in this way do not change. The rest of the DataGrid runs and updates accordingly, but these cells are left behind, separated from the rest of their row. This is very strange, and not at all what I want.

What am I doing wrong? Do I have to refresh the DataGrid somehow in response to the sort event, and if so, how? Or, if I don't suppose that I should be randomly linked to the contents of the grid, what is the right way to get the behavior I want?

Answer 1

I think you should bind the source code to an element in the collection and update that element in the code instead of directly modifying the element. Make sure your property generates an event with the changed property, and your main object implements INotifyPropertyChanged

  public string Url { get { return url; } set { url = value; NotifyPropertyChanged("Url"); } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } 

********************* Adding code to clarify ********************** ** Probably you must reset the line height when you hide the image. I see no problems with blurring and images in the background. Here is my code

 <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <Button Click="ShowHidePhoto" Content="show/hide" Tag="{Binding}"/> <Image Visibility="{Binding Visible}" Source="{Binding Url}" MouseLeftButtonUp="OnImageClick"/> </StackPanel> </DataTemplate> 

code for

 private void ShowHidePhoto(object sender, RoutedEventArgs e) { DataHolder dh = (DataHolder)((Button)sender).Tag; dh.Visible = dh.Visible == Visibility.Collapsed ? Visibility.Visible : Visibility.Collapsed; // reset height here.... } 

Answer 2

Have you tried DataGrid.item.refresh after sorting? It may be too easy to answer, but will it ever solve the problems that I had with Datagrid ...