经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
WPF开发分页控件:实现可定制化分页功能及实现原理解析
来源:cnblogs  作者:趋时软件  时间:2024/4/3 9:36:07  对本文有异议

概要

  本文将详细介绍如何使用WPF(Windows Presentation Foundation)开发一个分页控件,并深入解析其实现原理。我们将通过使用XAML和C#代码相结合的方式构建分页控件,并确保它具有高度的可定制性,以便在不同的应用场景中满足各种需求。

一.简介

  分页控件是在许多应用程序中常见的一种界面元素,特别是在数据展示的场景中。它允许用户浏览大量数据,并根据需要切换到不同的数据页。

二.需求分析

  我们首先来分析一下一个分页控件的基本构成。

 

2.1 总条目数(TotalItems)

  表示总数据量。

2.2 每页条目数(PageSize)

  表示每页显示的条目数。

2.3 总页数(PageCount)

  表示根据总条目数与每页条目数计算出来的页数。

2.4 分页/页码按钮数量(PageNumberCount)

  分页控件中可以点击的页码按钮。

2.5 当前页(CurrentPage)

  当前显示的页,通常高亮显示。

三.控件命令和事件

3.1 页面跳转命令(GoToPageCommand)

  该命令用于在XAML代码中触发页面跳转操作。

3.2当前页变更事件

  当CurrentPage参数改变后触发该事件,通常在该事件中执行数据查询操作。

四.代码实现

  通过以上原理分析,我们提取出了分页控件需要包含的基本要素,下面我们通过这些信息来组装成一个分页控件。

  1. 1 <Style TargetType="{x:Type local:Pager}">
  2. 2 <Setter Property="Template">
  3. 3 <Setter.Value>
  4. 4 <ControlTemplate TargetType="{x:Type local:Pager}">
  5. 5 <Border Background="{TemplateBinding Background}"
  6. 6 BorderBrush="{TemplateBinding BorderBrush}"
  7. 7 BorderThickness="{TemplateBinding BorderThickness}">
  8. 8 <StackPanel Orientation="Horizontal" ClipToBounds="True">
  9. 9 <Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" Content="首页"></Button>
  10. 10 <Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="上一页"></Button>
  11. 11 <ItemsControl ItemsSource="{TemplateBinding PageButtons}">
  12. 12 <ItemsControl.ItemsPanel>
  13. 13 <ItemsPanelTemplate>
  14. 14 <StackPanel Orientation="Horizontal"/>
  15. 15 </ItemsPanelTemplate>
  16. 16 </ItemsControl.ItemsPanel>
  17. 17 <ItemsControl.ItemTemplate>
  18. 18 <DataTemplate>
  19. 19 <ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
  20. 20 Content="{Binding Page}"
  21. 21 IsChecked="{Binding IsCurrentPage}"
  22. 22 Command="{x:Static local:Pager.GoToPageCommand}"
  23. 23 CommandParameter="{Binding Page}"
  24. 24 Margin="5,0"/>
  25. 25 </DataTemplate>
  26. 26 </ItemsControl.ItemTemplate>
  27. 27 </ItemsControl>
  28. 28 <Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="下一页"></Button>
  29. 29 <Button Command="{x:Static local:Pager.GoToPageCommand}" CommandParameter="尾页" Margin="5,0,0,0" Content="{DynamicResource LastPage}"></Button>
  30. 30 </StackPanel>
  31. 31 </Border>
  32. 32 </ControlTemplate>
  33. 33 </Setter.Value>
  34. 34 </Setter>
  35. 35 </Style>

五.多样化需求

  在不同的业务场景下需要的分页控件可能不尽相同,那么如何来满足多样化需求呢,答案就是自定义控件模板。下面演示几种常见的分页控件如何实现。

只需要“上一页”、“下一页”的情况

  1. 1 <Style TargetType="{x:Type Controls:Pager}">
  2. 2 <Setter Property="Template">
  3. 3 <Setter.Value>
  4. 4 <ControlTemplate TargetType="{x:Type Controls:Pager}">
  5. 5 <Border Background="{TemplateBinding Background}"
  6. 6 BorderBrush="{TemplateBinding BorderBrush}"
  7. 7 BorderThickness="{TemplateBinding BorderThickness}">
  8. 8 <StackPanel Orientation="Horizontal" ClipToBounds="True">
  9. 9 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
  10. 10 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
  11. 11 </StackPanel>
  12. 12 </Border>
  13. 13 </ControlTemplate>
  14. 14 </Setter.Value>
  15. 15 </Setter>
  16. 16 </Style>

只需要“首页”、“上一页”、“下一页”、“尾页”的情况。

  1. 1 <Style TargetType="{x:Type Controls:Pager}">
  2. 2 <Setter Property="Template">
  3. 3 <Setter.Value>
  4. 4 <ControlTemplate TargetType="{x:Type Controls:Pager}">
  5. 5 <Border Background="{TemplateBinding Background}"
  6. 6 BorderBrush="{TemplateBinding BorderBrush}"
  7. 7 BorderThickness="{TemplateBinding BorderThickness}">
  8. 8 <StackPanel Orientation="Horizontal" ClipToBounds="True">
  9. 9 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" Content="{DynamicResource FirstPage}"></Button>
  10. 10 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
  11. 11 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
  12. 12 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{TemplateBinding PageCount}" Margin="5,0,0,0" Content="{DynamicResource LastPage}"></Button>
  13. 13 </StackPanel>
  14. 14 </Border>
  15. 15 </ControlTemplate>
  16. 16 </Setter.Value>
  17. 17 </Setter>
  18. 18 </Style>

