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" /><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实现拟物旋转按钮相关推荐
- 前端例程20210510:新拟物风格(Neumorphism)设计与实现
文章目录 前言 基础说明 更多示例 新拟物风格按钮 暗色新拟物风格卡片 新拟物风格单选按钮 总结 前言 新拟物风格(Neumorphism)是前两年兴起的一种设计风格,这个风格虽然因为特征上的一些问题 ...
- 【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
- 仪表指针样式_PS教程!教你绘制拟物仪表盘拟物图标
大家是不是觉得拟物图标是个坎?时常跃跃欲试又无从下手?或者细节分析半天最后只得出"画起来会没完没了"的结论? mmmm--要不别纠结了,打开软件,今天让我们来试着用photosho ...
- 从拟物到简约 ------谈网站设计风格的变革
哪种设计才是好的设计?其实,每种设计都有其优势也会有其不足.关键在其应用场合,以及是否能够向用户传递有效的价值.武断地决定是否采用某种技术或者不思考其能否取悦用户的设计不是好设计.好的设计不应当局限于 ...
- Sketch内的新拟物风格探索
快速跳转目录 新拟态是什么 新拟态风格展示 新拟态怎么绘制 新拟态是什么 上图应该能解释"拟物"的意思,偏向写实,重视细节的刻画,用高光.阴影.纹理.颜色等各种方式来最大程度的还原 ...
- QT旋转按钮控件的实现
目录 一.实现需求:鼠标hover时旋转 二.实现方式:计时器做动画 三.代码实现 QT旋转按钮控件的实现 一.实现需求:鼠标hover时旋转 需求是:实现类似于WINDOWS下,某些软件窗口关闭按钮 ...
- 游戏网页设计:拟物还是扁平?
游戏网页设计的扁平化设计从13年的设计潮流发展到如今的设计趋势,在网页设计中已经应用广泛.相比于曾经成为主流的质感化网页,这两者之间带给用户的体验变化究竟有哪些?以下我们来谈一谈. 扁平化设计为何如此 ...
- 【设计】拟物时钟-夜间模式切换
先看效果: HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
最新文章
- 澎思科技马原:AI安防竞争还未结束,落地进入后发优势时代 | MEET2020
- 文件操作03——图片文件合成器
- 大战设计模式【16】—— 桥接模式
- bmw info source
- 计算广告 pdf_小学生PDF格式的试卷怎么编辑修改
- 基于 MySQL Binlog 的 Elasticsearch 数据同步实践
- 大数据实验报告总结体会_建设大数据中台架构思考与总结
- C# 使用Process调用外部程序中所遇到的参数问题
- 学 Python 没找对路到底有多惨?| 码书
- php 微信登录 扫码 h5,【小程序】WeAuth微信小程序实现PC网站扫码授权登录
- android 自定义listview 多列,android listview的多列模版实例代码
- 2021-2027全球与中国数控龙门镗铣床市场现状及未来发展趋势
- 数据中心安全管理解决方案
- 微前端single-spa vue3 实战落地
- 【Git】工作区、暂存区与版本库
- 使用 Prometheus-Operator 监控 Calico
- 30+项目经理,少奋斗5年的职业规划路线
- Stata:时变Granger因果检验
- 鉴权kafka生产端(SCRAM)
- 襄阳联通推“终端+物联网卡+M2M”OA方案
热门文章
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记24 popovers弹窗
- Cisco 胖AP和瘦AP的区别
- Rails IDE 有很多选择,但是具体到ubuntu 64bit 选择的余地就不多了,这里选择Aptana Studio 3 Beta...
- FusionChart完全入门手册 -2
- LeetCode 77.组合求和
- yum 下载RPM包而不进行安装
- CAP理论与MongoDB一致性、可用性的一些思考
- Html常用标签元素
- http://www.appinn.com/bookmark-manager-chrome/
- Commons里的DButil