AdjacentItemsPreviewMode not working

6 posts, 0 answers
  1. Igor
    Igor avatar
    29 posts
    Member since:
    Mar 2012

    Posted 18 Apr 2014 Link to this post

    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
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 23 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Igor
    Igor avatar
    29 posts
    Member since:
    Mar 2012

    Posted 12 Jul 2014 Link to this post

    So what if I want say t have a 300px wide grid with the image and some other data, then it is not possible?
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Igor
    Igor avatar
    29 posts
    Member since:
    Mar 2012

    Posted 17 Jul 2014 in reply to Ves Link to this post

    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.
  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 21 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner