Slideview causes items to jump to the top after slide

7 posts, 0 answers
  1. Shawn
    Shawn avatar
    6 posts
    Member since:
    Oct 2010

    Posted 07 Mar 2012 Link to this post

    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>
  2. Shawn
    Shawn avatar
    6 posts
    Member since:
    Oct 2010

    Posted 09 Mar 2012 Link to this post

    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. 
  3. DevCraft banner
  4. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 12 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 24 Oct 2012 Link to this post

    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.
  6. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 29 Oct 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Doug
    Doug avatar
    49 posts
    Member since:
    May 2012

    Posted 30 Oct 2012 Link to this post

    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.
  8. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 30 Oct 2012 Link to this post

    Hi Doug,

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

    Kind regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner