【WPF】翻页控件

最新推荐文章于 2024-05-13 16:13:39 发布

qq_35487415

最新推荐文章于 2024-05-13 16:13:39 发布

阅读量674

点赞数 10

文章标签： wpf

本文链接：https://blog.csdn.net/qq_35487415/article/details/135651962

版权

一、预期效果

在这里插入图片描述

二、控件实现

xaml代码如下，其中有一些样式是可以根据需求修改或去除，这边就不做修改直接贴工程代码了:

<UserControl x:Class="UIH.Umr.AppStore.Window.View.PagingUserCtrl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:UIH.Umr.AppStore.Window.Utilities"
             mc:Ignorable="d" x:Name="pagingCtrl"
             d:DesignHeight="56" d:DesignWidth="1035">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Resource/MergedSystemDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid Background="#EDEDED">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="{Binding ElementName=pagingCtrl,Path=AppCount,UpdateSourceTrigger=PropertyChanged,Converter={StaticResource appCountToStrConverter}}" Style="{StaticResource Style_TaskListHeader_Text}"/>
            <Grid x:Name="pageGrid" Margin="10 0 0 0">

                <StackPanel Orientation="Horizontal">
                    <Button Width="30" Height="30" Style="{StaticResource Style_Button_Paging_Btn}" Margin="10 0 0 0" Click="PreviousClick"
                            ContentTemplate="{DynamicResource zuofanye}" IsEnabled="{Binding ElementName=pagingCtrl,Path=FirstPage.IsPageSelected,Converter={StaticResource boolNegation}}"
                            AutomationProperties.AutomationId="PreviousPageBtn"/>
                    <RadioButton Width="30" Height="30" Style="{StaticResource Style_RadioButton_Paging_RBtn}" Margin="10 0 0 0"
                                 Content="{Binding ElementName=pagingCtrl,Path=FirstPage.PageNumber,UpdateSourceTrigger=PropertyChanged}" 
                                 IsChecked="{Binding ElementName=pagingCtrl,Path=FirstPage.IsPageSelected,UpdateSourceTrigger=PropertyChanged}" 
                                 GroupName="Paging" Checked="RadioButton_Checked"/>

                    <StackPanel Orientation="Horizontal">
                        <Button Style="{StaticResource Style_Button_Paging_HoverBtn1}" Click="PreviousFiveClick" Margin="10 0 0 0">
                            <Button.Visibility>
                                <MultiBinding Converter="{StaticResource pagingHoverBtnVisibilityConverter}" ConverterParameter="0">
                                    <Binding ElementName="pagingCtrl" Path="FivePageList"/>
                                    <Binding ElementName="pagingCtrl" Path="FirstPage"/>
                                </MultiBinding>
                            </Button.Visibility>
                            <Image Source="{StaticResource expend}" Width="14"/>
                        </Button>

                        <ItemsControl ItemsSource="{Binding ElementName=pagingCtrl,Path=FivePageList,UpdateSourceTrigger=PropertyChanged}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <RadioButton Style="{StaticResource Style_RadioButton_Paging_RBtn}" Content="{Binding PageNumber}" IsChecked="{Binding IsPageSelected}" 
                                                 GroupName="Paging" Margin="10 0 0 0" Checked="RadioButton_Checked"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

                        <Button Style="{StaticResource Style_Button_Paging_HoverBtn2}" Margin="10 0 0 0" Click="NextFiveClick">
                            <Button.Visibility>
                                <MultiBinding Converter="{StaticResource pagingHoverBtnVisibilityConverter}" ConverterParameter="1">
                                    <Binding ElementName="pagingCtrl" Path="FivePageList"/>
                                    <Binding ElementName="pagingCtrl" Path="LastPage"/>
                                </MultiBinding>
                            </Button.Visibility>
                            <Image Source="{StaticResource expend}" Width="14" />
                        </Button>
                    </StackPanel>

                    <RadioButton Width="30" Height="30" Style="{StaticResource Style_RadioButton_Paging_RBtn}" 
                                 Content="{Binding ElementName=pagingCtrl,Path=LastPage.PageNumber,UpdateSourceTrigger=PropertyChanged}" 
                                 IsChecked="{Binding ElementName=pagingCtrl,Path=LastPage.IsPageSelected,UpdateSourceTrigger=PropertyChanged}"
                                 Visibility="{Binding ElementName=pagingCtrl,Path=LastPage,Converter={StaticResource lastPageVisibilityConverter}}" Margin="10 0 0 0"
                                 GroupName="Paging" Checked="RadioButton_Checked"/>
                    <Button Width="30" Height="30" Style="{StaticResource Style_Button_Paging_Btn}" Click="NextClick" Margin="10 0 0 0"
                            ContentTemplate="{DynamicResource youfanye}"  AutomationProperties.AutomationId="NextPageBtn">
                        <Button.IsEnabled>
                            <MultiBinding Converter="{StaticResource pageToEnableConverter}">
                                <Binding ElementName="pagingCtrl" Path="LastPage"/>
                                <Binding ElementName="pagingCtrl" Path="LastPage.IsPageSelected"/>
                            </MultiBinding>
                        </Button.IsEnabled>
                    </Button>
                </StackPanel>
                
            </Grid>
            <StackPanel Orientation="Horizontal" Margin="10 0 0 0">
                <TextBlock Text="{DynamicResource UID_AppStore_Paging_Goto}" Margin="10 0 0 0" Style="{StaticResource Style_TaskListHeader_Text}"/>
                <TextBox x:Name="gotoPage" Style="{StaticResource Style_TextBox_Paging_TBox}" Margin="5 0 0 0" Width="52" Foreground="#3D404D"
                         Text="{Binding ElementName=pagingCtrl,Path=PageCount,UpdateSourceTrigger=PropertyChanged}" LostFocus="gotoPage_LostFocus"
                         KeyDown="gotoPage_KeyDown"          
                         PreviewTextInput="TextBox_PreviewTextInput"   
                         PreviewKeyDown="TextBox_PreviewKeyDown"  
                         InputMethod.IsInputMethodEnabled="False"
                         /> <!--ToolTip="{Binding Text,ElementName=gotoPage}"-->
                <TextBlock Text="{DynamicResource UID_AppStore_Paging_Page}" Margin="5 0 0 0" Style="{StaticResource Style_TaskListHeader_Text}"/>
            </StackPanel>
        </StackPanel>   
    </Grid>
