How to reduce button size?

[Josh Phan]

Hello, I'm trying to reduce the button size in DataPager, but it doesn't work. From what I checked, the default size is set at 40. So is there anyway I can change that value?

Another issue I have with DataPager is that I have to set a value for the WidthRequest in order to display the number buttons. Otherwise, the control doesn't show any page numbers.

Another thing is even I set the background color for DataPager, it still shows white color.

Could you please help me with these issues? Thank you. 

[Vijayarasan Sivanandham]

Hi Josh Phan,

Please find answer for your queries below

Queries	Solutions
Hello, I'm trying to reduce the button size in DataPager, but it doesn't work. From what I checked, the default size is set at 40. So is there anyway I can change that value?	Your requirement to change the button size by defining the custom height width property of PART_FirstPageButton, PART_PreviousPageButton, PART_NextPageButton, and PART_LastPageButton by overriding the SfDataPager. Please refer to the below code snippet, <Style TargetType="datapager:SfDataPager"> …………… …………… …………… <Button x:Name="PART_FirstPageButton" Grid.Row="2" Grid.Column="0" Width="20" Height="20" Margin="5" Background="{TemplateBinding AccentBackground}" BorderThickness="0" Style="{StaticResource NavigationButtonStyle}" Visibility="Collapsed"> <Button.Content> <Path Width="6" Height="6" Margin="0,0,0,0" Data="M186.84901,0.87000641 L270.861,0.87000641 143.59299,128.13806 271.861,256.40601 188.34901,256.40601 59.831,127.88806 z M0,0 L59.831,0 59.831,127.88806 59.831,256.406 0,256.406 z" Fill="{TemplateBinding AccentForeground}" Stretch="Uniform" /> Button.Content> <Button.RenderTransform> <TransformGroup> <RotateTransform CenterX="10" CenterY="10" /> <CompositeTransform /> TransformGroup> Button.RenderTransform> Button> <Button x:Name="PART_PreviousPageButton" Grid.Row="2" Grid.Column="1" Width="20" Height="20" Margin="5" Background="{TemplateBinding AccentBackground}" BorderThickness="0" Style="{StaticResource NavigationButtonStyle}" Visibility="Collapsed"> <Button.Content> <Path Width="6" Height="6" Margin="0,0,0,0" Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Fill="{TemplateBinding AccentForeground}" Stretch="Uniform" /> Button.Content> <Button.RenderTransform> <TransformGroup> <RotateTransform CenterX="10" CenterY="10" /> <CompositeTransform /> TransformGroup> Button.RenderTransform> Button> <Button x:Name="PART_NextPageButton" Grid.Row="2" Grid.Column="3" Width="20" Height="20" Margin="5" Background="{TemplateBinding AccentBackground}" BorderThickness="0" Style="{StaticResource NavigationButtonStyle}" Visibility="Collapsed"> <Button.Content> <Path Width="6" Height="6" Margin="0" Data="F1M568.254,-7.43524L568.159,-7.34277 567.977,-7.52246 546.559,-28.9417 525.484,-28.9417 549.787,-4.63446 557.439,3.01532 557.619,3.19629 550.067,10.7549 525.758,35.0583 546.834,35.0583 568.254,13.6429 578.792,3.10254 568.254,-7.43524z" Fill="{TemplateBinding AccentForeground}" Stretch="Uniform" /> Button.Content> <Button.RenderTransform> <TransformGroup> <RotateTransform CenterX="10" CenterY="10" /> <CompositeTransform /> TransformGroup> Button.RenderTransform> Button> <Button x:Name="PART_LastPageButton" Grid.Row="2" Grid.Column="4" Width="20" Height="20" Margin="5" Background="{TemplateBinding AccentBackground}" BorderThickness="0" Style="{StaticResource NavigationButtonStyle}" Visibility="Collapsed"> <Button.Content> <Path Width="6" Height="6" Margin="0,0,0,0" Data="M212.02997,0 L271.86096,0 271.86096,256.40601 212.02997,256.40601 212.02997,128.51749 85.010976,255.53601 1.0000002,255.53601 128.26799,128.26744 0,4.0510441E-06 83.510976,4.0510441E-06 212.02997,128.5174 z" Fill="{TemplateBinding AccentForeground}" Stretch="UniformToFill" /> Button.Content> <Button.RenderTransform> <TransformGroup> <RotateTransform CenterX="10" CenterY="10" /> <CompositeTransform /> TransformGroup> Button.RenderTransform> Button> ……………… ……………… ……………… Style>
Another issue I have with DataPager is that I have to set a value for the WidthRequest in order to display the number buttons. Otherwise, the control doesn't show any page numbers.	We suspect that your requirement is display the number button based on records changed at runtime in SfDataPager. you can achieve this by bind the PageSize property in SfDatapager. Please refer to the below code snippet, <datapager:SfDataPager x:Name="dataPager" Grid.Row="1" PageSize="{Binding WidthRequest}" NumericButtonStyle="{StaticResource NumericButtonStyle}" Background="Red" Source="{Binding OrderList}"/> If we misunderstood your requirement, please provide more information related to your query? Details about your scenario with image illustrations? Kindly revert to us with the above requested details. It will be more helpful for us to check the possibilities to resolve the reported problem.
Another thing is even I set the background color for DataPager, it still shows white color.	Your requirement to set the background color for DataPager can be achieved by define the AccentBackground, Background property in SfDataPager. Please refer to the below code snippet, <datapager:SfDataPager x:Name="dataPager" Grid.Row="1" PageSize="{Binding WidthRequest}" AccentBackground="Red" NumericButtonStyle="{StaticResource NumericButtonStyle}" Background="Green" Source="{Binding OrderList}"/> UG Link: https://help.syncfusion.com/uwp/datapager/appearance#accentbrush If we misunderstood your requirement, please provide more information related to your query? Details about your scenario with image illustrations? Video illustrations of the issue Kindly revert to us with the above requested details. It will be more helpful for us to check the possibilities to resolve the reported problem.

