Is it possible to customize NavigationButton in SfDataPager?

[Jayden Lee]

Hello, All

I want to customize the Previous Page Button and Next Page Button of SfDataPager.

I'm using the MVVM pattern. If I need to change the template, please let me know how.

I want to change it like the image below.

Best Regards,

Jayden

[Dhanasekar Mohanraj]

Hi Jayden Lee,

You can achieve your requirement to customize the Previous and Next page buttons as you have shown in the screenshot by modifying the template shown below,

<Style TargetType="{x:Type syncfusion:SfDataPager}">

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

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type syncfusion:SfDataPager}">

                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

                    <VisualStateManager.VisualStateGroups>
                             

 

 

                                                 .

                                                 .

                                                 .

 

                                                            <VisualState x:Name="Unfocused"/>

                                                            <VisualState x:Name="PointerFocused"/>

                                                        </VisualStateGroup>

                                                    </VisualStateManager.VisualStateGroups>

                                                    <Rectangle x:Name="PART_PageIndicator" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0"/>

                                                    <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                                    <Rectangle x:Name="PART_FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" StrokeDashArray="1 1"/>

                                                    <Rectangle x:Name="PART_FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" StrokeDashArray="1 1"/>

                                                </Grid>

                                            </ControlTemplate>

 

                                              .

                                              .

                                              .

 

                                                            <VisualState x:Name="PointerFocused"/>

                                                        </VisualStateGroup>

                                                    </VisualStateManager.VisualStateGroups>

                                                    <Rectangle x:Name="PART_PageIndicator" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0"/>

                                                    <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                                    <Rectangle x:Name="PART_FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" StrokeDashArray="1 1"/>

                                                    <Rectangle x:Name="PART_FocusVisualBlack" IsHitTestVisible="False"

 

                                                      .

                                                      .

                                                      .

 

                                                        </VisualStateGroup>

                                                    </VisualStateManager.VisualStateGroups>

                                                    <Rectangle x:Name="PART_PageIndicator" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0"/>

                                                    <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

                                                        .

                                                        .

                                                        .

 

                                                            <VisualState x:Name="PointerFocused"/>

                                                        </VisualStateGroup>

                                                    </VisualStateManager.VisualStateGroups>

                                                    <Rectangle x:Name="PART_PageIndicator" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0"/>

                                                    <ContentPresenter x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                                    <Rectangle x:Name="PART_FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" StrokeDashArray="1 1"/>

                                                    <Rectangle x:Name="PART_FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" StrokeDashArray="1 1"/>

                                                </Grid>

                                            </ControlTemplate>

                                        </Setter.Value>

                                    </Setter>

                                </Style>

                            </Button.Style>

                            <Path Data="M212.02997,0L271.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.5174z" Fill="{TemplateBinding AccentForeground}" Height="8" Margin="0" Stretch="UniformToFill" Width="8"/>

                        </Button>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Here we have prepared the sample for your requirement please have a look at this.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Dhanasekar M.

Attachment: SfDataGrid_Demo_fa9d8ce2.zip