</UserControl>

xaml.cs如下，这里将按钮的选中等动作通过委托事件暴露出去，在外部需要的地方进行挂接函数:

    public partial class PagingUserCtrl : UserControl
    {
        public delegate void NoParamEvent();
        public delegate void PageModelEvent(PageItemModel selectedPage);
        public event NoParamEvent PreviousPageClick;
        public event NoParamEvent NextPageClick;
        public event NoParamEvent PreviousFivePageClick;
        public event NoParamEvent NextFivePageClick;

        public event NoParamEvent GotoPage_LostFocus; //撤销此次页码编辑
        public event NoParamEvent GotoPage_EnterDown;
        public event PageModelEvent PagingRadioButton_Checked;
        public PagingUserCtrl()
        {
            InitializeComponent();
        }

        public int AppCount
        {
            get { return (int)GetValue(AppCountProperty); }
            set { SetValue(AppCountProperty, value); }
        }

        public static readonly DependencyProperty AppCountProperty =
            DependencyProperty.Register("AppCount", typeof(int), typeof(PagingUserCtrl), new UIPropertyMetadata(0));
        public int PageCount
        {
            get { return (int)GetValue(PageCountProperty); }
            set { SetValue(PageCountProperty, value); }
        }

        public static readonly DependencyProperty PageCountProperty =
            DependencyProperty.Register("PageCount", typeof(int), typeof(PagingUserCtrl), new UIPropertyMetadata(0));
        public PageItemModel FirstPage
        {
            get { return (PageItemModel)GetValue(FirstPageProperty); }
            set { SetValue(FirstPageProperty, value); }
        }

        public static readonly DependencyProperty FirstPageProperty =
            DependencyProperty.Register("FirstPage", typeof(PageItemModel), typeof(PagingUserCtrl), new UIPropertyMetadata(new PageItemModel()));
        public PageItemModel LastPage
        {
            get { return (PageItemModel)GetValue(LastPageProperty); }
            set { SetValue(LastPageProperty, value); }
        }

        public static readonly DependencyProperty LastPageProperty =
            DependencyProperty.Register("LastPage", typeof(PageItemModel), typeof(PagingUserCtrl), new UIPropertyMetadata(new PageItemModel()));
        public ObservableCollection<PageItemModel> FivePageList
        {
            get { return (ObservableCollection<PageItemModel>)GetValue(FivePageListProperty); }
            set { SetValue(FivePageListProperty, value); }
        }

        public static readonly DependencyProperty FivePageListProperty =
            DependencyProperty.Register("FivePageList", typeof(ObservableCollection<PageItemModel>), typeof(PagingUserCtrl), new UIPropertyMetadata(new ObservableCollection<PageItemModel>()));

        private void PreviousClick(object sender, RoutedEventArgs e)
        {
            if (PreviousPageClick != null)
            {
                PreviousPageClick();
            }
        }

        private void NextClick(object sender, RoutedEventArgs e)
        {
            if (NextPageClick != null)
            {
                NextPageClick();
            }
        }

        private void PreviousFiveClick(object sender, RoutedEventArgs e)
        {
            if (PreviousFivePageClick != null)
            {
                PreviousFivePageClick();
            }
        }

        private void NextFiveClick(object sender, RoutedEventArgs e)
        {
            if (NextFivePageClick != null)
            {
                NextFivePageClick();
            }
        }

        private void gotoPage_LostFocus(object sender, RoutedEventArgs e)
        {
            if (GotoPage_LostFocus != null)
            {
                GotoPage_LostFocus();
            }
        }

        private void gotoPage_KeyDown(object sender, KeyEventArgs e)
        {
            try
            {
                if (e.Key == Key.Enter)
                {
                    if (string.IsNullOrWhiteSpace(gotoPage.Text) || System.Convert.ToInt32(gotoPage.Text) > LastPage.PageNumber)
                    {
                        if (GotoPage_LostFocus != null)
                        {
                            GotoPage_LostFocus();
                        }
                        return;
                    }
                    if (GotoPage_EnterDown != null)
                    {
                        GotoPage_EnterDown();
                    }
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("gotoPage_KeyDown error : " + ex.Message);
                gotoPage.Undo();
            }
        }

        private void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if (PagingRadioButton_Checked != null)
            {
                RadioButton radioButton = sender as RadioButton;
                if (radioButton != null)
                {
                    var myObject = radioButton.DataContext as PageItemModel;
                    if (myObject != null)
                    {
                        PagingRadioButton_Checked(myObject);
                    }
                    else //选中的是首尾
                    {
                        var vm = radioButton.DataContext as AppStoreUIViewModel;
                        var page = Convert.ToInt32(radioButton.Content) == 1 ? vm.FirstPage : vm.LastPage;
                        PagingRadioButton_Checked(page);
                    }
                }
            }
        }
        private void TextBox_PreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            short val;
            if (!Int16.TryParse(e.Text, out val))
            {
                e.Handled = true;
            }

        }

        private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Space)
            {
                e.Handled = true;
            }
        }
    }

