[Solved] AdjacentItemsPreviewMode not working

[Igor]

I have a Windows Phone 8 app with Telerik RadControls 2014.1.226.3040. I have created a SlideView and I have set AdjacentItemsPreviewMode  to Next:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="title" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <telerikPrimitives:RadSlideView ItemsSource="{Binding}" AdjacentItemsPreviewMode="Next" ItemRealizationMode="Default" Grid.Row="1" x:Name="RadSlideView">
            <telerikPrimitives:RadSlideView.ItemTemplate>
                <DataTemplate>
                    <Image Source="http://www.seattlemet.com/data/images/2012/5/image/4597/space-needle-seattle.jpg" />
                </DataTemplate>
            </telerikPrimitives:RadSlideView.ItemTemplate>
        </telerikPrimitives:RadSlideView>

        <!--ContentPanel - place additional content here-->
        <StackPanel x:Name="ContentPanel" Grid.Row="2" Margin="12,0,12,0">

            <Button Content="b1"  />
            <Button Content="b2"  />
            <Button Content="b3" />
        </StackPanel>
        </Grid>

But it does not show a preview of the next item. Here is a complete solution: https://dl.dropboxusercontent.com/u/73642/PhoneApp1.zip

[Todor]

Hello Igor,

Thank you for writing.

The reason the preview is not visible is the spacing that remains next to the image. When the next item doesn't cover the whole width of the screen, the preview that is shown actually contains only the spacing. I have attached a modified version of your sample where the image covers the whole width of the screen and the preview is visible.

I hope this information helps.

Regards,
Todor
Telerik

 

 

[Igor]

So what if I want say t have a 300px wide grid with the image and some other data, then it is not possible?

[Ves]

Hi Igor,

RadSlideView displays SlideViewItems, so that there's one in the middle of the screen and a tiny bit of the adjacent ones. So, in case the SlideViewItem's content is small and close to the center, the next one is previewed, but it's content is just too deep inside it, so it's not shown. Please, find attached three images, which should make things clear. So, if the content is wide enough, it is going to be visible.

Best regards,
Ves
Telerik

 

 

[Igor]

Then why if I create this

<telerikPrimitives:RadSlideView Grid.Row="2" ItemsSource="{Binding MobilePhones}">
           <telerikPrimitives:RadSlideView.ItemTemplate>
               <DataTemplate>
                   <StackPanel
                       Width="200">
                       <TextBlock
                           Text="{Binding Make}" />
                       <Image
                           Source="{Binding Photo, Converter={StaticResource JetImageLoaderConverter}}" />
                   </StackPanel>
               </DataTemplate>
           </telerikPrimitives:RadSlideView.ItemTemplate>
       </telerikPrimitives:RadSlideView>

no preview are show on left or right? The items are just 200px wide and the whole page is 480 so there is room for the previews.

[Ves]

Hi Igor,

The narrower the content (in this case -- StackPanel), the wider the blank space would be. Please, see SlideViewItem3.png from my previous reply. If the image gets narrower the blank space around it will get wider i.e. the thick red arrows will get longer, which will eventually lead to the right image going off the screen. So, actually, you need wider content in order to get it previewed.

Best regards,
Ves
Telerik