WPF实现拟物旋转按钮

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" />
        <Image
            x: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>
                    <Border
                        Width="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:LayoutPath
                    Distribution="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

扫一扫关注我们，

更多知识早知道！

点击阅读原文可跳转至源代码