手把手教你 用 wpf 制作metro ProgressRing 原创.docx
- 文档编号:11933736
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:16
- 大小:23.22KB
手把手教你 用 wpf 制作metro ProgressRing 原创.docx
《手把手教你 用 wpf 制作metro ProgressRing 原创.docx》由会员分享,可在线阅读,更多相关《手把手教你 用 wpf 制作metro ProgressRing 原创.docx(16页珍藏版)》请在冰豆网上搜索。
手把手教你用wpf制作metroProgressRing原创
效果图:
bolg地址:
还在羡慕metro的ProgressRing吗?
wpf也可以拥有
首先说下思路,
一共6个点围绕一直圆转,所以需要使用rotation动画并且一直转下去。
那么下面的问题就好解决了。
首先是xaml部分
我们需要实现旋转动画:
所以要用到这个:
[html]viewplaincopyprint?
1. 2. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 3. 0: 0"/> 4. 0: 0.2"> 5. 6. 0: 1.6"> 7. 8. 0: 1.8"> 9. 10. 0: 3.2"/> 11. 0: 3.4"> 12. 13. 0: 5.0"> 14. 15.
0: 0"/> 0: 0.2"> 0: 1.6"> 0: 1.8"> 0: 3.2"/> 0: 3.4"> 0: 5.0"> 上面这一段是单个ellipse的运动轨迹,当然你需要在属性中设置他的中心点值 代码如下: [html]viewplaincopyprint? 1. Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" > 2. 3. 4. 5. 6. 7. 8. 9. 10. Name="el"Width="10"Height="10"Fill="White"Canvas.Left="73"Canvas.Top="57"> 接下来的事情就好办了,我们需要他转1圈就消失结束后也消失,所以需要控制透明度, [html]viewplaincopyprint? 1. 2. Storyboard.TargetProperty="Opacity"> 3. 0: 0"/> 4. 0: 0.2"> 5. 6. 7. 8. 9. 0: 1.6"> 10. 11. 0: 1.8"> 12. 13. 0: 3.2"/> 14. 0: 3.5"> 15. 16. 17. 18. 19. 0: 5.0"> 20. 21. 0: 0"/> 0: 0.2"> 0: 1.6"> 0: 1.8"> 0: 3.2"/> 0: 3.5"> 0: 5.0"> 最终把一个圆变成多个圆的工作就交给代码了,需要一点点小技巧以下使用.net4.5实现其他版本可以吧Task.Delay替换成Thread.Sleep [html]viewplaincopyprint? 1. 2. xmlns=" 3. xmlns: x=" 4. xmlns: mc="http: //schemas.openxmlformats.org/markup-compatibility/2006" 5. xmlns: d=" 6. xmlns: i=" 7. xmlns: local="clr-namespace: Transvalue.MetroStyleBusyIndicator" 8. x: Class="Transvalue.MetroStyleBusyIndicator.MetroRotaionIndicator" 9. mc: Ignorable="d" 10. d: DesignHeight="300" d: DesignWidth="300"> 11. 12. Key="Trans" RepeatBehavior="Forever"> 13. 14. Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 15. 0: 0"/> 16. 0: 0.2"> 17. 18. 0: 1.6"> 19. 20. 0: 1.8"> 21. 22. 0: 3.2"/> 23. 0: 3.4"> 24. 25. 0: 5.0"> 26. 27. 28. 29. Storyboard.TargetProperty="Opacity"> 30. 0: 0"/> 31. 0: 0.2"> 32. 33. 34. 35. 36. 0: 1.6"> 37. 38. 0: 1.8"> 39. 40. 0: 3.2"/> 41. 0: 3.5"> 42. 43. 44. 45. 46. 0: 5.0"> 47. 48. 49. 50. 51. 52. Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" > 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. Name="el2" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0" > 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. Name="el3" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0"> 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. Name="el4" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 手把手教你 wpf 制作metro ProgressRing 原创 手把手 制作 metro