Please find the sample in the attachment and let us know if you have any concerns in this.

Regards,

Vijayarasan S

Attachment: SfDataGriddemo_88b6f127.zip

[Josh Phan]

Hi Vijayarasan, thanks a lot for your reply. It was my bad that these issues were supposed to be in Xamarin Forms, instead of UWP. Could you please help me with that platform? Thank you.

Here is what I tried but still didn't work:

<sfDataPager:SfDataPager x:Name ="dataPager" PageSize="{Binding Source={x:Reference ItemPerPagePicker}, Path=SelectedItem.ID}" Style="{StaticResource PagerStyle}" AccentBackground="Transparent" BackgroundColor="Transparent" Source="{Binding InventoryList}" AppearanceManager="{StaticResource customAppearance}">

</sfDataPager:SfDataPager>

Here is my style:

<Style TargetType="sfDataPager:SfDataPager" x:Key="PagerStyle">

                <Setter Property="AccentBackground" Value="Transparent" />

                <Setter Property="BackgroundColor" Value="Transparent" />

                <Setter Property="HorizontalOptions" Value="EndAndExpand"/>

                <Setter Property="WidthRequest" Value="300"/>

                <Setter Property="ButtonSize" Value="25"/>

                <Setter Property="ButtonFontSize" Value="14"/>

                <Setter Property="NumericButtonsGenerateMode" Value="Auto"/>

                <Setter Property="Scale" Value="0.9"/>

            </Style>

[Suja Venkatesan]

Hi Josh,

We regret to inform you that currently we do not have support for applying style to SfDataPager via targettype. Please find the response for your queries below.

