Slideview causes items to jump to the top after slide

[Shawn]

I just upgraded to 2012.1.214.2040. I made the necessary changes to remove the RadSlideView.DataSource.  If I scroll down on any item and slide back and forth the items to each side will scroll back down to the previous scroll position. I don't remember this happening before the rewrite. Is there a way to disable this behavior?

<telerikPrimitives:RadSlideView x:Name="slideView"
                                ItemsSource="{Binding NewsItemService.SortedNews.View}"
                                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                AdjacentItemsPreviewMode="None"
                                ItemRealizationMode="Default"

                            >
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Views:NewsItemView DataContext="{Binding}"></Views:NewsItemView>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>

    <!--<telerikPrimitives:RadSlideView.DataSource>
        <telerikPrimitives:SlideViewContentSource ItemsSource="{Binding NewsItemService.SortedNews.View}" />
    </telerikPrimitives:RadSlideView.DataSource>-->
</telerikPrimitives:RadSlideView>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True"
                          BackgroundColor="{StaticResource DarkPrimaryColor}"
                          ForegroundColor="White"
                          Mode="Minimized"
                          Opacity=".9">
        <shell:ApplicationBar.Buttons>
            <cal:AppBarButton IconUri="\images\icons\appbar.share.png"
                              Text="share"
                              Message="Share" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

[Shawn]

For clarification you need to have multiple long items. Scroll down on the first one then swiping to the next one causes the next one to load and then it scrolls down to match the position of the first item. 

[Kiril Stanoev]

Hi Shawn,

Thank you for contacting us. Let me explain first what is the cause for the issue. For performance considerations we're re-using the containers (SlideViewItem) which means that after you scroll the first item down and navigate to the second item, the container from the first item wil be re-used by the second item. Using a new container every time the selection changes will have a certain performance impact on the application.

Now to your scenario. I assume you're using a ScrollViewer in Views:NewsItemView so that you can scroll the long items. There's a neat workaround which you can employ to reset the vertical offset of the new item.

<telerikPrimitives:RadSlideView ItemsSource="{Binding Images}"
        SelectionChanged="RadSlideView_SelectionChanged" SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
        AdjacentItemsPreviewMode="None" ItemRealizationMode="Default">
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                <StackPanel>
                    <Image Source="{Binding ImagePath}" />
                    <TextBlock TextWrapping="Wrap">
                        <!-- Some long text here. -->
                    </TextBlock>
                </StackPanel>
            </ScrollViewer>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>

private void RadSlideView_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
    RadSlideView slideView = sender as RadSlideView;
    if (slideView != null)
    {
        var scrollViewer = ElementTreeHelper.FindVisualDescendant<ScrollViewer>(slideView.SelectedItemContainer);
        if (scrollViewer != null)
        {
            scrollViewer.ScrollToVerticalOffset(0);
        }
    }
}

Give it a try and let me know how it works for you. I'd be glad to further assist you.

All the best,
Kiril Stanoev
the Telerik team

[Doug]

Hi Kiril 


I have a similar problem. But my problem occurs because of that initiation what you are talking about.

Whats happening at me as that after I scroll the slideview to the second item(for the first time), the whole layout drops a few pixels after that everything is working as it should. is this a known issue? is there a workaround for this?

<telerikPrimitives:RadSlideView x:Name="slideView" ItemsSource="{Binding}">
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
                        <Grid Margin="6">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.RowSpan="2" Source="{Binding TopImage}" MaxWidth="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBlock Grid.Column="1" Text="{Binding TopTitle}" TextWrapping="Wrap" FontSize="40" FontFamily="Comic Sans MS" HorizontalAlignment="Center" TextAlignment="Center" Foreground="#34B6F8"/>
                            <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding TopText}" TextWrapping="Wrap" FontSize="26" FontFamily="Comic Sans MS" HorizontalAlignment="Center" TextAlignment="Center" Margin="0,0,20,0"/>
                            <Image Grid.ColumnSpan="2" Source="{Binding MainImage}" Width="400" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBlock Text="{Binding BottomTitle}" TextWrapping="Wrap" Grid.Row="3" FontSize="40" FontFamily="Comic Sans MS" HorizontalAlignment="Center" TextAlignment="Center" Foreground="#34B6F8"/>
                            <TextBlock Text="{Binding BottomText}" TextWrapping="Wrap" Grid.Row="4" FontSize="26" FontFamily="Comic Sans MS" HorizontalAlignment="Center" VerticalAlignment="Top" />
                            <Image Grid.Row="3" Grid.RowSpan="2" Grid.Column="1" MaxWidth="120" Source="{Binding BottomImage}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>

Best Regards Doug.

[Kiril Stanoev]

Hi Doug,

Unfortunately, I was unable to reproduce this issue. Could you please take a look at the attached project and let me know if I am missing anything. I'd be glad to further assist you. 

Kind regards,
Kiril Stanoev
the Telerik team

[Doug]

Hi

Since I wrote I managed to fix this problem.
When I was using this control, I wasn't filling every field on every page. I've added a fix height for a few items and that solved it.
I modified the project you've sent and reproduced the problem what I had. I commented out a few fields and that was it:

DataItem dataItem = new DataItem();
//dataItem.TopTitle = "Arsenal";
//dataItem.TopText = "English soccer team";
//dataItem.BottomTitle = "2011-2012";
//dataItem.BottomText = "- 1 -";
dataItem.MainImage = "/Images/arsenal.png";
dataItems.Add(dataItem);
// Barcelona
dataItem = new DataItem();
//dataItem.TopTitle = "Barcelona";
dataItem.TopText = "Spanish soccer team";
//dataItem.BottomTitle = "2011-2012";
//dataItem.BottomText = "- 2 -";
dataItem.MainImage = "/Images/barcelona.png";
dataItems.Add(dataItem);

Best Regards Doug

PS.: I would attach the project but I doesn't allow it.

[Kiril Stanoev]

Hi Doug,

Thanks for the prompt update. Let us know if you encounter any further issues.  

Kind regards,
Kiril Stanoev
the Telerik team