基于wpf實現(xiàn)擬物音量控件

wpf 實現(xiàn)擬物音量控件

控件名：wheel

作者：wpfdevelopersorg -俞宏偉

原文鏈接：https://github.com/wpfdevelopersorg/simulationcontrol

• 框架使用.net6；
• visual studio 2022;
• 繪制使用了canvas作為容器控件,drawingcontext上繪制水平線。
• 當(dāng)鼠標(biāo)滾動滾輪時或按下鼠標(biāo)向上向下拖動時計算角度偏移并更新圖層。

實現(xiàn)代碼

1）創(chuàng)建wheel.xaml代碼如下:

<usercontrol?x:class="topcontrol.wheel"
?????????????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:topcontrol"
?????????????mc:ignorable="d"?
?????????????width="30"?height="180">
????<grid>
????????<!--?進度?-->
????????<grid?width="2"?background="#0a0a0a"?height="180"?horizontalalignment="left"?verticalalignment="bottom"/>
????????<grid?width="2"?x:name="grid_value"?height="0"?horizontalalignment="left"?verticalalignment="bottom">
????????????<grid?height="180"?verticalalignment="bottom">
????????????????<grid.background>
????????????????????<lineargradientbrush?startpoint="0,0"?endpoint="0,1">
????????????????????????<gradientstop?offset="0"?color="#f0d967"/>
????????????????????????<gradientstop?offset="1"?color="#33b08d"/>
????????????????????</lineargradientbrush>
????????????????</grid.background>
????????????</grid>
????????</grid>
????????<grid?background="#0a0a0a"?width="26"?horizontalalignment="right"?height="180"?margin="2,0,0,0"/>
????????<!--?滾輪?-->
????????<grid?x:name="wheelarea"?height="176"?width="22"?horizontalalignment="right"?margin="0,0,2,0"
??????????????mousedown="wheelarea_mousedown"?mousemove="wheelarea_mousemove"?mouseup="wheelarea_mouseup"?mousewheel="wheelarea_mousewheel">
????????????<grid.background>
????????????????<lineargradientbrush?startpoint="0,0"?endpoint="0,1">
????????????????????<gradientstop?color="#141414"?offset="0"/>
????????????????????<gradientstop?color="#3c3c3c"?offset="0.5"/>
????????????????????<gradientstop?color="#141414"?offset="1"/>
????????????????</lineargradientbrush>
????????????</grid.background>
????????????<grid?x:name="layerbox"?ishittestvisible="false"/>
????????</grid>
????</grid>
</usercontrol>

2）創(chuàng)建wheel.xaml.cs代碼如下:

using?system.windows;
using?system.windows.controls;
using?system.windows.input;

