ورود

View Full Version : سوال: Progress bar دایره ای شکل



kiarash_90
چهارشنبه 23 بهمن 1392, 12:21 عصر
سلام دوستان.
من یه Progress bar دایره ای شکل میخوام درست کنم .
یه کد پیدا کردم شما هم نظرتون رو راجع این کد بگید.
اگر میشه کمک کنید که به شکل زیر در بیارم.
http://upload7.ir/imgs/2014-02/95183385772696768144.png


<UserControl x:Class="DopaScript.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"
mc:Ignorable="d"
DataContext="{Binding RelativeSource={RelativeSource self}}"
d:DesignHeight="300" d:DesignWidth="300" Loaded="UserControl_Loaded" SizeChanged="UserControl_SizeChanged">
<Grid x:Name="mainGrid">

<Ellipse Margin="0,0,0,0" Name="backgroundEllipse1" Fill="GreenYellow">
<Ellipse.Clip>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<EllipseGeometry x:Name="backgroundEllipseMask1" Center="150,150" RadiusX="100" RadiusY="100"></EllipseGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry x:Name="backgroundEllipseMask2" Center="150,150" RadiusX="100" RadiusY="100"></EllipseGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Ellipse.Clip>
</Ellipse>

<Ellipse Margin="0,0,0,0" Name="ellipse1" Fill="Green">
<Ellipse.Clip>

<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<PathGeometry>
<PathFigure x:Name="pathFigure_arc1" StartPoint="{Binding Path=StartUp}">
<ArcSegment IsLargeArc="false"
Size="{Binding Path=CircleSize}"
Point="{Binding Path=StartDown}"
SweepDirection="Clockwise"
x:Name="ArcSegment_arc1" />
</PathFigure>

<PathFigure x:Name="pathFigure_arc2" StartPoint="{Binding Path=StartDown}">
<ArcSegment IsLargeArc="false"
Size="{Binding Path=CircleSize}"
Point="{Binding Path=StartUp}"
SweepDirection="Clockwise"
x:Name="ArcSegment_arc2" />
</PathFigure>

<PathFigure x:Name="segment1" IsClosed="True" StartPoint="{Binding Path=StartUp}">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment x:Name="segment1_seg1" Point="{Binding Path=CircleCenter}" />
<LineSegment x:Name="segment1_seg2" Point="300,150" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>

<PathFigure x:Name="segment2" IsClosed="True" StartPoint="{Binding Path=StartDown}">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment x:Name="segment2_seg1" Point="{Binding Path=CircleCenter}" />
<LineSegment x:Name="segment2_seg2" Point="100,50" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>

</PathGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry x:Name="EllipseMask" Center="150,150" RadiusX="100" RadiusY="100"></EllipseGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>

</Ellipse.Clip>
</Ellipse>
<TextBlock HorizontalAlignment="Center" Name="textBlockCenter" Text="0 %" VerticalAlignment="Center" />
</Grid>
</UserControl>





using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.ComponentModel;

