Styling of PdfViewerNavigateToPageToolbarItem entry

1 Answer 18 Views
PDFViewer
Chris
Top achievements
Rank 1
Chris asked on 17 Dec 2024, 11:01 AM

How can we change the background color and text color of the PdfViewerNavigateToPageToolbarItem entry?

The RadPdfViewerToolbar and ButtonToolbarItemView are set with styling.

1 Answer, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 18 Dec 2024, 11:36 AM

Hello Chris,

Thank you for contacting us.

To achieve the desired changes in the background and text color of the PdfViewerNavigateToPageToolbarItem entry, follow these steps:

  • Set the ControlTemplate of the PdfViewerNavigateToPageToolbarItem:
<telerik:PdfViewerNavigateToPageToolbarItem ControlTemplate="{StaticResource PdfViewerNavigateToPageToolbarItemView_ControlTemplate}"/>
  • Apply the necessary resources and styles.
<Style x:Key="PdfViewerNavigateToPageToolbarItemView_EntryStyle" TargetType="telerik:RadEntry">
    <Setter Property="Keyboard" Value="Numeric" />
    <Setter Property="WidthRequest" Value="{OnPlatform Default=40, WinUI=64}" />
    <Setter Property="ReserveSpaceForErrorView" Value="False" />
    <Setter Property="ClearButtonVisibility" Value="Never" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="BackgroundColor" Value="ForestGreen"/>
    <Setter Property="TextColor" Value="Red"/>
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

<ControlTemplate x:Key="PdfViewerNavigateToPageToolbarItemView_ControlTemplate">
    <HorizontalStackLayout Spacing="{OnPlatform Default=2, WinUI=4}" Padding="0, 0, 8, 0">
        <telerik:RadEntry x:Name="PART_CurrentPageEntry" 
                                    Text="{Binding Source={RelativeSource TemplatedParent}, Path=CurrentPageNumber, Mode=TwoWay}" 
                                    Style="{StaticResource PdfViewerNavigateToPageToolbarItemView_EntryStyle}" />
        <Label Text="{Binding TotalPages, Source={RelativeSource TemplatedParent}, StringFormat='/{0}'}"  
                    VerticalOptions="Center" 
               VerticalTextAlignment="Center" />
    </HorizontalStackLayout>
</ControlTemplate>

I also have logged as a feature request to create a style property for the PdfViewerNavigateToPageToolbarItem here.

I hope this helps.

Regards,
Masha
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
PDFViewer
Asked by
Chris
Top achievements
Rank 1
Answers by
Masha
Telerik team
Share this question
or