Item not display in center using Pagination control

6 posts, 0 answers
  1. Ankit
    Ankit avatar
    5 posts
    Member since:
    Jun 2014

    Posted 12 Jun 2014 Link to this post

    Hi ,
    I am using Paginationcontrol with SlidView. I am facing problem to display item in center.
    I am posting my code here please help me to solve this problem.
    I want to display images if it is one then it will be displayed in Center if Images is more then first image will be started at left side.
    Thank You.
    01.<Grid Height="563">
    02.                <telerikPrimitives:RadSlideView x:Name="Roll1"
    03.                                                
    04.                                                IsFilmstripModeEnabled="False"
    05.                                                VerticalAlignment="Top"
    06.                                                ItemRealizationMode="ViewportItem"
    07.                                                IsLoopingEnabled="False"
    08.                                               
    09.                                                IsShowOverlayContentOnTapEnabled="False"
    10.                                                Orientation="Horizontal"
    11.                                                Margin="0,0,0,0"
    12.                                                Height="550">
    13. 
    14. 
    15.                    <telerikPrimitives:RadSlideView.ItemTemplate>
    16.                        <DataTemplate>
    17.                            <Grid>
    18.                                <slideView:PanAndZoomImage Margin="0,0,0,0" ZoomMode="Free" RenderTransformOrigin="0.5, 0.5" Source="{Binding bitmap}" >
    19.                                 
    20.                                </slideView:PanAndZoomImage>
    21.                            </Grid>
    22.                        </DataTemplate>
    23. 
    24.                    </telerikPrimitives:RadSlideView.ItemTemplate>
    25. 
    26.                </telerikPrimitives:RadSlideView>
    27.                
    28.            </Grid>
    29.<---PaginationControl-->
    30.<telerikPrimitives:RadPaginationControl
    31.                    Height="120"
    32.                  HorizontalContentAlignment="Center"
    33.                    PageProvider="{Binding ElementName=Roll1}"
    34.                    DisplayMode="Thumbnails" Width="Auto"
    35.                     
    36.                    >
    37.                    <telerikPrimitives:RadPaginationControl.ItemTemplate>
    38.                        <DataTemplate>
    39.                            <StackPanel HorizontalAlignment="Center" Margin="5,5,0,10" >
    40.                                <Border x:Name="brder" HorizontalAlignment="Center" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2">
    41.                                    <Image x:Name="image" HorizontalAlignment="Center"  Source="{Binding bitmap}" Height="100"  VerticalAlignment="Center"  Stretch="Uniform" Opacity="0.5" ></Image>
    42.                                </Border>
    43.                            </StackPanel>
    44. 
    45.                        </DataTemplate>
    46.                    </telerikPrimitives:RadPaginationControl.ItemTemplate>
    47. 
    48.                    <telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
    49.                        <DataTemplate>
    50.                            <StackPanel HorizontalAlignment="Center" Margin="5,5,0,10"  >
    51.                                <Border x:Name="brder" HorizontalAlignment="Center" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="2">
    52.                                    <Image x:Name="image" HorizontalAlignment="Center" Source="{Binding bitmap}" Height="100"    Stretch="Uniform" ></Image>
    53.                                </Border>
    54.                            </StackPanel>
    55. 
    56.                        </DataTemplate>
    57.                    </telerikPrimitives:RadPaginationControl.CurrentItemTemplate>
    58. 
    59. 
    60. 
    61.                </telerikPrimitives:RadPaginationControl>
  2. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 16 Jun 2014 Link to this post

    Hello Ankit,

    Thank you for contacting us.

    Could you please try to set the RadPaginationControl.HorizontalAlignment property to "Center" and see if this works fine in your scenario. If not, you can bind the HorizontalAlignment of the RadPagination control to the ItemsSource of the RadSlideView and using a value converter you can get the desired alignment of the items.
    <telerikPrimitives:RadPaginationControl
        HorizontalAlignment="{Binding ElementName=Roll1, Converter={StaticResource Converter}, Path=ItemsSource}"
        other properties...>

    public class Converter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var items = value as IEnumerable;
     
            return items.Count() > 1 ? HorizontalAlignment.Left : HorizontalAlignment.Center;
        }
     
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    I hope this helps. Please, let us know if you have further questions.

    Regards,
    Rosy Topchiyska
    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. Ankit
    Ankit avatar
    5 posts
    Member since:
    Jun 2014

    Posted 16 Jun 2014 in reply to Rosy Topchiyska Link to this post

    hi.. Thank you for you reply but I am facing another problem with your code when I am writing this 
    <telerikPrimitives:RadPaginationControl
                        HorizontalAlignment="{Binding ElementName=Roll1, Converter={StaticResource Converter}, Path=ItemsSource}"
    other....>

    then xaml is displaying blue underline and it says that "Object reference not set as instance of object"
    so I have remove ItemsSource to PageProvider then no change is done it will display same output.
    <telerikPrimitives:RadPaginationControl
                       Height="120"
                     
                       HorizontalAlignment="{Binding ElementName=Roll1, Converter={StaticResource Converter}, Path=PageProvider}"
                       PageProvider="{Binding ElementName=Roll1}"
                       DisplayMode="Thumbnails" Width="Auto"
                       
                       >
    please help me to solve this problem please reply fast I have to submit this code within 36 hours.
  5. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 19 Jun 2014 Link to this post

    Hi Ankit,

    We could not reproduce this issue on our side. I have attached a sample project with the code snippets from my previous answer and it works fine on our side. Could you please clarify:
    • Does the attached project run correctly on your side? 
    • Does this error prevent your application from building?

    If your application can not be built, could you please modify the sample project to reproduce the issue.

    I look forward to your reply.

    Regards,
    Rosy Topchiyska
    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. Ankit
    Ankit avatar
    5 posts
    Member since:
    Jun 2014

    Posted 19 Jun 2014 in reply to Rosy Topchiyska Link to this post

    Thank you for your reply but still my question is not solved my query is I want to display images if it is one then it will be displayed in Center if Images is more then first image will be started at left side in RadPaginationControl. In your given example if i remove all the images and only add just one image in it then output is as show in screen short but I want this image in center.
    Thank You, 
  7. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 24 Jun 2014 Link to this post

    Hi Ankit,

    Thank you for contacting us.

    When I run the attached project with just one image in the ItemsSource of the RadSlideView the pagination control displays its item in the center.
    this.Roll1.ItemsSource = new List<string> { "image1.png"};
    Could you please send us the project that you used to create the screenshot and we will try to find out where the problem comes from.

    I look forward to your reply.

    Regards,
    Rosy Topchiyska
    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