WPF基于MVVM实现自定义分页控件
本文主要用于介绍WPF基于MVVM实现自定义分页控件的代码实现。
主要功能： 自定义页码，当前页/总页数, 上一页，下一页，返回首页，返回最后一页， 利用FontAwesome作为FontFamily实现icon的功能。
本代码中的ViewModelBase的实现请参照另一篇文章：WPF MVVM ViewModelBase（造轮子实现类似MVVMLight的功能）
1. 创建PaginationControl
1.1 Color Brush
<SolidColorBrush x:Key="HighlightBrush" Color="#E84315" /> <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />1.2 PaginationControl.xaml.cs
不用更改任何代码
1.3 PaginationControl.xaml
<UserControl x:Class="MES.UI.Views.CustomControls.PaginationControl" 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:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:local="clr-namespace:MES.UI.Views.CustomControls" mc:Ignorable="d" Height="45"> <UserControl.Resources> <Style x:Key="paginationTB" TargetType="{x:Type TextBlock}"> <Setter Property="FontSize" Value="20"/> <Setter Property="FontFamily" Value="pack://application:,,,/Resources/#FontAwesome"/> <Setter Property="Margin" Value="5,15,5,10"/> <Setter Property="Foreground" Value="{StaticResource HighlightBrush}"/> <Setter Property="Cursor" Value="Hand"/> <Style.Triggers> <Trigger Property="IsEnabled" Value="True"> <Setter Property="Foreground" Value="{StaticResource HighlightBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/> </Trigger> </Style.Triggers> </Style> </UserControl.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <TextBlock Text="Page Size:" Margin="5,15,5,10"></TextBlock> <ComboBox x:Name="PageSizeComboBox" ItemsSource="{Binding PageSizes}" SelectedItem="{Binding PageSize}" Width="70" VerticalAlignment="Center" HorizontalAlignment="Center"/> <TextBlock Style="{StaticResource paginationTB}" IsEnabled="{Binding EnabledPreviousButton}" Text="" x:Name="btnFirstPage" ToolTip="First Page"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <i:InvokeCommandAction Command="{Binding FirstPageCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> <TextBlock Style="{StaticResource paginationTB}" IsEnabled="{Binding EnabledPreviousButton}" Text="" x:Name="btnPrevious" ToolTip="Previouse"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <i:InvokeCommandAction Command="{Binding PreviousPageCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> <TextBlock Name="txtCurrentPageTextBlock" Text="{Binding CurrentPageText}" Margin="5,15,5,10" VerticalAlignment="Center" /> <TextBlock Style="{StaticResource paginationTB}" IsEnabled="{Binding EnabledNextButton}" Text="" x:Name="btnNext" ToolTip="Next" > <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <i:InvokeCommandAction Command="{Binding NextPageCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> <TextBlock Style="{StaticResource paginationTB}" IsEnabled="{Binding EnabledNextButton}" Text="" x:Name="btnLastPage" ToolTip="Last Page" > <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <i:InvokeCommandAction Command="{Binding LastPageCommand}"/> </i:EventTrigger> </i:Interaction.Triggers> </TextBlock> </StackPanel> </UserControl>2. 创建PaginationControlViewModel
/// <summary>/// Pagination Control ViewModel/// </summary>publicclassPaginationControlViewModel:ViewModelBase{#regionPagination paramtersprivateint_currentPage;privateint_totalItems;privateint_pageSize=1;publicintTotalItems{get=>_totalItems;set{_totalItems=value;OnPropertyChanged(nameof(TotalItems));OnPropertyChanged(nameof(TotalPages));OnPropertyChanged(nameof(CurrentPageText));SetButtonStatus();}}publicintPageSize{get=>_pageSize;set{_pageSize=value;OnPropertyChanged(nameof(PageSize));OnPageChanged();}}publicintCurrentPage{get=>_currentPage;set{if(_currentPage!=value){_currentPage=value;OnPropertyChanged(nameof(CurrentPage));OnPageChanged();}}}publicstringCurrentPageText{get{return$"Page{CurrentPage}of{TotalPages}";}}publicintTotalPages=>(TotalItems+PageSize-1)/PageSize;privateObservableCollection<int>_pageSizes;publicObservableCollection<int>PageSizes{get{return_pageSizes;}set{_pageSizes=value;OnPropertyChanged(nameof(PageSizes));}}privatebool_enabledPreviousButton;publicboolEnabledPreviousButton{get{return_enabledPreviousButton;}set{_enabledPreviousButton=value;OnPropertyChanged(nameof(EnabledPreviousButton));}}privatebool_enabledNextButton;publicboolEnabledNextButton{get{return_enabledNextButton;}set{_enabledNextButton=value;OnPropertyChanged(nameof(EnabledNextButton));}}#endregionpublicICommandFirstPageCommand{get;}publicICommandPreviousPageCommand{get;}publicICommandNextPageCommand{get;}publicICommandLastPageCommand{get;}publiceventEventHandlerPageChanged;privateboolisInitialized=false;// avoid call OnPageChanged in initialpublicPaginationControlViewModel(){_pageSizes=newObservableCollection<int>{1,20,50,100,200,300,500};CurrentPage=1;// Initialize to the first pagePageSize=AgencyCRMConstants.DefaultPageSize;FirstPageCommand=newRelayCommand(_=>CurrentPage=1);PreviousPageCommand=newRelayCommand(_=>{if(CurrentPage>1)CurrentPage--;});NextPageCommand=newRelayCommand(_=>{if(CurrentPage<TotalPages)CurrentPage++;});LastPageCommand=newRelayCommand(_=>CurrentPage=TotalPages);isInitialized=true;}protectedvirtualvoidOnPageChanged(){if(isInitialized){PageChanged?.Invoke(this,EventArgs.Empty);}}privatevoidSetButtonStatus(){if(isInitialized){if(CurrentPage>1){EnabledPreviousButton=true;}else{EnabledPreviousButton=false;}if(CurrentPage>=1&&CurrentPage<TotalPages){EnabledNextButton=true;}else{EnabledNextButton=false;}}else{EnabledNextButton=false;EnabledPreviousButton=false;}}}3. 调用
3.1 在CompanyListViewModel中引用PaginationControlViewModel
publicclassCompanyListViewModel:ViewModelBase,IViewModelDispose{#regionAgency.CRM API UrlsprivateconststringGetByCompanyNameAsync="api/Company/GetByCompanyName?CompanyName={0}&pageNumber={1}&pageSize={2}";#endregion#regionModelsprivatereadonlyIMESHttpClientService_mesHttpClientService;privateBackgroundWorker_backgroundWorker;publicPaginationControlViewModelPaginationViewModel;privatestring?_CompanyName;publicstring?CompanyName{get{return_CompanyName;}set{_CompanyName=value;OnPropertyChanged(nameof(CompanyName));}}privatebool_isEnableExport;publicboolIsEnableExport{get{return_isEnableExport;}set{_isEnableExport=value;OnPropertyChanged(nameof(IsEnableExport));}}privateCompanyDto?_selectedCompany;publicCompanyDto?SelectedCompany{get{return_selectedCompany;}set{_selectedCompany=value;OnPropertyChanged(nameof(SelectedCompany));}}privateObservableCollection<CompanyDto>_CompanyList;publicObservableCollection<CompanyDto>CompanyList{get{return_CompanyList;}set{_CompanyList=value;OnPropertyChanged(nameof(CompanyList));}}privateintpageSize=MESConstants.DefaultPageSize;privateintcurrentPage=1;#endregion#regionctorpublicCompanyListViewModel(){_mesHttpClientService=NInjectBase.Kernel.Get<IMESHttpClientService>();_CompanyList=new();_backgroundWorker=newBackgroundWorker();_backgroundWorker.DoWork+=BackgroundWorker_DoWork;_backgroundWorker.RunWorkerCompleted+=BackgroundWorker_RunWorkerCompleted;InitialParameters();}privatevoidInitialParameters(){_CompanyName=string.Empty;PaginationViewModel=newPaginationControlViewModel();PaginationViewModel.PageSize=MESConstants.DefaultPageSize;_selectedCompany=new();PaginationInitial();}#endregion#regionICommandspublicICommand?RefreshRecordsCommand{get{returnnewDelegateCommand(()=>{RefreshRecords();});}}publicICommand?ResetFilterCommand{get{returnnewDelegateCommand(()=>{ResetFilterFunction();});}}#endregion#regionFunctionsprivatevoidResetFilterFunction(){InitialParameters();RefreshRecords();}publicvoidRefreshRecords(){AppEvents.Instance.StartProgressBar(this,newProgressBarDisplayEventArgs(AppConstants.ProgressBarMessages.Generic.LOADING));_backgroundWorker.RunWorkerAsync(newList<string>(){CompanyName,currentPage.ToString(),pageSize.ToString()});}privatevoidBackgroundWorker_RunWorkerCompleted(object?sender,RunWorkerCompletedEventArgse){if(e.Error==null){varresult=e.ResultasPagedResultDto<CompanyDto>;if(result!=null){int.TryParse(result.TotalCount.ToString(),outvartotalCount);PaginationViewModel.TotalItems=totalCount;CompanyList=result.Items;this.IsEnableExport=CompanyList?.Count>0;}else{this.IsEnableExport=false;}}AppEvents.Instance.StopProgressBar(this);}privatevoidBackgroundWorker_DoWork(object?sender,DoWorkEventArgse){try{varparameters=e.ArgumentasList<string>;if(parameters==null||parameters.Count!=3)return;usingvarhttpClient=_mesHttpClientService.GetHttpClient();stringurlWithParameters=string.Format(GetByCompanyNameAsync,parameters[0],parameters[1],parameters[2]);varresponse=httpClient.GetAsync(urlWithParameters).Result;if(response.IsSuccessStatusCode){varjson=response.Content.ReadAsStringAsync().Result;varresult=JsonConvert.DeserializeObject<PagedResultDto<CompanyDto>>(json);e.Result=result;}}catch(Exceptionex){Log.Error("Error loading CRM users",ex);}}publicvoidDisposeRecordsAndEvents(){CompanyList=new();_backgroundWorker.DoWork-=BackgroundWorker_DoWork;_backgroundWorker.RunWorkerCompleted-=BackgroundWorker_RunWorkerCompleted;_backgroundWorker.Dispose();PaginationDispose();}#endregion#regionPaginationprivatevoidPaginationInitial(){PaginationViewModel=new();PaginationViewModel.PageChanged+=PaginationControlViewModel_PageChanged;}privatevoidPaginationDispose(){PaginationViewModel.PageChanged-=PaginationControlViewModel_PageChanged;}privatevoidPaginationControlViewModel_PageChanged(object?sender,EventArgse){pageSize=PaginationViewModel.PageSize;currentPage=PaginationViewModel.CurrentPage;RefreshRecords();}#endregion}3.2 CompanyList.xaml中添加PaginationControl
<CustomControls:PaginationControl x:Name="paginationControl"></CustomControls:PaginationControl>3.3 CompanyList.xaml.cs中为PaginationControl指定DataContext
privatevoidUserControl_Loaded(objectsender,System.Windows.RoutedEventArgse){paginationControl.DataContext=ViewModel.PaginationViewModel;ViewModel.RefreshRecords();}