WPF实现拟物旋转按钮

WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页 加入组织

有小伙伴提出需要实现鼠标经过旋转进度条增加。

由于在WPF中没有现成的鼠标经过旋转控件，所以我们自己实现一个。

PS：有更好的方式欢迎推荐。

—

代码如下

一、创建 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>

—

效果预览

鸣谢素材提供者 - 王涛

源码地址如下

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