三、函数挂接和实现
1.在vm中对控件进行函数挂接：

            mainwindow.onlinePage.PreviousPageClick -= HandlePagingPreviousClick;
            mainwindow.onlinePage.PreviousPageClick += HandlePagingPreviousClick;
            mainwindow.onlinePage.NextPageClick -= HandlePagingNextClick;
            mainwindow.onlinePage.NextPageClick += HandlePagingNextClick;
            mainwindow.onlinePage.PreviousFivePageClick -= HandlePagingPreviousFiveClick;
            mainwindow.onlinePage.PreviousFivePageClick += HandlePagingPreviousFiveClick;
            mainwindow.onlinePage.NextFivePageClick -= HandlePagingNextFiveClick;
            mainwindow.onlinePage.NextFivePageClick += HandlePagingNextFiveClick;
            mainwindow.onlinePage.GotoPage_EnterDown -= HandlePagingGoToEnter;
            mainwindow.onlinePage.GotoPage_EnterDown += HandlePagingGoToEnter;
            mainwindow.onlinePage.GotoPage_LostFocus -= HandlePagingGoToCancel;
            mainwindow.onlinePage.GotoPage_LostFocus += HandlePagingGoToCancel;
            mainwindow.onlinePage.PagingRadioButton_Checked -= HandleSelectedPageChanged;
            mainwindow.onlinePage.PagingRadioButton_Checked += HandleSelectedPageChanged;

