WPF circle progress bar -
i want replace regular progressbar circle 1 , after shot search here in forum found want.
circularprogressbar.xaml
<grid> <path x:name="pathroot" stroke="{binding segmentcolor, elementname=usercontrol}" strokethickness="{binding strokethickness, elementname=usercontrol}" horizontalalignment="left" verticalalignment="top"> <path.data> <pathgeometry> <pathgeometry.figures> <pathfigurecollection> <pathfigure x:name="pathfigure"> <pathfigure.segments> <pathsegmentcollection> <arcsegment x:name="arcsegment" sweepdirection="clockwise" /> </pathsegmentcollection> </pathfigure.segments> </pathfigure> </pathfigurecollection> </pathgeometry.figures> </pathgeometry> </path.data> </path> </grid> circularprogressbar.cs:
public partial class circularprogressbar : usercontrol { public circularprogressbar() { initializecomponent(); angle = (percentage * 360) / 100; renderarc(); } public int radius { { return (int)getvalue(radiusproperty); } set { setvalue(radiusproperty, value); } } public brush segmentcolor { { return (brush)getvalue(segmentcolorproperty); } set { setvalue(segmentcolorproperty, value); } } public int strokethickness { { return (int)getvalue(strokethicknessproperty); } set { setvalue(strokethicknessproperty, value); } } public double percentage { { return (double)getvalue(percentageproperty); } set { setvalue(percentageproperty, value); } } public double angle { { return (double)getvalue(angleproperty); } set { setvalue(angleproperty, value); } } // using dependencyproperty backing store percentage. enables animation, styling, binding, etc... public static readonly dependencyproperty percentageproperty = dependencyproperty.register("percentage", typeof(double), typeof(circularprogressbar), new propertymetadata(65d, new propertychangedcallback(onpercentagechanged))); // using dependencyproperty backing store strokethickness. enables animation, styling, binding, etc... public static readonly dependencyproperty strokethicknessproperty = dependencyproperty.register("strokethickness", typeof(int), typeof(circularprogressbar), new propertymetadata(5, new propertychangedcallback(onthicknesschanged))); // using dependencyproperty backing store segmentcolor. enables animation, styling, binding, etc... public static readonly dependencyproperty segmentcolorproperty = dependencyproperty.register("segmentcolor", typeof(brush), typeof(circularprogressbar), new propertymetadata(new solidcolorbrush(colors.red), new propertychangedcallback(oncolorchanged))); // using dependencyproperty backing store radius. enables animation, styling, binding, etc... public static readonly dependencyproperty radiusproperty = dependencyproperty.register("radius", typeof(int), typeof(circularprogressbar), new propertymetadata(25, new propertychangedcallback(onpropertychanged))); // using dependencyproperty backing store angle. enables animation, styling, binding, etc... public static readonly dependencyproperty angleproperty = dependencyproperty.register("angle", typeof(double), typeof(circularprogressbar), new propertymetadata(120d, new propertychangedcallback(onpropertychanged))); private static void oncolorchanged(dependencyobject sender, dependencypropertychangedeventargs args) { circularprogressbar circle = sender circularprogressbar; circle.set_color((solidcolorbrush)args.newvalue); } private static void onthicknesschanged(dependencyobject sender, dependencypropertychangedeventargs args) { circularprogressbar circle = sender circularprogressbar; circle.set_tick((int)args.newvalue); } private static void onpercentagechanged(dependencyobject sender, dependencypropertychangedeventargs args) { circularprogressbar circle = sender circularprogressbar; if (circle.percentage > 100) circle.percentage = 100; circle.angle = (circle.percentage * 360) / 100; } private static void onpropertychanged(dependencyobject sender, dependencypropertychangedeventargs args) { circularprogressbar circle = sender circularprogressbar; circle.renderarc(); } public void set_tick(int n) { pathroot.strokethickness = n; } public void set_color(solidcolorbrush n) { pathroot.stroke = n; } public void renderarc() { point startpoint = new point(radius, 0); point endpoint = computecartesiancoordinate(angle, radius); endpoint.x += radius; endpoint.y += radius; pathroot.width = radius * 2 + strokethickness; pathroot.height = radius * 2 + strokethickness; pathroot.margin = new thickness(strokethickness, strokethickness, 0, 0); bool largearc = angle > 180.0; size outerarcsize = new size(radius, radius); pathfigure.startpoint = startpoint; if (startpoint.x == math.round(endpoint.x) && startpoint.y == math.round(endpoint.y)) endpoint.x -= 0.01; arcsegment.point = endpoint; arcsegment.size = outerarcsize; arcsegment.islargearc = largearc; } private point computecartesiancoordinate(double angle, double radius) { // convert radians double anglerad = (math.pi / 180.0) * (angle - 90); double x = radius * math.cos(anglerad); double y = radius * math.sin(anglerad); return new point(x, y); } } mainwindow.xaml:
<grid.rowdefinitions> <rowdefinition height="*"/> <rowdefinition height="auto"/> </grid.rowdefinitions> <stackpanel orientation="horizontal" horizontalalignment="center" verticalalignment="center"> <grid horizontalalignment="center" verticalalignment="center"> <designincontrol:circularprogressbar horizontalalignment="center" verticalalignment="center" segmentcolor="#ff878889" strokethickness="25" percentage="100" /> <designincontrol:circularprogressbar horizontalalignment="center" verticalalignment="center" percentage="{binding value, elementname=slider}" segmentcolor="#026873" strokethickness="25" /> </grid> <grid horizontalalignment="center" verticalalignment="center"/> <grid horizontalalignment="center" verticalalignment="center"/> <grid horizontalalignment="center" verticalalignment="center"/> </stackpanel> <slider x:name="slider" grid.row="1" maximum="100" value="60" /> </grid> and result:
http://s21.postimg.org/xymj8k4pz/image.png
so after copy paste same code solution , running can see slider withou circle bar, code:
<stackpanel orientation="horizontal" horizontalalignment="center" verticalalignment="center" margin="530,303,114,303"> <grid horizontalalignment="center" verticalalignment="center"> <designincontrol:circularprogressbar horizontalalignment="center" verticalalignment="center" segmentcolor="#ff878889" strokethickness="8" percentage="100" /> <designincontrol:circularprogressbar horizontalalignment="center" verticalalignment="center" percentage="{binding value, elementname=slider}" segmentcolor="#026873" strokethickness="8" /> </grid> </stackpanel> <slider x:name="slider" maximum="100" value="20" width="200" margin="597,185,227,495" /> am doing wrong ?
you missed x:name="usercontrol" in usercontrol definition:
<usercontrol x:name="usercontrol" x:class="designincontrol.circularprogressbar" 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"> <grid> <path x:name="pathroot" stroke="{binding segmentcolor, elementname=usercontrol}" strokethickness="{binding strokethickness, elementname=usercontrol}" horizontalalignment="left" verticalalignment="top"> <path.data> ... 
Comments
Post a Comment