Regarding “Reduce the button size in DataPager”	You can achieve your requirement by setting ButtonSize with custom value as like below code snippet.   Code snippet: <sfPager:SfDataPager x:Name ="dataPager"                      Grid.Row="0"                         ButtonSize="25"                      PageSize="5"                     AppearanceManager="{StaticResource customAppearance}"                    Source="{Binding OrdersInfo}">     Please refer user guidelines regarding customizing button size in the below link.   UG link: https://help.syncfusion.com/xamarin/datagrid/paging#customizing-button-size-and-font-size-of-pager-buttons
Regarding “I have to set a value for the WidthRequest in order to display the number buttons. Otherwise, the control doesn't show any page numbers.”	You can resolve the reported scenario by setting PageSize with custom value as like below code snippet   Code Snippet:     <sfPager:SfDataPager x:Name ="dataPager"                            Grid.Row="0"                             ButtonSize="25"                          PageSize="5" AppearanceManager="{StaticResource customAppearance}"                       Source="{Binding OrdersInfo}">
Regarding “I set the background color for DataPager, it still shows white color”	You can achieve your requirement “setting BackGroundColor for DataPager”  by overriding GetDataPagerBackgroundColor method  style class overriding from the AppearanceManager, and assigning it to the SfDataPager.AppearanceManager property as like below code snippet.   Code snippet:     public class CustomAppearance : AppearanceManager     {         public override Color GetDataPagerBackgroundColor()         {             return Color.Transparent;         }     }   XAML:   <ContentPage.Resources>         <local:CustomAppearance x:Key="customAppearance"/>     </ContentPage.Resources> …       <sfPager:SfDataPager x:Name ="dataPager"                            Grid.Row="0"                             ButtonSize="25"                          PageSize="5" AppearanceManager="{StaticResource customAppearance}"          Source="{Binding OrdersInfo}">   Please refer our user guidelines documentation regarding AppearanceManager in the below link. UG link: https://help.syncfusion.com/xamarin/datagrid/paging#appearancemanager

We have attached a sample for your reference. Please let us know if you need any further assistance.

Regards,

Suja

Attachment: GettingStarted_3392647e.zip

[Josh Phan]

Hi Suja,

Thanks for your help for the background color. For the page size, I bind it to another combobox, but it didn't fix the issue.

PageSize="{Binding Source={x:Reference PagePicker}, Path=SelectedItem.ID}"

When I add more items into the dataGrid, the pager looks like the screenshot below. Unless I set the width request for the pager, the issue persists. 

Could you please help? Thank you.

Josh

[Suja Venkatesan]

Hi Josh,

We regret to let you know that we are unable to reproduce the reported scenario on our end. We have checked the reported scenario with SfDataPager, SfDataPager pager button displays correctly. We have attached a sample which we used to replicate the reported scenario for your reference.

Output:

Could you please share the SfDataPager code snippets with an illustration video or image, and if possible, please revert to us with a modified sample to replicate the reported scenario on our end.  Could you please confirm the platform on which you are experiencing the reported issue?

Additional Information:
Tested device:  Android: Physical device- Samsung S8+(Android 9.0- API 28)

                                            iOS: iPhone simulator – iPhone 8 (iOS

Attachment: GettingStarted_e2265cb8.zip

[Josh Phan]

Hi Suja, I'm currently use the platform Xamarin Forms UWP. 

Here is my code snippet:

<Frame BorderColor="LightGray" CornerRadius="10" Padding="0">

                                            <sfComboBox:SfComboBox x:Name="ItemPerPagePicker" Style="{DynamicResource ComboboxStyle}" DataSource="{Binding PickerItem, Mode=TwoWay}" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" DisplayMemberPath="Value" Text="{Binding SelectedItem}"/>

                                        </Frame>

<sfDataPager:SfDataPager x:Name ="dataPager" PageSize="{Binding Source={x:Reference ItemPerPagePicker}, Path=SelectedItem.ID}" Source="{Binding InventoryList}" AppearanceManager="{StaticResource customAppearance}">

</sfDataPager:SfDataPager>

[Suja Venkatesan]

Hi Josh,

We regret to inform you that we are unable to replicate the reported scenario on our end. We have prepared a sample with provided code snippet, SfDataPager button displays correctly without setting WidthRequest itself.  We have attached a sample for your reference. Please let us know if we missed any customization you have done in your application. If possible please revert to us with modified sample to replicate the reported scenario on our end. It will be more helpful for us to provide the timely solution.

Output:​

Regards,

Suja

Attachment: GettingStarted_94c7b695.zip