For my first Silverlight app, I've written a program that sends user-supplied search strings to the Flickr REST API and displays the results in a DataGrid. Said grid is defined like so:
<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>
It's a simple two-column table. The first column contains the title of the photo, while the second contains the text 'Click here to show image'. Clicks there call ShowPhoto(), which updates the Image element's Source property with a BitmapImage derived from the URI of the Flickr photo, and sets the image's visibility to Visible. Clicking on the image thus revealed hides it again. All of this was easy to implement and works perfectly.
But whenever I click on one of the column headers to sort by that column, the cells that I've updated in this way do not change. The rest of the DataGrid is resorted and updated appropriately, but those cells remain behind, detached from the rest of their row. This is very strange, and not at all what I want.
What am I doing wrong? Should I be freshening the DataGrid somehow in response to the sort event, and if so how? Or if I'm not supposed to be messing with the contents of the grid directly, what's the right way to get the behavior I want?