数字显示“首页”、“尾页”的情况。

  1. 1 <Style TargetType="{x:Type Controls:Pager}">
  2. 2 <Setter Property="Template">
  3. 3 <Setter.Value>
  4. 4 <ControlTemplate TargetType="{x:Type Controls:Pager}">
  5. 5 <Border Background="{TemplateBinding Background}"
  6. 6 BorderBrush="{TemplateBinding BorderBrush}"
  7. 7 BorderThickness="{TemplateBinding BorderThickness}">
  8. 8 <StackPanel Orientation="Horizontal" ClipToBounds="True">
  9. 9 <Button Command="{x:Static Controls:Pager.GoToPageCommand}"
  10. 10 CommandParameter="1"
  11. 11 Content="1"
  12. 12 MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
  13. 13 Margin="0,0,5,0">
  14. 14 <Button.Visibility>
  15. 15 <MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}" ConverterParameter="First">
  16. 16 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
  17. 17 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
  18. 18 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
  19. 19 </MultiBinding>
  20. 20 </Button.Visibility>
  21. 21 </Button>
  22. 22 <Button IsEnabled="False" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="...">
  23. 23 <Button.Visibility>
  24. 24 <MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}" ConverterParameter="First">
  25. 25 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
  26. 26 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
  27. 27 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
  28. 28 </MultiBinding>
  29. 29 </Button.Visibility>
  30. 30 </Button>
  31. 31 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" Content="{DynamicResource PreviousPage}"></Button>
  32. 32 <ItemsControl ItemsSource="{TemplateBinding PageButtons}">
  33. 33 <ItemsControl.ItemsPanel>
  34. 34 <ItemsPanelTemplate>
  35. 35 <StackPanel Orientation="Horizontal"/>
  36. 36 </ItemsPanelTemplate>
  37. 37 </ItemsControl.ItemsPanel>
  38. 38 <ItemsControl.ItemTemplate>
  39. 39 <DataTemplate>
  40. 40 <ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
  41. 41 Content="{Binding Page}"
  42. 42 Margin="5,0"
  43. 43 IsChecked="{Binding IsCurrentPage}"
  44. 44 Command="{x:Static Controls:Pager.GoToPageCommand}"
  45. 45 CommandParameter="{Binding Page}"/>
  46. 46 </DataTemplate>
  47. 47 </ItemsControl.ItemTemplate>
  48. 48 </ItemsControl>
  49. 49 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" Content="{DynamicResource NextPage}"></Button>
  50. 50 <Button IsEnabled="False" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="...">
  51. 51 <Button.Visibility>
  52. 52 <MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}">
  53. 53 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
  54. 54 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
  55. 55 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
  56. 56 </MultiBinding>
  57. 57 </Button.Visibility>
  58. 58 </Button>
  59. 59 <Button Command="{x:Static Controls:Pager.GoToPageCommand}"
  60. 60 CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"
  61. 61 Content="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"
  62. 62 MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
  63. 63 Margin="5,0,0,0">
  64. 64 <Button.Visibility>
  65. 65 <MultiBinding Converter="{StaticResource PageNumberToVisibilityConverter}">
  66. 66 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="CurrentPage"/>
  67. 67 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageNumberCount"/>
  68. 68 <Binding RelativeSource="{RelativeSource AncestorType=Controls:Pager}" Path="PageCount"/>
  69. 69 </MultiBinding>
  70. 70 </Button.Visibility>
  71. 71 </Button>
  72. 72
  73. 73 <StackPanel Orientation="Horizontal" Margin="5,0,0,0">
  74. 74 <TextBlock Text="转到" VerticalAlignment="Center"/>
  75. 75 <TextBox x:Name="tbox_Page" Width="40" Margin="5,0" Padding="5" HorizontalContentAlignment="Center" VerticalAlignment="Center"/>
  76. 76 <TextBlock Text="页" VerticalAlignment="Center"/>
  77. 77 <Button Margin="5,0,0,0" Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{Binding ElementName=tbox_Page,Path=Text}">确定</Button>
  78. 78 </StackPanel>
  79. 79 </StackPanel>
  80. 80 </Border>
  81. 81 </ControlTemplate>
  82. 82 </Setter.Value>
  83. 83 </Setter>
  84. 84 </Style>

 可以调整每页显示条目,可以显示总页数,可以跳转到指定页的情况。

  1. 1 <Style TargetType="{x:Type Controls:Pager}">
  2. 2 <Setter Property="Template">
  3. 3 <Setter.Value>
  4. 4 <ControlTemplate TargetType="{x:Type Controls:Pager}">
  5. 5 <Border Background="{TemplateBinding Background}"
  6. 6 BorderBrush="{TemplateBinding BorderBrush}"
  7. 7 BorderThickness="{TemplateBinding BorderThickness}">
  8. 8 <StackPanel Orientation="Horizontal" ClipToBounds="True">
  9. 9 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="1" Margin="0,0,5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource FirstPage}"></Button>
  10. 10 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="-" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource PreviousPage}"></Button>
  11. 11 <ItemsControl ItemsSource="{TemplateBinding PageButtons}">
  12. 12 <ItemsControl.ItemsPanel>
  13. 13 <ItemsPanelTemplate>
  14. 14 <StackPanel Orientation="Horizontal"/>
  15. 15 </ItemsPanelTemplate>
  16. 16 </ItemsControl.ItemsPanel>
  17. 17 <ItemsControl.ItemTemplate>
  18. 18 <DataTemplate>
  19. 19 <ToggleButton MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}"
  20. 20 Content="{Binding Page}"
  21. 21 Margin="5,0"
  22. 22 IsChecked="{Binding IsCurrentPage}"
  23. 23 Command="{x:Static Controls:Pager.GoToPageCommand}"
  24. 24 CommandParameter="{Binding Page}"/>
  25. 25 </DataTemplate>
  26. 26 </ItemsControl.ItemTemplate>
  27. 27 </ItemsControl>
  28. 28 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="+" Margin="5,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource NextPage}"></Button>
  29. 29 <Button Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{TemplateBinding PageCount}" Margin="5,0,0,0" MinWidth="{Binding RelativeSource={RelativeSource Mode=Self},Path=ActualHeight}" Content="{DynamicResource LastPage}"></Button>
  30. 30 <StackPanel Orientation="Horizontal" Margin="5,0,0,0">
  31. 31 <TextBlock Margin="0,0,5,0" Text="每页" VerticalAlignment="Center"/>
  32. 32 <ComboBox Margin="5,0" SelectedIndex="0" VerticalContentAlignment="Center" SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageSize,Mode=OneWayToSource}">
  33. 33 <sys:Int32>5</sys:Int32>
  34. 34 <sys:Int32>10</sys:Int32>
  35. 35 <sys:Int32>15</sys:Int32>
  36. 36 <sys:Int32>20</sys:Int32>
  37. 37 </ComboBox>
  38. 38 <TextBlock Text="条" VerticalAlignment="Center" Margin="5,0"/>
  39. 39 <TextBlock VerticalAlignment="Center" Margin="5,0">
  40. 40 <Run Text="共"/>
  41. 41 <Run Text="{Binding RelativeSource={RelativeSource AncestorType=Controls:Pager},Path=PageCount}"/>
  42. 42 <Run Text="页"/>
  43. 43 </TextBlock>
  44. 44 <TextBlock Text="转到" VerticalAlignment="Center"/>
  45. 45 <TextBox x:Name="tbox_Page" Width="40" Margin="5,0" Padding="5" HorizontalContentAlignment="Center" VerticalAlignment="Center"/>
  46. 46 <TextBlock Text="页" VerticalAlignment="Center"/>
  47. 47 <Button Margin="5,0,0,0" Command="{x:Static Controls:Pager.GoToPageCommand}" CommandParameter="{Binding ElementName=tbox_Page,Path=Text}">确定</Button>
  48. 48 </StackPanel>
  49. 49 </StackPanel>
  50. 50 </Border>
  51. 51 </ControlTemplate>
  52. 52 </Setter.Value>
  53. 53 </Setter>
  54. 54 </Style>

  除了修改模板实现不同的形态的分页控件以外,还可以用图标替换掉“首页”、“上一页”、“下一页”、”尾页”等文字。