namespace?topcontrol
{
????public?partial?class?wheel?:?usercontrol
????{
????????public?wheel()
????????{
????????????initializecomponent();
????????????loaded?+=?wheel_loaded;
????????}

????????#region?屬性

????????public?int?minvalue?{?get;?set;?}?=?-720;

????????public?int?maxvalue?{?get;?set;?}?=?720;

????????public?int?value?{?get;?set;?}?=?-720;

????????#endregion

????????#region?控件事件

????????private?void?wheel_loaded(object?sender,?routedeventargs?e)
????????{
????????????initlayer();
????????}

????????private?void?wheelarea_mousedown(object?sender,?mousebuttoneventargs?e)
????????{
????????????if?(e.changedbutton?==?mousebutton.left)
????????????{
????????????????begindrag();
????????????}
????????}

????????private?void?wheelarea_mousemove(object?sender,?mouseeventargs?e)
????????{
????????????if?(_dragmode)
????????????{
????????????????drag();
????????????}
????????}

????????private?void?wheelarea_mouseup(object?sender,?mousebuttoneventargs?e)
????????{
????????????if?(e.changedbutton?==?mousebutton.left?&&?_dragmode)
????????????{
????????????????enddrag();
????????????}
????????}

????????private?void?wheelarea_mousewheel(object?sender,?mousewheeleventargs?e)
????????{
????????????if?(_dragmode)?return;

????????????int?offset?=?e.delta?/?120;
????????????if?(offset?<?0?&&?value?>?minvalue)
????????????{
????????????????value?+=?offset;
????????????????updateprogress();
????????????????_wheellayer.angleoffset?-=?offset?*?_wheelspeed;
????????????????_wheellayer.updatelayer();
????????????}
????????????else?if?(offset?>?0?&&?value?<?maxvalue)
????????????{
????????????????value?+=?offset;
????????????????updateprogress();
????????????????_wheellayer.angleoffset?-=?offset?*?_wheelspeed;
????????????????_wheellayer.updatelayer();
????????????}
????????}

????????#endregion

????????#region?鼠標(biāo)操作

????????private?void?begindrag()
????????{
????????????_dragmode?=?true;
????????????wheelarea.capturemouse();

????????????_dragstart?=?mouse.getposition(wheelarea);
????????????_anglestart?=?_wheellayer.angleoffset;

????????????_valuestart?=?value;
????????????_offsetdown?=?value?-?minvalue;
????????????_offsetup?=?value?-?maxvalue;
????????}

????????private?void?drag()
????????{
????????????double?offset_y?=?mouse.getposition(wheelarea).y?-?_dragstart.y;
????????????if?(offset_y?<?_offsetup)?offset_y?=?_offsetup;
????????????else?if?(offset_y?>?_offsetdown)?offset_y?=?_offsetdown;

????????????double?offset_angle?=?offset_y?*?_wheelspeed;
????????????value?=?_valuestart?-?(int)offset_y;
????????????_wheellayer.angleoffset?=?_anglestart?+?offset_angle;
????????????updateprogress();
????????????_wheellayer.updatelayer();
????????}

????????private?void?enddrag()
????????{
????????????_dragmode?=?false;
????????????wheelarea.releasemousecapture();
????????}

????????#endregion

????????#region?私有方法

????????///?<summary>
????????///?初始化圖層
????????///?</summary>
????????private?void?initlayer()
????????{
????????????_wheellayer.width?=?layerbox.actualwidth;
????????????_wheellayer.height?=?layerbox.actualheight;
????????????layerbox.children.add(_wheellayer);
????????????_wheellayer.init();
????????????_wheellayer.updatelayer();
????????}

????????///?<summary>
????????///?更新進度
????????///?</summary>
????????private?void?updateprogress()
????????{
????????????grid_value.height?=?(double)(value?-?minvalue)?/?(maxvalue?-?minvalue)?*?180;
????????}

????????#endregion

????????#region?字段

????????private?readonly?wheellayer?_wheellayer?=?new?wheellayer();

????????private?point?_dragstart?=?new?point();
????????private?double?_anglestart?=?0;
????????private?int?_valuestart?=?0;
????????private?bool?_dragmode?=?false;

????????///?<summary>滾輪速度</summary>
????????private?readonly?double?_wheelspeed?=?0.7;

????????///?<summary>最大向上偏移</summary>
????????private?double?_offsetup;
????????///?<summary>最大向下偏移</summary>
????????private?double?_offsetdown;

????????#endregion
????}
}

3）創(chuàng)建wheellayer.cs代碼如下:

using?mathutil;
using?system;
using?system.collections.generic;
using?system.runtime.compilerservices;
using?system.windows;
using?system.windows.media;
using?wpfutil;