2.定义一些需要的属性：

        #region 翻页Properties

        public int _currentPageNumber = 1; //当前页码总数

        private PageItemModel _currentSelectedPage;
        /// <summary>
        /// 当前选中的页码
        /// </summary>
        public PageItemModel CurrentSelectedPage
        {
            get
            {
                return _currentSelectedPage;
            }
            set
            {
                _currentSelectedPage = value;
                AppStoreWindow.onlinePage.PageCount = value.PageNumber;
                RaisePropertyChanged("CurrentSelectedPage");
            }
        }
        private List<PageItemModel> _totalPageList = new List<PageItemModel>();
        /// <summary>
        /// 总页码列表
        /// </summary>
        public List<PageItemModel> TotalPageList
        {
            get
            {
                return _totalPageList;
            }
            set
            {
                _totalPageList = value;
                RaisePropertyChanged("TotalPageList");
            }
        }
        private ObservableCollection<PageItemModel> _middlePageList = new ObservableCollection<PageItemModel>();
        /// <summary>
        /// 非首尾页的中间显示页码
        /// </summary>
        public ObservableCollection<PageItemModel> MiddlePageList
        {
            get
            {
                return _middlePageList;
            }
            set
            {
                _middlePageList = value;
                RaisePropertyChanged("MiddlePageList");
            }
        }

        private PageItemModel _firstPage;
        /// <summary>
        /// 第一个页码
        /// </summary>
        public PageItemModel FirstPage
        {
            get
            {
                return _firstPage;
            }
            set
            {
                _firstPage = value;
                RaisePropertyChanged("FirstPage");
            }
        }

        private PageItemModel _lastPage;
        /// <summary>
        /// 最后一个页码
        /// </summary>
        public PageItemModel LastPage
        {
            get
            {
                return _lastPage;
            }
            set
            {
                _lastPage = value;
                RaisePropertyChanged("LastPage");
            }
        }
        private int _appCount = -1;
        /// <summary>
        /// 当前条件下应用总数
        /// </summary>
        public int AppCount
        {
            get
            {
                return _appCount;
            }
            set
            {
                _appCount = value;
                RaisePropertyChanged("AppCount");
            }
        }
        #endregion

