downkyi/DownKyi/CustomControl/CustomPager.xaml

<UserControl
    x:Class="DownKyi.CustomControl.CustomPager"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:local="clr-namespace:DownKyi.CustomControl"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DrawingImage x:Key="ToLeftDrawingImage">
            <DrawingImage.Drawing>
                <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                    <DrawingGroup.Transform>
                        <TranslateTransform X="0" Y="1.7763568394002505E-15" />
                    </DrawingGroup.Transform>
                    <GeometryDrawing Brush="#FF666666" Geometry="F1 M1024,1024z M0,0z M345.49,512L778.27,80.69Q791.47,66.02 791.47,46.95 791.47,27.88 777.54,13.94 763.6,-1.77635683940025E-15 744.53,-1.77635683940025E-15 725.46,-1.77635683940025E-15 710.79,14.67L247.2,478.26Q232.53,492.93 232.53,512 232.53,531.07 247.2,545.74L710.79,1009.33Q725.46,1024 744.53,1024 763.6,1024 777.54,1010.07 791.47,996.13 791.47,977.06 791.47,957.98 778.27,943.31L345.49,512z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
        <DrawingImage x:Key="ToLeftHoverDrawingImage">
            <DrawingImage.Drawing>
                <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                    <DrawingGroup.Transform>
                        <TranslateTransform X="0" Y="1.7763568394002505E-15" />
                    </DrawingGroup.Transform>
                    <GeometryDrawing Brush="#FF00A1D6" Geometry="F1 M1024,1024z M0,0z M345.49,512L778.27,80.69Q791.47,66.02 791.47,46.95 791.47,27.88 777.54,13.94 763.6,-1.77635683940025E-15 744.53,-1.77635683940025E-15 725.46,-1.77635683940025E-15 710.79,14.67L247.2,478.26Q232.53,492.93 232.53,512 232.53,531.07 247.2,545.74L710.79,1009.33Q725.46,1024 744.53,1024 763.6,1024 777.54,1010.07 791.47,996.13 791.47,977.06 791.47,957.98 778.27,943.31L345.49,512z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>

        <DrawingImage x:Key="ToRightDrawingImage">
            <DrawingImage.Drawing>
                <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                    <DrawingGroup.Transform>
                        <TranslateTransform X="0" Y="1.7763568394002505E-15" />
                    </DrawingGroup.Transform>
                    <GeometryDrawing Brush="#FF666666" Geometry="F1 M1024,1024z M0,0z M678.51,512L245.73,80.69Q232.53,66.02 232.53,46.95 232.53,27.88 246.46,13.94 260.4,-1.77635683940025E-15 279.47,-1.77635683940025E-15 298.54,-1.77635683940025E-15 313.21,14.67L776.8,478.26Q791.47,492.93 791.47,512 791.47,531.07 776.8,545.74L313.21,1009.33Q298.54,1024 279.47,1024 260.4,1024 246.46,1010.07 232.53,996.13 232.53,977.06 232.53,957.98 245.73,943.31L678.51,512z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
        <DrawingImage x:Key="ToRightHoverDrawingImage">
            <DrawingImage.Drawing>
                <DrawingGroup ClipGeometry="M0,0 V1024 H1024 V0 H0 Z">
                    <DrawingGroup.Transform>
                        <TranslateTransform X="0" Y="1.7763568394002505E-15" />
                    </DrawingGroup.Transform>
                    <GeometryDrawing Brush="#FF00A1D6" Geometry="F1 M1024,1024z M0,0z M678.51,512L245.73,80.69Q232.53,66.02 232.53,46.95 232.53,27.88 246.46,13.94 260.4,-1.77635683940025E-15 279.47,-1.77635683940025E-15 298.54,-1.77635683940025E-15 313.21,14.67L776.8,478.26Q791.47,492.93 791.47,512 791.47,531.07 776.8,545.74L313.21,1009.33Q298.54,1024 279.47,1024 260.4,1024 246.46,1010.07 232.53,996.13 232.53,977.06 232.53,957.98 245.73,943.31L678.51,512z" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>

        <Style x:Key="pagerBorder" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="#FFFFFFFF" />
            <Setter Property="BorderBrush" Value="#FFD7DDE4" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="4" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Cursor" Value="Hand" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" Value="#FF00A1D6" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="false">
                    <Setter Property="BorderBrush" Value="#FFD7DDE4" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="pagerButton" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#FFFFFFFF" />
            <Setter Property="BorderBrush" Value="#FFD7DDE4" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="4">
                            <ContentPresenter
                                Name="content"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="BorderBrush" Value="#FF00A1D6" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="false">
                    <Setter Property="BorderBrush" Value="#FFD7DDE4" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <StackPanel Orientation="Horizontal" Visibility="{Binding Visibility}">
        <Button
            x:Name="namePrevious"
            Margin="0,0,8,0"
            Command="{Binding PreviousCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding PreviousVisibility}">
            <Image
                Width="16"
                Height="16"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePrevious}" Value="True">
                                <Setter Property="Source" Value="{StaticResource ToLeftHoverDrawingImage}" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePrevious}" Value="False">
                                <Setter Property="Source" Value="{StaticResource ToLeftDrawingImage}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </Button>

        <Button
            x:Name="nameFirst"
            Margin="0,0,4,0"
            Command="{Binding FirstCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding FirstVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding First, Mode=TwoWay}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameFirst}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameFirst}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Border
            Width="20"
            Height="40"
            Margin="0,0,4,0"
            Visibility="{Binding LeftJumpVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Foreground="#FF666666"
                Text="&#x2022;&#x2022;&#x2022;" />
        </Border>

        <Button
            x:Name="namePreviousSecond"
            Margin="0,0,4,0"
            Command="{Binding PreviousSecondCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding PreviousSecondVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding PreviousSecond, Mode=TwoWay}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePreviousSecond}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePreviousSecond}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Button
            x:Name="namePreviousFirst"
            Margin="0,0,4,0"
            Command="{Binding PreviousFirstCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding PreviousFirstVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding PreviousFirst, Mode=TwoWay}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePreviousFirst}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=namePreviousFirst}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Border
            Margin="0,0,4,0"
            Background="#FF00A1D6"
            BorderThickness="0"
            Style="{StaticResource pagerBorder}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Foreground="#FFFFFFFF"
                Text="{Binding Current, Mode=TwoWay}" />
        </Border>

        <Button
            x:Name="nameNextFirst"
            Margin="0,0,4,0"
            Command="{Binding NextFirstCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding NextFirstVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding NextFirst, Mode=TwoWay}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNextFirst}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNextFirst}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Button
            x:Name="nameNextSecond"
            Margin="0,0,4,0"
            Command="{Binding NextSecondCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding NextSecondVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding NextSecond, Mode=TwoWay}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNextSecond}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNextSecond}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Border
            Width="20"
            Height="40"
            Margin="0,0,4,0"
            Visibility="{Binding RightJumpVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Foreground="#FF666666"
                Text="&#x2022;&#x2022;&#x2022;" />
        </Border>

        <Button
            x:Name="nameLast"
            Margin="0,0,4,0"
            Command="{Binding LastCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding LastVisibility}">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontSize="14"
                Text="{Binding Count}">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameLast}" Value="True">
                                <Setter Property="Foreground" Value="#FF00A1D6" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameLast}" Value="False">
                                <Setter Property="Foreground" Value="#FF657180" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Button>

        <Button
            x:Name="nameNext"
            Margin="4,0,4,0"
            Command="{Binding NextCommand}"
            Style="{StaticResource pagerButton}"
            Visibility="{Binding NextVisibility}">
            <Image
                Width="16"
                Height="16"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
                <Image.Style>
                    <Style TargetType="Image">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNext}" Value="True">
                                <Setter Property="Source" Value="{StaticResource ToRightHoverDrawingImage}" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=nameNext}" Value="False">
                                <Setter Property="Source" Value="{StaticResource ToRightDrawingImage}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </Button>

    </StackPanel>
</UserControl>