Strange DataTemplate problem and jerky scrolling

[Matt]

Hey. I've got an existing WP8 app that displays a vertical list of images. Each the datatemplate is quite complex and has a horizontal ScrollViewer in it.
I have two problems.

1) The scrolling is generally quite jerky. However, it's much much worse when scrolling upwards. So when you pull down to scroll to the top, the whole list is very very jumpy. This is caused by each item being a different height. I tested having set heights, and although it's still a bit jerky, the problem is mostly gone. The items need to be different heights.

2) As mentioned, each item has a horizontal ScrollViewer. The strange thing is that if I goto an item near the top and slide horizontally (so it's showing the content on the right of the image), and then scroll down, a few items down there is now another unrelated item that has also been scrolled across. This problem is unique to the DataBoundListBox as Silverlights own ListBox doesn't do this.

Thanks for the help.

EDIT:
I've played around a bit more, and number 2 is easily reproducible.
I created a project with the Telerik template and removed the standard listbox and replaced it. Then just goto the demo viewmodel and copy/paste the adding of items to the datasource until you have a hundred or so. Then run. Scrolling up and down works perfectly, but then slide one of the items across to see the text and then scroll down again. Some way down you will see others that have also slid across. And when you go back to the item that you slid, it will be back in it's default position (I imagine that is because of the virtualization and thats fine).

Here is the XAML:
<telerikPrimitives:RadDataBoundListBox Grid.Row="2"  ItemsSource="{Binding Items}">
                <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
                    <DataTemplate>
                        <ScrollViewer Margin="0,20,0,20" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled" >
                            <StackPanel x:Name="mainStack" Orientation="Horizontal">
                                <Grid x:Name="outerImageGrid" >
                                    <Image Width="450" Source="http://blogs.windows.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-53-71-metablogapi/DSC07348_5F00_4FBF044C.jpg"></Image>
                                </Grid>
                                <Border VerticalAlignment="Center" Width="450">
                                    <TextBlock Text="more content"/>
                                </Border>
                            </StackPanel>
                        </ScrollViewer>
                    </DataTemplate>
                </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            </telerikPrimitives:RadDataBoundListBox>

[Deyan]

Hello Matt,

Thanks for writing and for the provided details.

1. We are currently not aware of any performance problems in terms of scrolling. In the current version of RadDataBoundList the scrolling logic is performed on another thread and thus the UI thread is left free doing only virtualization logic. So in general you should not experience any problems.

2. The second problems sounds like resulting from the UI virtualization mechanism which implies reusing of visual containers. The standard ListBox does not do this, i.e. it always creates a new container and binds it to the corresponding data item which we consider not quite optimal. Therefore the difference in behavior in both controls. So, there is a way to workaround this in RadDataBoundListBox by catching the ItemStateChanged event, look for items that are Realized, find the scrollviewer inside them and reset its scroll position:

private void radDataBoundListBox_ItemStateChanged(object sender, Telerik.Windows.Controls.ItemStateChangedEventArgs e)
{
    if (e.State != Telerik.Windows.Controls.ItemState.Realized)
    {
        return;
    }

    RadDataBoundListBoxItem container = this.radDataBoundListBox.GetContainerForItem(e.DataItem) as RadDataBoundListBoxItem;

    ScrollViewer templateScrollViewer = ElementTreeHelper.FindVisualDescendant<ScrollViewer>(container);

    templateScrollViewer.ScrollToHorizontalOffset(0);
}

I hope this helps.

All the best,
Deyan
the Telerik team

[Matt]

Ah, I thought of that but didn't know how to implement it. I actually tried binding the internal scrollviewer to a property on each item so it would keep it's scroll no matter what, but that seemed hacky.

Thanks so much, your fix is perfect!

[Zeeshan]

This coding is for using in C++ programming

[Deyan]

Hello Zeeshan,

The solution provided above is using C#.

Regards,
Deyan
Telerik