Strange DataTemplate problem and jerky scrolling

5 posts, 1 answers
  1. Matt
    Matt avatar
    2 posts
    Member since:
    Oct 2011

    Posted 07 Feb 2013 Link to this post

    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>
  2. Answer
    Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 11 Feb 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Matt
    Matt avatar
    2 posts
    Member since:
    Oct 2011

    Posted 11 Feb 2013 Link to this post

    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!
  5. Zeeshan
    Zeeshan avatar
    19 posts
    Member since:
    Jun 2013

    Posted 19 Jul 2013 Link to this post

    This coding is for using in C++ programming
  6. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 22 Jul 2013 Link to this post

    Hello Zeeshan,

    The solution provided above is using C#.

    Regards,
    Deyan
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner