WPF自定义控件之ItemsControl鱼眼效果

原理

先获取鼠标在控件中的坐标，在获取其每一项相对于ItemsControl的坐标，然后计算每一项离当前鼠标的距离，在根据这个距离，对其每一项进行适当的缩放
实现

创建一个类，命名为FishEyeItemsControl
 public class FishEyeItemsControl : ItemsControl 
添加应用鱼眼效果方法（控制其控件的缩放）

1. private void ApplyFishEyeEffect(UIElement element, double strength, double additionalScale = 0.0)
2. {
3.     // 将鱼眼效果应用于控件的正中心位置
5.     // 获取控件的宽度和高度
6.     double width = element.RenderSize.Width;
7.     double height = element.RenderSize.Height;
9.     // 计算控件的正中心位置
10.     double centerX = width / 2.0;
11.     double centerY = height / 2.0;
13.     // 创建 ScaleTransform 对象并设置缩放中心为控件的正中心
14.     ScaleTransform scaleTransform = new ScaleTransform();
15.     scaleTransform.CenterX = centerX;
16.     scaleTransform.CenterY = centerY;
18.     // 根据强度调整缩放比例
19.     scaleTransform.ScaleX = strength + additionalScale;
20.     scaleTransform.ScaleY = strength + additionalScale;
22.     // 将 ScaleTransform 应用于控件的 RenderTransform
23.     element.RenderTransform = scaleTransform;
24. }

复制代码

当鼠标移入到ItemsControl区域内时，计算其项距离鼠标距离，实现鱼眼效果
CalculateStrength方法可根据实际需求进行更改

1. protected override void OnMouseMove(MouseEventArgs e)
2. {
3.     base.OnMouseMove(e);
4.     Point mousePosition = e.GetPosition(this);
5.     hoveredIndex = -1;
7.     for (int i = 0; i < Items.Count; i++)
8.     {
9.         UIElement element = ItemContainerGenerator.ContainerFromIndex(i) as UIElement;
11.         if (element != null)
12.         {
13.             Point itemPosition = element.TranslatePoint(new Point(element.RenderSize.Width / 2, element.RenderSize.Height / 2), this);
14.             double distance = CalculateDistance(mousePosition, itemPosition);
15.             double strength = CalculateStrength(distance);
17.             ApplyFishEyeEffect(element, strength, Scale);
19.             if (distance < element.RenderSize.Width)
20.             {
21.                 hoveredIndex = i;
22.             }
23.         }
24.     }
25. }
27. private double CalculateDistance(Point p1, Point p2)
28. {
29.     double dx = p1.X - p2.X;
30.     double dy = p1.Y - p2.Y;
31.     return Math.Sqrt(dx * dx + dy * dy);
32. }
34. private double CalculateStrength(double distance)
35. {
36.     // 根据距离计算变换的强度
37.     var strength = 1.0;
38.     strength = Math.Exp(-distance / 100);
39.     return strength;
40. }

复制代码

当鼠标离开ItemsControl时，进行效果还原

1. protected override void OnMouseLeave(MouseEventArgs e)
2. {
3.     base.OnMouseLeave(e);
5.     for (int i = 0; i < Items.Count; i++)
6.     {
7.         UIElement element = ItemContainerGenerator.ContainerFromIndex(i) as UIElement;
9.         if (element != null)
10.         {
11.             ApplyFishEyeEffect(element, 1.0);
12.         }
13.     }
14.     hoveredIndex = -1;
15. }

复制代码

添加背景色，如果未设置，当鼠标处于两个项之间的空间会触发OnMouseLeave
 

1. public FishEyeItemsControl()
2. {
3.     this.Background = Brushes.Transparent;
4. }

复制代码

属性
依赖属性Scale是为了在Xaml中动态修改其效果

1. private int hoveredIndex = -1;
3. #region DependencyProperty
5. public double Scale
6. {
7.     get { return (double)GetValue(ScaleProperty); }
8.     set { SetValue(ScaleProperty, value); }
9. }
11. // Using a DependencyProperty as the backing store for Scale.  This enables animation, styling, binding, etc...
12. public static readonly DependencyProperty ScaleProperty =
13.     DependencyProperty.Register("Scale", typeof(double), typeof(FishEyeItemsControl), new FrameworkPropertyMetadata(1.0, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
15. #endregion

复制代码

Xaml

1.   <zWorkUi:FishEyeItemsControl
2.       Width="800"
3.       Height="600"
4.       ItemsSource="{Binding TestList}">
5.       <zWorkUi:FishEyeItemsControl.ItemsPanel>
6.           <ItemsPanelTemplate>
7.               <WrapPanel />
8.           </ItemsPanelTemplate>
9.       </zWorkUi:FishEyeItemsControl.ItemsPanel>
10.       <zWorkUi:FishEyeItemsControl.ItemTemplate>
11.           <DataTemplate>
12.               <Border
13.                   Width="50"
14.                   Height="50"
15.                   Margin="20,20"
16.                   Background="Red" />
17.           </DataTemplate>
18.       </zWorkUi:FishEyeItemsControl.ItemTemplate>
19.   </zWorkUi:FishEyeItemsControl>

复制代码

 
效果

鼠标未进入区域时

效果1

效果2

 鼠标进入区域，移到某一项上时

效果1

效果2


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！