ProgressCircle
Namespace: Wisej.Web.Ext.ProgressCircle
Assembly: Wisej.Web.Ext.ProgressCircle (4.1.0.0)
Represents a circular progress indicator that displays a percentage value as an arc drawn around the perimeter of a circle.
- C#
- VB.NET
public class ProgressCircle : Canvas
Public Class ProgressCircle
Inherits Canvas
The ProgressCircle control is an example on how to create a custom component in Wisej by extending the Canvas control. The component is entirely drawn on the client side on an HTML5 canvas element using the drawing instructions sent from the server every time a property changes.
Constructors
ProgressCircle()
Initializes a new instance of ProgressCircle.
Properties
AppearanceKey
String: Returns or sets the appearance key for the theme engine. (Default: "progress-circle")
Overridden to change the default appearance key to "progress-circle" without serializing the new default in the designer. The theme appearance supplies the default values for BackColor ("backgroundColor") and LineWidth ("lineWidth").
BackColor
Color: Returns or sets the fill color used when the property FillCircle is set to true.
When the value is Empty (the default), the color is read from the "backgroundColor" property of the theme appearance identified by AppearanceKey. The color fills only the inner area of the circle, inside the progress ring.
Example:
Filling the inner area of the circle with a custom color:
this.progressCircle1.FillCircle = true;
this.progressCircle1.BackColor = Color.LightYellow;
FillCircle
Boolean: Returns or sets a value that indicates whether the circle is filled with the background color. (Default: False)
The fill color is the value of the BackColor property.
Font
Font: Returns or sets the font of the percentage text displayed in the middle of the circle.
Value: A Font.
The text is drawn only when ShowValue is true.
ForeColor
Color: Returns or sets the foreground color of the control.
Value: A Color.
The foreground color is used to draw the circle outline, the progress arc and the percentage text.
LineCap
CanvasLineCap: Returns or sets the style of the end caps of the progress arc. (Default: Butt)
LineWidth
Int32: Returns or sets the line width, in pixels, used to draw the progress ring.
When not set, the width is read from the "lineWidth" property of the theme appearance identified by AppearanceKey; if the theme doesn't define a value of at least 1, the default is 5 pixels.
Throws:
- ArgumentOutOfRangeException The value is less than 0.
ShowValue
Boolean: Returns or sets a value that indicates whether the percentage text is displayed in the middle of the circle. (Default: True)
The text is the Value followed by "%", drawn using Font and ForeColor.
Value
Int32: Returns or sets the progress value between 0 and 100. (Default: 0)
The value is a percentage: the progress arc spans 360 * Value / 100 degrees and, when ShowValue is true, the text in the middle of the circle shows the value followed by "%". Every change redraws the control.
Throws:
- ArgumentOutOfRangeException The value is less than 0 or greater than 100.
Example:
Converting a count of processed items to a percentage:
private void UpdateProgress(int processed, int total)
{
this.progressCircle1.Value = Math.Min(100, processed * 100 / total);
}
Methods
OnRedraw(e)
Draws the circle using the HTML5 canvas instructions.
| Parameter | Type | Description |
|---|---|---|
| e | EventArgs |