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

WPF 模仿前端大佬写一个Hover效果

松桃建维

2

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
显示全部楼层
先看一下效果吧：

 
原博主的地址:【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco - 博客园 (cnblogs.com)
原效果是一个css效果,我们采用WPF的方式模仿一下
因为技术有限，没有原博主的那么好看，毕竟盗版永远比不过原版...
然后这里看一下盗版的怎么写吧
先是拿到原版的图片(原博客里面有图片地址)，当然也可以自己挑一张自己喜欢的图片,把图片保存到自己的WPF项目下面

 再把图片运用到代码里面去，给一个border的背景设置成图片，再给border设置一个圆角，就会得到一个圆角的图片
  1. <Border.Clip>
  2.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  3. </Border.Clip><Grid>
  4. <Border.Clip>
  5.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  6. </Border.Clip><Border.Clip>
  7.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  8. </Border.Clip><Grid x:Name="gd1" Height="400" Width="300">
  9. <Border.Clip>
  10.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  11. </Border.Clip><Border.Clip>
  12.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  13. </Border.Clip><Border.Clip>
  14.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  15. </Border.Clip><Border Margin="50" CornerRadius="30">
  16. <Border.Clip>
  17.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  18. </Border.Clip><Border.Clip>
  19.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  20. </Border.Clip><Border.Clip>
  21.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  22. </Border.Clip><Border.Clip>
  23.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  24. </Border.Clip><Border.Background>
  25. <Border.Clip>
  26.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  27. </Border.Clip><Border.Clip>
  28.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  29. </Border.Clip><Border.Clip>
  30.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  31. </Border.Clip><Border.Clip>
  32.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  33. </Border.Clip><Border.Clip>
  34.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  35. </Border.Clip><ImageBrush ImageSource="08.jpg"/>
  36. <Border.Clip>
  37.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  38. </Border.Clip><Border.Clip>
  39.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  40. </Border.Clip><Border.Clip>
  41.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  42. </Border.Clip><Border.Clip>
  43.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  44. </Border.Clip></Border.Background>
  45. <Border.Clip>
  46.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  47. </Border.Clip><Border.Clip>
  48.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  49. </Border.Clip><Border.Clip>
  50.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  51. </Border.Clip></Border>
  52. <Border.Clip>
  53.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  54. </Border.Clip><Border.Clip>
  55.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  56. </Border.Clip></Grid>
  57. <Border.Clip>
  58.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  59. </Border.Clip></Grid>
复制代码

然后再给图片添加一个模糊效果
模糊效果的实现就是在图片的下面一层添加一个同样的border，但是设置不同的margin，让它比正常显示的图片大一圈
  1. <Border.Clip>
  2.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  3. </Border.Clip><Grid>
  4. <Border.Clip>
  5.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  6. </Border.Clip><Border.Clip>
  7.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  8. </Border.Clip><Grid x:Name="gd1" Height="400" Width="300">
  9. <Border.Clip>
  10.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  11. </Border.Clip><Border.Clip>
  12.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  13. </Border.Clip><Border.Clip>
  14.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  15. </Border.Clip><Border Margin="50" CornerRadius="30">
  16. <Border.Clip>
  17.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  18. </Border.Clip><Border.Clip>
  19.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  20. </Border.Clip><Border.Clip>
  21.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  22. </Border.Clip><Border.Clip>
  23.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  24. </Border.Clip><Border.Background>
  25. <Border.Clip>
  26.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  27. </Border.Clip><Border.Clip>
  28.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  29. </Border.Clip><Border.Clip>
  30.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  31. </Border.Clip><Border.Clip>
  32.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  33. </Border.Clip><Border.Clip>
  34.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  35. </Border.Clip><ImageBrush ImageSource="08.jpg"/>
  36. <Border.Clip>
  37.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  38. </Border.Clip><Border.Clip>
  39.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  40. </Border.Clip><Border.Clip>
  41.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  42. </Border.Clip><Border.Clip>
  43.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  44. </Border.Clip></Border.Background>
  45. <Border.Clip>
  46.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  47. </Border.Clip><Border.Clip>
  48.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  49. </Border.Clip><Border.Clip>
  50.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  51. </Border.Clip></Border>
  52. <Border.Clip>
  53.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  54. </Border.Clip><Border.Clip>
  55.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  56. </Border.Clip></Grid>
  57. <Border.Clip>
  58.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  59. </Border.Clip></Grid>
