发帖
翼度科技»论坛 › 编程开发 › .net › 查看内容

可能是迄今为止最好用的WPF加载动画功能(没有之一)

栓哥

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
前言
　　当我们在开发应用程序时，用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时，为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式，它不仅能够告知用户应用程序正在进行工作，还能够缓解用户在等待过程中的焦虑感。
一.需求分析
    开发一个加载动画比较常见的做法一般有以下两种。
    一种是直接在控件的上层添加一层半透明遮罩，在遮罩上面显示加载动画，需要显示加载效果的时候将这个遮罩显示出来，加载完成以后隐藏这个遮罩，这种方式虽然也能实现需求，但是缺点也很明显，每次要使用加载效果的时候都需要单独添加遮罩代码，单独写控制显示和隐藏的代码，一个项目页面那么多，每次都这样整，那不得把人整崩溃了。
    还有一种实现方式是开发一个控件，在这个控件当中实现遮罩的效果，然后用这个控件把页面内容包起来，这样直接控制这个控件的属性就能实现遮罩效果，这也是很多第三方控件库的实现方式。这种方式在易用性上虽然有所提升，但是还是有上面的问题，每个要用的地方都得Copy一次代码。
    今天我们这里使用第三种方式，那就是使用装饰器来实现这个功能，它的优点就是对源代码侵入很小，不用每次使用都Copy大段代码，并且可扩展性非常强。
二.基本用法
以下为示例代码，当ViewModel中的IsLoading属性值为True时，就会触发Loading动画。
View代码：
  1. <Window
  2. <Window.Resources>
  3. <Window.Resources>
  4. <Window.Resources>
  5.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  6. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  7. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  8. </Window.Resources>x:Class="LoadingDemo.Views.MainWindow"
  9. <Window.Resources>
  10. <Window.Resources>
  11. <Window.Resources>
  12.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  13. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  14. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  15. </Window.Resources>xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  16. <Window.Resources>
  17. <Window.Resources>
  18. <Window.Resources>
  19.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  20. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  21. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  22. </Window.Resources>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  23. <Window.Resources>
  24. <Window.Resources>
  25. <Window.Resources>
  26.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  27. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  28. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  29. </Window.Resources>xmlns:extensions="clr-namespace:LoadingDemo.Extensions"
  30. <Window.Resources>
  31. <Window.Resources>
  32. <Window.Resources>
  33.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  34. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  35. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  36. </Window.Resources>xmlns:prism="http://prismlibrary.com/"
  37. <Window.Resources>
  38. <Window.Resources>
  39. <Window.Resources>
  40.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  41. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  42. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  43. </Window.Resources>Title="Loading测试"
  44. <Window.Resources>
  45. <Window.Resources>
  46. <Window.Resources>
  47.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  48. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  49. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  50. </Window.Resources>Width="1366"
  51. <Window.Resources>
  52. <Window.Resources>
  53. <Window.Resources>
  54.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  55. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  56. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  57. </Window.Resources>Height="768"
  58. <Window.Resources>
  59. <Window.Resources>
  60. <Window.Resources>
  61.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  62. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  63. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  64. </Window.Resources>prism:ViewModelLocator.AutoWireViewModel="True"
  65. <Window.Resources>
  66. <Window.Resources>
  67. <Window.Resources>
  68.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  69. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  70. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  71. </Window.Resources>FontSize="22"
  72. <Window.Resources>
  73. <Window.Resources>
  74. <Window.Resources>
  75.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  76. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  77. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  78. </Window.Resources>WindowStartupLocation="CenterScreen">
  79. <Window.Resources>
  80. <Window.Resources>
  81. <Window.Resources>
  82.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  83. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  84. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  85. </Window.Resources><Grid extensions:FrameworkElementExtension.IsLoading="{Binding IsLoading}">
  86. <Window.Resources>
  87. <Window.Resources>
  88. <Window.Resources>
  89.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  90. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  91. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  92. </Window.Resources><Window.Resources>
  93. <Window.Resources>
  94. <Window.Resources>
  95.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  96. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  97. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  98. </Window.Resources>
  99. <Window.Resources>
  100. <Window.Resources>
  101. <Window.Resources>
  102.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  103. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  104. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  105. </Window.Resources></Grid>
  106. </Window>
