[Solved] Item not display in center using Pagination control

[Ankit]

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>


[Rosy Topchiyska]

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

 

 

[Ankit]

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.

[Rosy Topchiyska]

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

 

 

[Ankit]

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, 

[Rosy Topchiyska]

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