复制代码
红色部分就是添加的模糊层,添加以后就会得到下面的效果

 然后最重要的就是剩下的hover效果了:
我们先准备一个背景色，原版的背景色我不知道怎么实现，所以只能用不同的背景色做为底色了

把这个背景放到最下面就会得到下面的效果(这里遇到个问题，不知道怎么把超出border以外的虚化效果裁掉，导致border以外也有一点点的模糊效果)
(原博是通过设置外层的overflow: hidden; 来实现的，但是我不知道wpf怎么实现这个效果，查了半天也没查到)

代码如下，就是就是一个带有渐变色的border
  1. <Border.Clip>
  2.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  3. </Border.Clip><Grid>
  4. <Border.Clip>
  5.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  6. </Border.Clip><Border.Clip>
  7.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  8. </Border.Clip><Grid x:Name="gd1" Height="400" Width="300">
  9. <Border.Clip>
  10.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  11. </Border.Clip><Border.Clip>
  12.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  13. </Border.Clip><Border.Clip>
  14.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  15. </Border.Clip><Border Margin="50" CornerRadius="30">
  16. <Border.Clip>
  17.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  18. </Border.Clip><Border.Clip>
  19.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  20. </Border.Clip><Border.Clip>
  21.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  22. </Border.Clip><Border.Clip>
  23.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  24. </Border.Clip><Border.Background>
  25. <Border.Clip>
  26.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  27. </Border.Clip><Border.Clip>
  28.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  29. </Border.Clip><Border.Clip>
  30.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  31. </Border.Clip><Border.Clip>
  32.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  33. </Border.Clip><Border.Clip>
  34.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  35. </Border.Clip><ImageBrush ImageSource="08.jpg"/>
  36. <Border.Clip>
  37.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  38. </Border.Clip><Border.Clip>
  39.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  40. </Border.Clip><Border.Clip>
  41.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  42. </Border.Clip><Border.Clip>
  43.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  44. </Border.Clip></Border.Background>
  45. <Border.Clip>
  46.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  47. </Border.Clip><Border.Clip>
  48.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  49. </Border.Clip><Border.Clip>
  50.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  51. </Border.Clip></Border>
  52. <Border.Clip>
  53.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  54. </Border.Clip><Border.Clip>
  55.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  56. </Border.Clip></Grid>
  57. <Border.Clip>
  58.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  59. </Border.Clip></Grid><Border.Clip>
  60.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  61. </Border.Clip><Grid>
  62. <Border.Clip>
  63.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  64. </Border.Clip><Border.Clip>
  65.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  66. </Border.Clip><Grid x:Name="gd1" Height="400" Width="300">
  67. <Border.Clip>
  68.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  69. </Border.Clip><Border.Clip>
  70.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  71. </Border.Clip><Border.Clip>
  72.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  73. </Border.Clip><Border Margin="50" CornerRadius="30">
  74. <Border.Clip>
  75.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  76. </Border.Clip><Border.Clip>
  77.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  78. </Border.Clip><Border.Clip>
  79.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  80. </Border.Clip><Border.Clip>
  81.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  82. </Border.Clip><Border.Background>
  83. <Border.Clip>
  84.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  85. </Border.Clip><Border.Clip>
  86.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  87. </Border.Clip><Border.Clip>
  88.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  89. </Border.Clip><Border.Clip>
  90.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  91. </Border.Clip><Border.Clip>
  92.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  93. </Border.Clip><ImageBrush ImageSource="08.jpg"/>
  94. <Border.Clip>
  95.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  96. </Border.Clip><Border.Clip>
  97.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  98. </Border.Clip><Border.Clip>
  99.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  100. </Border.Clip><Border.Clip>
  101.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  102. </Border.Clip></Border.Background>
  103. <Border.Clip>
  104.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  105. </Border.Clip><Border.Clip>
  106.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  107. </Border.Clip><Border.Clip>
  108.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  109. </Border.Clip></Border>
  110. <Border.Clip>
  111.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  112. </Border.Clip><Border.Clip>
  113.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  114. </Border.Clip></Grid>
  115. <Border.Clip>
  116.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  117. </Border.Clip></Grid><Border.Clip>
  118.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  119. </Border.Clip><Grid>
  120. <Border.Clip>
  121.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  122. </Border.Clip><Border.Clip>
  123.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  124. </Border.Clip><Grid x:Name="gd1" Height="400" Width="300">
  125. <Border.Clip>
  126.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  127. </Border.Clip><Border.Clip>
  128.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  129. </Border.Clip><Border.Clip>
  130.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  131. </Border.Clip><Border Margin="50" CornerRadius="30">
  132. <Border.Clip>
  133.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  134. </Border.Clip><Border.Clip>
  135.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  136. </Border.Clip><Border.Clip>
  137.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  138. </Border.Clip><Border.Clip>
  139.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  140. </Border.Clip><Border.Background>
  141. <Border.Clip>
  142.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  143. </Border.Clip><Border.Clip>
  144.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  145. </Border.Clip><Border.Clip>
  146.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  147. </Border.Clip><Border.Clip>
  148.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  149. </Border.Clip><Border.Clip>
  150.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  151. </Border.Clip><ImageBrush ImageSource="08.jpg"/>
  152. <Border.Clip>
  153.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  154. </Border.Clip><Border.Clip>
  155.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  156. </Border.Clip><Border.Clip>
  157.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  158. </Border.Clip><Border.Clip>
  159.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  160. </Border.Clip></Border.Background>
  161. <Border.Clip>
  162.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  163. </Border.Clip><Border.Clip>
  164.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  165. </Border.Clip><Border.Clip>
  166.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  167. </Border.Clip></Border>
  168. <Border.Clip>
  169.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  170. </Border.Clip><Border.Clip>
  171.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  172. </Border.Clip></Grid>
  173. <Border.Clip>
  174.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  175. </Border.Clip></Grid><Border.Clip>
  176.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  177. </Border.Clip><Border.Clip>
  178.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  179. </Border.Clip><Border.Clip>
  180.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  181. </Border.Clip><Border.Clip>
  182.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  183. </Border.Clip><Border.Clip>
  184.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  185. </Border.Clip>