六.个性化控件外观

  项目中的界面外观可能多种多样,有自己写的控件样式,也有使用第三方UI库的样式,如何跟它们搭配使用呢。

自定义控件样式

  1. 1 <Style TargetType="Button">
  2. 2 <Setter Property="Padding" Value="5"/>
  3. 3 <Setter Property="Background" Value="Red"/>
  4. 4 </Style>
  5. 5 <Style TargetType="ToggleButton">
  6. 6 <Setter Property="Padding" Value="5"/>
  7. 7 <Setter Property="Background" Value="Red"/>
  8. 8 </Style>

 使用第三方UI库

1.HandyControl

  1. 1 <ResourceDictionary>
  2. 2 <ResourceDictionary.MergedDictionaries>
  3. 3 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
  4. 4 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
  5. 5 </ResourceDictionary.MergedDictionaries>
  6. 6 </ResourceDictionary>

 2.MaterialDesign

  1. 1 <ResourceDictionary>
  2. 2 <ResourceDictionary.MergedDictionaries>
  3. 3 <materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="#FF3561FF" SecondaryColor="#FF3561FF" />
  4. 4 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
  5. 5 </ResourceDictionary.MergedDictionaries>
  6. 6 </ResourceDictionary>

 

原文链接:https://www.cnblogs.com/qushi2020/p/17932338.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号