Problem with Images in the Grid cells

[Vassili King]

 

Hello,

I've having a weird problem with images displayed in a grid. In essence, I have a grid where people (sorted by a specific skill) are listed. Each row contains one person. Each row has a column where a photo is displayed. The photos are loaded asynchronously.  The problem can be seen when the list of people gets large enough for a scroller bar to be activated.  On a slow system, when I start scrolling up and down, images get mixed up (wrong photos appear for people) in a random order.  If I scroll slow enough, I can see images getting changed from one to another in the same grid cell.  Usually, if I use a fast system, or if I scroll really slowly, the problem isn’t there.  Here is the code:


GRID:

<telerik:RadGridView x:Name="rgvMainGrid" RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False" HorizontalAlignment="Stretch" IsReadOnly="True" Background="Transparent" ShowGroupPanel="False" AutoGenerateColumns="False" Visibility="Collapsed" VerticalAlignment="Top" telerik:StyleManager.Theme="Transparent" ItemsSource="{Binding v_Data_Search}">

     <i:Interaction.Behaviors>

         <local:ColumnGroupsBehavior>

              <local:ColumnGroupsBehavior.CommonHeaders>

             <local:CommonHeader StartColumnIndex="0" Caption="" ColumnSpan="4" />

             <local:CommonHeader StartColumnIndex="4" Caption="First Proficiency" ColumnSpan="3" />

                <local:CommonHeader StartColumnIndex="7" Caption="Second Proficiency" ColumnSpan="3" />

             <local:CommonHeader StartColumnIndex="10" Caption="Third Proficiency" ColumnSpan="3" />

            </local:ColumnGroupsBehavior.CommonHeaders>

         </local:ColumnGroupsBehavior>

     </i:Interaction.Behaviors>

     <telerik:RadGridView.Columns>

        <telerik:GridViewDataColumn>

            <telerik:GridViewDataColumn.CellTemplate>

                <DataTemplate>

                    <Grid MinWidth="400" Cursor="Arrow">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="70"/>

                            <ColumnDefinition Width="Auto"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="20" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="*" />

                        </Grid.RowDefinitions>

         <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" x:Name="imcPic" DataContext="{Binding LanID}" Loaded="imgPic_Loaded" Margin="0,2,4,0"  VerticalAlignment="Center" />

 
       <StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center">

          <Image Source="Images/vcf_small.jpg" Height="16" MouseLeftButtonUp="VcardImage_MouseLeftButtonUp" Tag="{Binding LanID}" ToolTipService.ToolTip="Click to open the vCard." Cursor="Hand" Margin="-2,0,0,0" />

         <HyperlinkButton  x:Name="lnkName" FontWeight="Bold" Foreground="Blue" VerticalAlignment="Center" VerticalContentAlignment="Center" TargetName="_blank" FontSize="12" Content="{Binding Name}" NavigateUri="{Binding LanID, ConverterParameter=http://url.net/\{0\}, Converter={StaticResource FormatLinkString}}" Margin="2,0,0,0"/>

        </StackPanel>

 
       <StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center">

             <sdk:Label x:Name="lblTitle" Foreground="Black" Content="{Binding Title}" />

             <sdk:Label x:Name="lblOffice" Foreground="Black" Content=", " VerticalAlignment="Center" />

             <TextBlock TextWrapping="Wrap" Text="{Binding Office}" VerticalAlignment="Bottom" />

        </StackPanel>

       <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">

             <sdk:Label x:Name="lblPhone" Foreground="Black" Content="Phone: " VerticalAlignment="Center" />

            <TextBlock Text="{Binding DirectDial, Converter={StaticResource FormatPhoneNumber}}" VerticalAlignment="Bottom" />   

        </StackPanel>

       <HyperlinkButton Grid.Column="1" Grid.Row="3" Content="{Binding Email}"  NavigateUri="{Binding Email, ConverterParameter=mailto:\{0\}, Converter={StaticResource FormatLinkString}}"  Margin="-2,0,0,0"/>

     </Grid>

      </DataTemplate>

    </telerik:GridViewDataColumn.CellTemplate>

   </telerik:GridViewDataColumn>

  </telerik:RadGridView.Columns>

 </telerik:RadGridView>




CODE (to load an image)

private void imgPic_Loaded(object sender, RoutedEventArgs e)

{

    try

    {

        Image icon1 = sender as Image;

        if (icon1 == null) return;

        ProfileImage pi = new ProfileImage(icon1); //this method in turn calls WCF service that returns image URL,
                                                   //and then sets image's .Source to new BitmapImage(new Uri(...));
        pi.GetProfileImage();

    }

    catch (Exception ex)

    {

        Common.TrackException([irrelevant stuff]);

    }

}


Please let me know if there is a solution for this type of a problem other than not using Silverlight. :)

Thank you!

[Pavel Pavlov]

Hi,

It seems you have a conflict with the vertical row virtualization and recycling . When the user scrolls rows are being reused . This causes the images to fall into the wrong rows.

There is an easy test you can perform to confirm this - just turn of vertical virtualization ( EnableRowVirtualization=false).

The solution would be to use bindings for the images , rather than setting them in events such as <Loaded>.


Greetings,
Pavel Pavlov
the Telerik team