namespace DopaScript
{
public partial class CircularProgressBar : UserControl
{
#region Properties
private double _strokeThickness = 10;
[Category("ProgressBar")]
public double StrokeThickness
{
get { return _strokeThickness; }
set
{
_strokeThickness = value;
DrawCircle();
}
}

private bool _showValue = true;
[Category("ProgressBar")]
public bool ShowValue
{
get { return _showValue; }
set { _showValue = value; DrawCircle(); }
}

private Brush _backgroundStroke = Brushes.LightGreen;
[Category("ProgressBar")]
public Brush BackgroundStroke
{
get { return _backgroundStroke; }
set
{
_backgroundStroke = value;
DrawCircle();
}
}

private Brush _stroke = Brushes.Green;
[Category("ProgressBar")]
public Brush Stroke
{
get { return _stroke; }
set
{
_stroke = value;
DrawCircle();
}
}

private double _value = 45;
[Category("ProgressBar")]
public double Value
{
get { return _value; }
set
{
_value = value;
DrawCircle();
}
}

private double _maxValue = 100;
[Category("ProgressBar")]
public double MaxValue
{
get { return _maxValue; }
set
{
_maxValue = value;
DrawCircle();
}
}

private double _minValue = 0;
[Category("ProgressBar")]
public double MinValue
{
get { return _minValue; }
set
{
_minValue = value;
DrawCircle();
}
}
#endregion

public CircularProgressBar()
{
InitializeComponent();
}

#region Calculs
private double Pourcent
{
get
{
if (_value > _maxValue)
{
return 100.0d;
}
else if (_value < _minValue)
{
return 0.0d;
}
else
{
return (100.0d / (_maxValue - _minValue)) * (_value - _minValue);
}
}
}

private double Angle
{
get { return (360.0d / 100) * Pourcent; }
}

private Point StartUp
{
get { return new Point(mainGrid.Width / 2, 0); }
}

private Point StartDown
{
get { return new Point(mainGrid.Width / 2, mainGrid.Height); }
}

private Point CircleCenter
{
get { return new Point(mainGrid.Width / 2, mainGrid.Height / 2); }
}

private Size CircleSize
{
get { return new Size(mainGrid.Width / 2, mainGrid.Height / 2); }
}

private double HalfWidth
{
get { return mainGrid.Width / 2; }
}

private double HalfHeight
{
get { return mainGrid.Height / 2; }
}

private double CircleWidth
{
get { return mainGrid.Width ; }
}

private double CircleHeight
{
get { return mainGrid.Height; }
}

private double DegreeToRadian(double angle)
{
return Math.PI * angle / 360.0d;
}
#endregion

#region DrawFunctions
public void ResizeMainGrid()
{
if (this.ActualHeight > this.ActualWidth)
{
mainGrid.Height = this.ActualWidth;
mainGrid.Width = this.ActualWidth;
}
else
{
mainGrid.Height = this.ActualHeight;
mainGrid.Width = this.ActualHeight;
}
}

public void CalculSize()
{
ResizeMainGrid();

pathFigure_arc1.StartPoint = StartUp;
ArcSegment_arc1.Size = CircleSize;
ArcSegment_arc1.Point = StartDown;


pathFigure_arc2.StartPoint = StartDown;
ArcSegment_arc2.Size = CircleSize;
ArcSegment_arc2.Point = StartUp;

segment1.StartPoint = StartUp;
segment1_seg1.Point = CircleCenter;

segment2.StartPoint = StartDown;
segment2_seg1.Point = CircleCenter;

EllipseMask.Center = CircleCenter;

double EllipseMaskX = (CircleWidth / 2) - _strokeThickness;
double EllipseMaskY = (CircleHeight / 2) - _strokeThickness;
if (EllipseMaskX < 0) EllipseMaskX = 0;
if (EllipseMaskY < 0) EllipseMaskY = 0;
EllipseMask.RadiusX = EllipseMaskX;
EllipseMask.RadiusY = EllipseMaskY;

backgroundEllipse1.Fill = _backgroundStroke;

backgroundEllipseMask1.Center = CircleCenter;
backgroundEllipseMask1.RadiusX = CircleWidth;
backgroundEllipseMask1.RadiusY = CircleHeight;

backgroundEllipseMask2.Center = CircleCenter;
backgroundEllipseMask2.RadiusX = EllipseMaskX;
backgroundEllipseMask2.RadiusY = EllipseMaskY;
}

public void CalculBar()
{
double angle = Angle;
if (angle < 180.0d)
{
double arc1X = (Math.Cos(DegreeToRadian((angle) - 90.0d) * 2) * HalfWidth) + HalfWidth;
double arc1Y = (Math.Sin(DegreeToRadian((angle) - 90.0d) * 2) * HalfHeight) + HalfHeight;
ArcSegment_arc1.Point = new Point(arc1X, arc1Y);
ArcSegment_arc2.Point = StartDown;
segment1_seg2.Point = new Point(arc1X, arc1Y);
segment2.IsFilled = false;
segment1.IsFilled = true;
}
else
{
ArcSegment_arc1.Point = StartDown;
double arc2X = (Math.Cos(DegreeToRadian((angle) - 90.0d) * 2) * HalfWidth) + HalfWidth;
double arc2Y = (Math.Sin(DegreeToRadian((angle) - 90.0d) * 2) * HalfHeight) + HalfHeight;
ArcSegment_arc2.Point = new Point(arc2X, arc2Y);
segment2_seg2.Point = new Point(arc2X, arc2Y);
segment1.IsFilled = false;
segment2.IsFilled = true;
}
}

private void DrawCircle()
{
CalculSize();
CalculBar();
textBlockCenter.FontStyle = this.FontStyle;
textBlockCenter.FontSize = this.FontSize;
textBlockCenter.Visibility = _showValue ? Visibility.Visible : Visibility.Hidden;
textBlockCenter.Text = Pourcent.ToString("##0") + " %";

ellipse1.Fill = _stroke;
}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
DrawCircle();
}

private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
{
DrawCircle();
}
#endregion

}
}

behnam263
جمعه 09 اسفند 1392, 22:40 عصر
Sams WPF Control Development Unleashed (2009 این رو بخون