This is a migrated thread and some comments may be shown as answers.

Problem with Images in the Grid cells

1 Answer 42 Views
This is a migrated thread and some comments may be shown as answers.
Vassili King
Top achievements
Rank 1
Vassili King asked on 10 Oct 2012, 08:39 PM



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:


<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}">




             <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" />








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


                            <ColumnDefinition Width="70"/>

                            <ColumnDefinition Width="Auto"/>



                            <RowDefinition Height="20" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="15" />

                            <RowDefinition Height="*" />


         <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=\{0\}, Converter={StaticResource FormatLinkString}}" Margin="2,0,0,0"/>


       <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 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" />   


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







CODE (to load an image)

private void imgPic_Loaded(object sender, RoutedEventArgs e)




        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(...));


    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!

1 Answer, 1 is accepted

Sort by
Pavel Pavlov
Telerik team
answered on 12 Oct 2012, 08:29 AM

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>.

Pavel Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Asked by
Vassili King
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Share this question