复制代码
然后就是实现hover效果,在实现hover效果以前先给bd2添加一个clip效果
UIElement.Clip 属性 (System.Windows) | Microsoft Learn
关于clip的解释,可以看一下微软对于clip效果的说明
  1. <Border.Clip>
  2.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  3. </Border.Clip>
复制代码
把这段代码放到明为bd2的border下面就可以了
但是还需要一些后台代码，控制一下这个clip的移动,我们给最外层的名为gd1的grid添加几个事件
  1. public MainWindow(){<Border.Clip>
  2.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  3. </Border.Clip>InitializeComponent();<Border.Clip>
  4.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  5. </Border.Clip>gd1.MouseMove += MainGrid_MouseMove;<Border.Clip>
  6.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  7. </Border.Clip>gd1.MouseLeave += Bd1_MouseLeave;<Border.Clip>
  8.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  9. </Border.Clip>gd1.MouseEnter += Bd1_MouseEnter;}private void Bd1_MouseEnter(object sender, MouseEventArgs e){<Border.Clip>
  10.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  11. </Border.Clip>bd2.Visibility = Visibility.Visible;}private void Bd1_MouseLeave(object sender, MouseEventArgs e){<Border.Clip>
  12.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  13. </Border.Clip>bd2.Visibility = Visibility.Hidden;}private void MainGrid_MouseMove(object sender, MouseEventArgs e){<Border.Clip>
  14.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  15. </Border.Clip>//这里获取一下鼠标的坐标，然后让clip效果的中心跟着鼠标中心移动<Border.Clip>
  16.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  17. </Border.Clip>Point mousePosition = e.GetPosition(gd1);<Border.Clip>
  18.     <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
  19. </Border.Clip>eg1.Center = new Point(mousePosition.X, mousePosition.Y);}
复制代码
然后我们让默认情况下bd2的 Visibility="Hidden" 
效果就完成了...
如果有更好的解决办法，可以和我联系哦。
 
项目github地址：bearhanQ/WPFFramework: Share some experience (github.com)
QQ技术交流群：332035933；
欢迎进群讨论问题，不论是winform，还是wpf，还是.net core的，还有很多萌妹.
 

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

本帖子中包含更多资源

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

x

上一篇: 关于Protobuf在使用中的一些注意点

下一篇: vs2022不安装docker desktop可以打包镜像吗

发表于 2024-8-23 16:02:12

举报 回复 使用道具

返回列表 发新帖

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

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