复制代码
ViewModel代码：
  1. namespace LoadingDemo.ViewModels
  2. {
  3. <Window.Resources>
  4. <Window.Resources>
  5. <Window.Resources>
  6.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  7. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  8. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  9. </Window.Resources>public class MainWindowViewModel : BindableBase
  10. <Window.Resources>
  11. <Window.Resources>
  12. <Window.Resources>
  13.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  14. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  15. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  16. </Window.Resources>{
  17. <Window.Resources>
  18. <Window.Resources>
  19. <Window.Resources>
  20.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  21. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  22. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  23. </Window.Resources><Window.Resources>
  24. <Window.Resources>
  25. <Window.Resources>
  26.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  27. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  28. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  29. </Window.Resources>private bool _isLoading = false;
  30. <Window.Resources>
  31. <Window.Resources>
  32. <Window.Resources>
  33.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  34. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  35. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  36. </Window.Resources><Window.Resources>
  37. <Window.Resources>
  38. <Window.Resources>
  39.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  40. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  41. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  42. </Window.Resources>public bool IsLoading
  43. <Window.Resources>
  44. <Window.Resources>
  45. <Window.Resources>
  46.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  47. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  48. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  49. </Window.Resources><Window.Resources>
  50. <Window.Resources>
  51. <Window.Resources>
  52.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  53. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  54. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  55. </Window.Resources>{
  56. <Window.Resources>
  57. <Window.Resources>
  58. <Window.Resources>
  59.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  60. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  61. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  62. </Window.Resources><Window.Resources>
  63. <Window.Resources>
  64. <Window.Resources>
  65.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  66. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  67. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  68. </Window.Resources><Window.Resources>
  69. <Window.Resources>
  70. <Window.Resources>
  71.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  72. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  73. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  74. </Window.Resources>get { return _isLoading; }
  75. <Window.Resources>
  76. <Window.Resources>
  77. <Window.Resources>
  78.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  79. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  80. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  81. </Window.Resources><Window.Resources>
  82. <Window.Resources>
  83. <Window.Resources>
  84.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  85. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  86. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  87. </Window.Resources><Window.Resources>
  88. <Window.Resources>
  89. <Window.Resources>
  90.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  91. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  92. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  93. </Window.Resources>set { this.SetProperty(ref _isLoading, value); }
  94. <Window.Resources>
  95. <Window.Resources>
  96. <Window.Resources>
  97.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  98. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  99. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  100. </Window.Resources><Window.Resources>
  101. <Window.Resources>
  102. <Window.Resources>
  103.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  104. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  105. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  106. </Window.Resources>}
  107. <Window.Resources>
  108. <Window.Resources>
  109. <Window.Resources>
  110.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  111. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  112. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  113. </Window.Resources>}
  114. }
复制代码
运行效果：

三、高级用法
2.1 FrameworkElementExtension.IsLoading只能在Grid上使用吗？
答：No，几乎所有控件都可以使用，Window、Page、UserControl、Panel、Button、Rectangle、Path、TextBox等等，都没问题，只需要将IsLoading设置为True，就会出现Loading效果。
 
2.2 我觉得加载动画不好看，有没有办法换成其它的？
答：当然可以，除了默认加载效果以外，还可以添加任意你喜欢的效果，不管它是文字、动画、视频、gif图片还是其它的东西，通通都可以，并且操作非常简单，一共有两种方式。

  • 方式一：统一添加的方式
    只需在Resources中添加一个名为MaskContent的资源，在触发加载遮罩显示的时候就会自动读取该资源作为动画元素，如果放在App.Resources中，整个项目所有加载效果都使用该资源，如果放在Window.Resources中，Window中的所有加载效果都使用该资源，以此类推。以下都是合法的代码。
 