namespace?topcontrol
{
????public?class?wheellayer?:?singlelayer
????{
????????#region?屬性

????????///?<summary>槽高度：180px -?上下邊框（4px）</summary>
????????public?int?grooveheight?{?get;?set;?}?=?176;

????????///?<summary>角度：圓弧切線與槽邊的夾角</summary>
????????public?int?angle?{?get;?set;?}?=?90;

????????///?<summary>刻度線數(shù)量</summary>
????????public?int?linecount?{?get;?set;?}?=?90;

????????///?<summary>角度偏移</summary>
????????public?double?angleoffset?{?get;?set;?}?=?0;

????????#endregion

????????#region?公開方法

????????public?override?void?init()
????????{
????????????//?起點、終點、中點
????????????point2d?startpoint?=?new?point2d(0,?0);
????????????point2d?endpoint?=?new?point2d(grooveheight,?0);
????????????point2d?centerpoint?=?startpoint.centerwith(endpoint);
????????????//?向量：中點?->?起點
????????????vector2?centertostart?=?new?vector2(centerpoint,?startpoint);
????????????centertostart.rotate(-90);
????????????//?向量：終點?->?中點
????????????vector2?endtocenter?=?new?vector2(endpoint,?centerpoint);
????????????endtocenter.rotate(-90?+?angle);
????????????//?圓心
????????????_circlecenter?=?centertostart.intersectionwith(endtocenter);
????????????//?向量：圓心?->?起點
????????????vector2?vector?=?new?vector2(_circlecenter,?startpoint);
????????????_radius?=?vector.distance;
????????????_angleperline?=?360.0?/?linecount;
????????}

????????protected?override?void?onupdate()
????????{
????????????//?最高點
????????????point2d?top?=?new?point2d(_circlecenter.x,?_circlecenter.y?-?_radius);
????????????//?向量：圓心?->?最高點
????????????vector2?vector?=?new?vector2(_circlecenter,?top);
????????????double?max?=?math.abs(vector.target.y);
????????????//?偏移角度
????????????vector.rotate(angleoffset);
????????????//?開始旋轉(zhuǎn)計算刻度位置
????????????list<point2d>?pointlist?=?new?list<point2d>();
????????????for?(int?counter?=?0;?counter?<?linecount;?counter++)
????????????{
????????????????if?(vector.target.y?<?0)?pointlist.add(vector.target);
????????????????vector.rotate(-_angleperline);
????????????}

????????????//?繪制刻度線
????????????foreach?(var?item?in?pointlist)
????????????????drawhorizontalline(item.x,?math.abs(item.y)?/?max);
????????}

????????#endregion

????????#region?私有方法

????????///?<summary>
????????///?繪制水平線
????????///?</summary>
????????[methodimpl(methodimploptions.aggressiveinlining)]
????????private?void?drawhorizontalline(double?y,?double?opacity)
????????{
????????????pen?pen?=?new?pen(new?solidcolorbrush(color.fromargb((byte)(opacity?*?255),?32,?32,?32)),?1);
????????????pen?pen2?=?new?pen(new?solidcolorbrush(color.fromargb((byte)(opacity?*?255),?64,?64,?64)),?1);
????????????_dc.drawline(pen,?new?point(2,?y?-?0.5),?new?point(width?-?2,?y?-?0.5));
????????????_dc.drawline(pen2,?new?point(2,?y?+?0.5),?new?point(width?-?2,?y?+?0.5));
????????}

????????#endregion

????????#region?字段

????????///?<summary>圓心</summary>
????????private?point2d?_circlecenter?=?new?point2d(0,?0);
????????///?<summary>半徑</summary>
????????private?double?_radius?=?0;
????????///?<summary>刻度線之間的夾角</summary>
????????private?double?_angleperline?=?0;

????????#endregion
????}
}

4）創(chuàng)建wheelexample.xaml代碼如下:

<wd:window?x:class="topcontrol.mainwindow"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
????????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
????????xmlns:local="clr-namespace:topcontrol"
????????xmlns:wd="https://github.com/wpfdevelopersorg/wpfdevelopers"
????????mc:ignorable="d"?background="#1e1e1e"
????????title="https://github.com/wpfdevelopersorg/simulationcontrol?-?俞宏偉"?height="450"?width="800">
????<grid>
????????<local:wheel?horizontalalignment="left"?verticalalignment="top"?margin="50"/>
????</grid>
</wd:window>

效果圖

以上就是基于wpf實現(xiàn)擬物音量控件的詳細(xì)內(nèi)容，更多關(guān)于wpf擬物音量控件的資料請關(guān)注碩編程其它相關(guān)文章！