3.函数实现：

        #region 翻页
        /// <summary>
        /// 根据当前应用个数更新翻页控件
        /// </summary>
        public void UpdatePaging(int appCount, int selectedPageNumber = 1)
        {
            try
            {
                _isBackChangePage = true;
                _currentPageNumber = (int)Math.Ceiling(appCount / Constant.AppCountMax);
                if (_currentPageNumber == 0)
                {
                    _currentPageNumber = 1;
                }
                AppCount = appCount;
                MiddlePageList.Clear();
                TotalPageList.Clear();
                FirstPage = new PageItemModel();
                LastPage = new PageItemModel();
                TotalPageList.Add(new PageItemModel(0)); //第0页占位
                for (var i = 1; i < _currentPageNumber + 1; i++)
                {
                    TotalPageList.Add(new PageItemModel(i));
                }
                if (_currentPageNumber == 1)
                {
                    FirstPage = TotalPageList[1];
                }
                else if (_currentPageNumber > 1 && _currentPageNumber < 9)
                {
                    FirstPage = TotalPageList[1];
                    LastPage = TotalPageList[_currentPageNumber];
                    for (var i = 2; i < _currentPageNumber; i++)
                    {
                        MiddlePageList.Add(TotalPageList[i]);
                    }
                }
                else
                {
                    FirstPage = TotalPageList[1];
                    LastPage = TotalPageList[_currentPageNumber];
                    SetMiddlePageListBySelectedPageChange(selectedPageNumber);
                }
                var selectedPage = TotalPageList.FirstOrDefault(p => p.PageNumber == selectedPageNumber);
                if (selectedPage != null)
                {
                    selectedPage.IsPageSelected = true;
                }
                CurrentSelectedPage = selectedPage;
                _isBackChangePage = false;
                PagingVisibility = (SelectedTab == TabType.Local || SelectedTab == TabType.Online) && FirstPage.PageNumber < LastPage.PageNumber ? Visibility.Visible : Visibility.Collapsed;
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("UpdatePaging error : " + ex.Message);
            }
        }
        /// <summary>
        /// 根据选中的Page，动态更新中间的显示列表
        /// </summary>
        /// <param name="selectedPageNumber"></param>
        private void SetMiddlePageListBySelectedPageChange(int selectedPageNumber)
        {
            try
            {
                int startFalge;
                if (selectedPageNumber < 5)
                {
                    startFalge = 2;
                }
                else if (selectedPageNumber > (_currentPageNumber - 4))
                {
                    startFalge = _currentPageNumber - 5;
                }
                else
                {
                    startFalge = selectedPageNumber - 2;
                }
                MiddlePageList = new ObservableCollection<PageItemModel>(TotalPageList.GetRange(startFalge, 5));
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("SetMiddlePageListBySelectedPageChange error : " + ex.Message);
            }
        }

        public void HandlePagingPreviousClick()
        {
            try
            {
                var flag = false; // 如果是不可见的RadioButton被选中，不会触发Checked事件，需自己Handle
                var currentSelectedPageNum = CurrentSelectedPage.PageNumber;
                var toSelectedPage = TotalPageList[currentSelectedPageNum - 1];
                if (_currentPageNumber > 8 &&
                    (toSelectedPage.PageNumber == _currentPageNumber - 1) &&
                    (_currentPageNumber - MiddlePageList[4].PageNumber) > 1)//从max选到max-1，但是max-1原来不可见
                {
                    SetMiddlePageListBySelectedPageChange(toSelectedPage.PageNumber);
                    flag = true;
                }
                toSelectedPage.IsPageSelected = true;
                if (flag)
                {
                    HandleSelectedPageChanged(toSelectedPage);
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingPreviousClick error : " + ex.Message);
            }
        }
        public void HandlePagingPreviousFiveClick()
        {
            try
            {
                var currentMiddlePageCenter = MiddlePageList[2].PageNumber;
                var toMiddlePageCenter = currentMiddlePageCenter > 8 ? currentMiddlePageCenter - 5 : 4;
                SetMiddlePageListBySelectedPageChange(toMiddlePageCenter);
                var toMiddlePage = TotalPageList.FirstOrDefault(p => p.PageNumber == toMiddlePageCenter);
                if (toMiddlePage != null)
                {
                    HandleSelectedPageChanged(toMiddlePage);
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingPreviousFiveClick error : " + ex.Message);
            }
        }
        public void HandlePagingNextClick()
        {
            try
            {
                var flag = false; // 如果是不可见的RadioButton被选中，不会触发Checked事件，需自己Handle
                var currentSelectedPageNum = CurrentSelectedPage.PageNumber;
                var toSelectedPage = TotalPageList[currentSelectedPageNum + 1];
                if (_currentPageNumber > 8 &&
                    (toSelectedPage.PageNumber == 2) &&
                    (MiddlePageList[0].PageNumber - 1) > 1) //从1选到2，但是2原来不可见
                {
                    SetMiddlePageListBySelectedPageChange(toSelectedPage.PageNumber);
                    flag = true;
                }
                toSelectedPage.IsPageSelected = true;
                if (flag)
                {
                    HandleSelectedPageChanged(toSelectedPage);
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingNextClick error : " + ex.Message);
            }
        }
        public void HandlePagingNextFiveClick()
        {
            try
            {
                var currentMiddlePageCenter = MiddlePageList[2].PageNumber;
                var toMiddlePageCenter = _currentPageNumber - currentMiddlePageCenter > 8 ? currentMiddlePageCenter + 5 : _currentPageNumber - 3;
                SetMiddlePageListBySelectedPageChange(toMiddlePageCenter);
                var toMiddlePage = TotalPageList.FirstOrDefault(p => p.PageNumber == toMiddlePageCenter);
                if (toMiddlePage != null)
                {
                    HandleSelectedPageChanged(toMiddlePage);
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingNextFiveClick error : " + ex.Message);
            }
        }
        public void HandlePagingGoToEnter()
        {
            try
            {
                int turnPageNum;
                if (AppStoreWindow.onlinePage.PageCount < 1 || AppStoreWindow.onlinePage.PageCount > _currentPageNumber)
                {
                    AppStoreWindow.onlinePage.PageCount = CurrentSelectedPage.PageNumber;
                    return;
                }
                else
                {
                    turnPageNum = AppStoreWindow.onlinePage.PageCount;
                }
                var turnPage = TotalPageList.FirstOrDefault(p => p.PageNumber == turnPageNum);
                if (turnPage != null)
                {
                    turnPage.IsPageSelected = true;
                    HandleSelectedPageChanged(turnPage);
                }
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingGoToEnter error : " + ex.Message);
            }
        }
        public void HandlePagingGoToCancel()
        {
            try
            {
                AppStoreWindow.onlinePage.PageCount = CurrentSelectedPage.PageNumber;
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingGoToCancel error : " + ex.Message);
            }
        }
        public void HandleSelectedPageChanged(PageItemModel selecetdPage)
        {
            try
            {
                if (CurrentSelectedPage == selecetdPage || _isBackChangePage)
                {
                    return;
                }
                selecetdPage.IsPageSelected = true;
                CurrentSelectedPage = selecetdPage;
                var selectedPage = TotalPageList.FirstOrDefault(p => p.IsPageSelected == true && p.PageNumber != CurrentSelectedPage.PageNumber);
                if (selectedPage != null)
                {
                    selectedPage.IsPageSelected = false;
                }
                switch (SelectedTab)
                {
                    case TabType.Online:
                        _OnlineAppsParams.PageNum = CurrentSelectedPage.PageNumber.ToString();
                        InitOnlineList(false);
                        break;
                    case TabType.Local:
                        SetVisibility(false);
                        break;
                }

                if (_currentPageNumber < 9)
                {
                    return;
                }
                int toMiddle = selecetdPage.PageNumber;
                if (selecetdPage.PageNumber == 1)
                {
                    toMiddle = 4;
                }
                if (selecetdPage.PageNumber == _currentPageNumber)
                {
                    toMiddle = _currentPageNumber - 3;
                }
                SetMiddlePageListBySelectedPageChange(toMiddle);
            }
            catch (Exception ex)
            {
                LogOutput.WriteErrorLog("HandlePagingGoToCancel error : " + ex.Message);
            }
        }

        #endregion

4.这边定义了一个Page的Model：
ViewModelBase是我这边将INotifyPropertyChanged的接口的继承封装了一下，大家根据自己需要去修改

    public class PageItemModel : ViewModelBase
    {
        private int _pageNumber;
        public int PageNumber
        {
            get
            {
                return _pageNumber;
            }
            set
            {
                _pageNumber = value;
                this.RaisePropertyChanged("PageNumber");
            }
        }
        private bool _isPageSelected;
        public bool IsPageSelected
        {
            get
            {
                return _isPageSelected;
            }
            set
            {
                _isPageSelected = value;
                this.RaisePropertyChanged("IsPageSelected");
            }
        }

        public PageItemModel(int pageNumber,bool isSelected = false)
        {
            _pageNumber = pageNumber;
        }
        public PageItemModel()
        {
        }
    }

5.样式：

 <Style x:Key="Style_TaskListHeader_Text" TargetType="TextBlock">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="#5C6280"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>
    <Style x:Key="Style_RadioButton_Paging_RBtn" TargetType="{x:Type RadioButton}">
        <Setter Property="Foreground" Value="#3F51B5"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment"  Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <Border x:Name="border"
                                    Background="#FFFFFF" 
                                    CornerRadius="4"
                                    BorderBrush="#E3E4EC"
                                    BorderThickness="{TemplateBinding BorderThickness}"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="grid" Value="0.4"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#EDEFF9"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#3D5AFE"/>
                            <Setter Property="Foreground" Value="#3F51B5"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#3F51B5"/>
                            <Setter Property="Foreground" Value="#FFFFFF"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#3F51B5"/>
                            <Setter Property="Foreground" Value="#FFFFFF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Style_Button_Paging_Btn" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="#3F51B5"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment"  Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                        <Border x:Name="border"
                                    Background="#FFFFFF" 
                                    CornerRadius="4"
                                    BorderBrush="#E3E4EC"
                                    BorderThickness="{TemplateBinding BorderThickness}"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="grid" Value="0.4"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#EDEFF9"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#3D5AFE"/>
                            <Setter Property="Foreground" Value="#3F51B5"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="#3F51B5"/>
                            <Setter Property="Foreground" Value="#FFFFFF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Style_TextBox_Paging_TBox" TargetType="{x:Type TextBox}">
        <Setter Property="UndoLimit" Value="0"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisualStyle}"/>
        <Setter Property="Template" Value="{DynamicResource TextBoxControlTemplate}"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="IsUndoEnabled" Value="True"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="BorderBrush" Value="#7F2F2F2E"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#DEDEDE" Offset="1"/>
                    <GradientStop Color="#E3E3E3" Offset="0"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Padding" Value="8,0"/>
        <Setter Property="Validation.ErrorTemplate" Value="{DynamicResource TextBoxErrorTemplateStyle}" />
        <!--<Setter Property="Utility:InputControlSuffix.AutoSelectAll" Value="True" />-->
        <Setter Property="ContextMenu">
            <Setter.Value>
                <ContextMenu Style="{DynamicResource Style_ContextMenu_CSW_CC_Default}">
                    <MenuItem Command="ApplicationCommands.Cut"></MenuItem>
                    <MenuItem Command="ApplicationCommands.Copy"></MenuItem>
                    <MenuItem Command="ApplicationCommands.Paste"></MenuItem>
                </ContextMenu>
            </Setter.Value>
        </Setter>

    </Style>
    <Style x:Key="Style_Button_Paging_HoverBtn1" TargetType="{x:Type Button}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment"  Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border x:Name="Border" CornerRadius="4" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <Border x:Name="BG" SnapsToDevicePixels="True" CornerRadius="{Binding CornerRadius,ElementName=Border}">
                                <ContentPresenter x:Name="btnContent" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"   HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </Border>
                        <Border x:Name="over" CornerRadius="4" Background="#1A3F51B5" Visibility="Collapsed" BorderThickness="1">
                            <Image Source="{StaticResource pagingRight}" Width="10"/>
                        </Border>
                        <Border x:Name="press" CornerRadius="4" Background="#263F51B5" Visibility="Collapsed" BorderThickness="1">
                            <Image Source="{StaticResource pagingRight}" Width="10"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Visibility" Value="Visible" TargetName="press"/>
                            <Setter Property="Visibility" Value="Collapsed" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Visibility" Value="Visible" TargetName="over"/>
                            <Setter Property="Visibility" Value="Collapsed" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="btnContent" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="Style_Button_Paging_HoverBtn2" TargetType="{x:Type Button}">
        <Setter Property="Height" Value="30"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Width" Value="30"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment"  Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Border x:Name="Border" CornerRadius="4" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <Border x:Name="BG" SnapsToDevicePixels="True" CornerRadius="{Binding CornerRadius,ElementName=Border}">
                                <ContentPresenter x:Name="btnContent" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"   HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </Border>
                        <Border x:Name="over" CornerRadius="4" Background="#1A3F51B5" Visibility="Collapsed" BorderThickness="1">
                            <Image Source="{StaticResource pagingLeft}" Width="10"/>
                        </Border>
                        <Border x:Name="press" CornerRadius="4" Background="#263F51B5" Visibility="Collapsed" BorderThickness="1">
                            <Image Source="{StaticResource pagingLeft}" Width="10"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Visibility" Value="Visible" TargetName="press"/>
                            <Setter Property="Visibility" Value="Collapsed" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Visibility" Value="Visible" TargetName="over"/>
                            <Setter Property="Visibility" Value="Collapsed" TargetName="Border"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="btnContent" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>