添加自定义动画效果（用户控件）
  1. <Window.Resources>
  2. <Window.Resources>
  3. <Window.Resources>
  4.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  5. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  6. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  7. </Window.Resources>
复制代码

添加文字
  1. <Window.Resources>
  2. <Window.Resources>
  3. <Window.Resources>
  4.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  5. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  6. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  7. </Window.Resources>
复制代码

 添加进度条控件
  1. <Window.Resources>
  2. <Window.Resources>
  3. <Window.Resources>
  4.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  5. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  6. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  7. </Window.Resources>
复制代码


  • 方式二：单独添加的方式
  1. <Window
  2. <Window.Resources>
  3. <Window.Resources>
  4. <Window.Resources>
  5.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  6. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  7. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  8. </Window.Resources>x:Class="LoadingDemo.Views.MainWindow"
  9. <Window.Resources>
  10. <Window.Resources>
  11. <Window.Resources>
  12.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  13. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  14. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  15. </Window.Resources>xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  16. <Window.Resources>
  17. <Window.Resources>
  18. <Window.Resources>
  19.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  20. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  21. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  22. </Window.Resources>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  23. <Window.Resources>
  24. <Window.Resources>
  25. <Window.Resources>
  26.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  27. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  28. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  29. </Window.Resources>xmlns:extensions="clr-namespace:LoadingDemo.Extensions"
  30. <Window.Resources>
  31. <Window.Resources>
  32. <Window.Resources>
  33.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  34. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  35. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  36. </Window.Resources>xmlns:prism="http://prismlibrary.com/"
  37. <Window.Resources>
  38. <Window.Resources>
  39. <Window.Resources>
  40.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  41. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  42. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  43. </Window.Resources>Title="Loading测试"
  44. <Window.Resources>
  45. <Window.Resources>
  46. <Window.Resources>
  47.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  48. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  49. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  50. </Window.Resources>Width="1366"
  51. <Window.Resources>
  52. <Window.Resources>
  53. <Window.Resources>
  54.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  55. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  56. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  57. </Window.Resources>Height="768"
  58. <Window.Resources>
  59. <Window.Resources>
  60. <Window.Resources>
  61.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  62. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  63. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  64. </Window.Resources>prism:ViewModelLocator.AutoWireViewModel="True"
  65. <Window.Resources>
  66. <Window.Resources>
  67. <Window.Resources>
  68.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  69. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  70. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  71. </Window.Resources>FontSize="22"
  72. <Window.Resources>
  73. <Window.Resources>
  74. <Window.Resources>
  75.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  76. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  77. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  78. </Window.Resources>WindowStartupLocation="CenterScreen">
  79. <Window.Resources>
  80. <Window.Resources>
  81. <Window.Resources>
  82.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  83. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  84. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  85. </Window.Resources><Grid extensions:FrameworkElementExtension.IsLoading="{Binding IsLoading}">
  86. <Window.Resources>
  87. <Window.Resources>
  88. <Window.Resources>
  89.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  90. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  91. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  92. </Window.Resources><Window.Resources>
  93. <Window.Resources>
  94. <Window.Resources>
  95.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  96. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  97. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  98. </Window.Resources>
  99. <Window.Resources>
  100. <Window.Resources>
  101. <Window.Resources>
  102.     <ProgressBar x:Key="MaskContent" Width="150" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center" IsIndeterminate="True" />
  103. </Window.Resources><TextBlock x:Key="MaskContent" Text="加载中..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" FontWeight="Bold" Foreground="White" />
  104. </Window.Resources><controls:CustomLoading x:Key="MaskContent" Width="35" Height="35" />
  105. </Window.Resources></Grid>
  106. </Window>
复制代码

 四.综合案例

如需以上代码，请到群(661224882)共享文件中下载

来源:https://www.cnblogs.com/qushi2020/p/18101898
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 可能是迄今为止最好用的WPF加载动画功能(没有之一)

下一篇: 文件名按数字排序，可以排序多组数字，尤其是99-333~~_222这种复杂数字组合

发表于 2024-3-28 19:58:23

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4