WPF開發者QQ群：?340500857? | 微信群 -> 進入公眾號主頁?加入組織

?

有小伙伴提出需要實現鼠標經過旋轉進度條增加。??? ??? ?? ?? ? ? ? ? ? ???

? ? ?由于在WPF中沒有現成的鼠標經過旋轉控件，所以我們自己實現一個。

PS：有更好的方式歡迎推薦。

01

—

代碼如下

一、創建?VolumeControl.cs 繼承?UserControl代碼如下。

VolumeControl.cs實現思路如下

1、TicksArray?：存放刻度值集合?。

2、處理鼠標按下，鼠標移動，鼠標抬起 事件?。

3、將鼠標移動將坐標點轉為角度。

Math.Atan2

4、設置圖片2的角度。

using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using WPFDevelopers.Controls;namespace WPFDevelopers.Samples.ExampleViews {/// <summary>/// VolumeControl.xaml 的交互邏輯/// </summary>public partial class VolumeControl : UserControl{public static readonly DependencyProperty AngleProperty =DependencyProperty.Register("Angle", typeof(double), typeof(VolumeControl), new UIPropertyMetadata());public double Angle{get { return (double)GetValue(AngleProperty); }set { SetValue(AngleProperty, value); }}public IList<ScaleItem> TicksArray{get { return (IList<ScaleItem>)GetValue(TicksArrayProperty); }private set { SetValue(TicksArrayProperty, value); }}public static readonly DependencyProperty TicksArrayProperty =DependencyProperty.Register("TicksArray", typeof(IList<ScaleItem>), typeof(VolumeControl));private Point _center;private Brush defaultColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#151515"));private Brush selectColor = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF81FB00"));public VolumeControl(){InitializeComponent();List<ScaleItem> shortticks = new List<ScaleItem>();for (int i = 0; i < 36; i++)shortticks.Add(new ScaleItem { Index = i, Background = defaultColor });shortticks[0].Background = selectColor;this.TicksArray = shortticks;_center = new Point(this.ActualWidth / 2, this.ActualHeight / 2);this.MouseLeftButtonDown += new MouseButtonEventHandler(OnMouseLeftButtonDown);this.MouseUp += new MouseButtonEventHandler(OnMouseUp);this.MouseMove += new MouseEventHandler(OnMouseMove);}private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e){Mouse.Capture(this);}private void OnMouseUp(object sender, MouseButtonEventArgs e){Mouse.Capture(null);}private void OnMouseMove(object sender, MouseEventArgs e){if (Mouse.Captured == this){if (Angle >= 360){Angle = 0;TicksArray.ToList().ForEach(y =>{if (y.Index.Equals(0))y.Background = selectColor;y.Background = defaultColor;});}var curPoint = e.GetPosition(this);var relPoint = new Point(curPoint.X - _center.X, curPoint.Y - _center.Y);var angle = Math.Atan2(relPoint.X, relPoint.Y);Angle += angle;var max = Angle / 10;TicksArray.Where(x => x.Index <= max).ToList().ForEach(y =>{y.Background = selectColor;});}}} }

二、創建VolumeControl.xaml代碼如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.VolumeControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"Width="400" Height="400"><Grid><Image Source="/WPFDevelopers.Samples;component/Images/ZooSemy/0.png" /><Imagex:Name="PART_Image"RenderTransformOrigin="0.5,0.5"Source="/WPFDevelopers.Samples;component/Images/ZooSemy/1.png"><Image.RenderTransform><RotateTransform Angle="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:VolumeControl}}, Path=Angle}" /></Image.RenderTransform></Image><Ellipse x:Name="PART_Ellipse" Margin="70"RenderTransformOrigin="0.5,0.5"><Ellipse.RenderTransform><RotateTransform Angle="-90" /></Ellipse.RenderTransform></Ellipse><ec:PathListBox IsHitTestVisible="False" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:VolumeControl}}, Path=TicksArray}"><ec:PathListBox.ItemTemplate><DataTemplate><BorderWidth="16"Height="16"Background="{Binding Background}"BorderBrush="#353537"BorderThickness="1"CornerRadius="3"SnapsToDevicePixels="True"UseLayoutRounding="True" ><TextBlock Text="{Binding Index}"HorizontalAlignment="Center"Foreground="White"/></Border></DataTemplate></ec:PathListBox.ItemTemplate><ec:PathListBox.LayoutPaths><ec:LayoutPathDistribution="Even"Orientation="OrientToPath"SourceElement="{Binding ElementName=PART_Ellipse}" /></ec:PathListBox.LayoutPaths></ec:PathListBox></Grid> </UserControl>

三、創建ZooSemyExample.xaml代碼如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.ZooSemyExample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"><Grid><local:VolumeControl/></Grid> </UserControl>

02

—

效果預覽

鳴謝素材提供者 - 王濤

源碼地址如下

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF開發者QQ群：?340500857?

blogs：?https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出處：https://www.cnblogs.com/yanjinhua

版權：本作品采用「署名-非商業性使用-相同方式共享 4.0 國際」許可協議進行許可。

轉載請著名作者 出處 https://github.com/yanjinhuagood

掃一掃關注我們，

更多知識早知道！

點擊閱讀原文可跳轉至源代碼

總結

以上是生活随笔為你收集整理的WPF实现拟物旋转按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。