Johnny Shumway - Johnny's Custom VS Components

Dual Radial Progress Bar Documentation

Overview:

The DualRadialProgressBar is a custom control for WinForms that displays two radial progress bars, one inside the other. The outer ring represents the overall progress, while the inner ring shows a task's progress. The component also supports an indeterminate state, where both rings animate like a spinning loader, and a completed state, where the rings are filled and a completion color is applied.

Features:

Dual Radial Progress Bars: The control uses two circular progress bars (inner and outer).
Indeterminate State: Displays an animated spinning effect when progress is unknown or indefinite.
Completed State: Indicates task completion with a color change to the rings.
Task Text: Allows the display of custom text (e.g., "Loading...") in the center of the progress bars.
Text Padding and Scaling: Adjustable text padding with dynamic scaling to fit text.
Color Customization: Fully customizable colors for different parts of the progress bar.
Percentage Display: Option to show the progress percentage inside the control.

Properties:

Appearance:

OuterCircleColor (Color): The color of the outer circle (default: DodgerBlue).
InnerCircleColor (Color): The color of the inner circle (default: LimeGreen).
BackgroundColor (Color): The color of the background rings (default: LightGray).
TextColor (Color): The color of the text in the center of the progress bar (default: Black).
IndeterminateGlowColor (Color): The color of the glowing effect during indeterminate state (default: Golden).
ShowPercentage (bool): Whether to display the percentage in the center (default: true).
DisplayFont (Font): Font used for the text displayed in the center (default: Arial, 10pt, Bold).
CompletedColor (Color): The color applied when the progress is complete (default: DarkGreen).

Behavior:

Progress (int): Represents the outer circle's progress as a percentage (0 to 100).

TaskProgress (int): Represents the inner circle's progress as a percentage (0 to 100).

Indeterminate (bool): Determines if the control is in the indeterminate (spinning) state.

Completed (bool): Indicates if the progress has been completed. Changes the ring color to CompletedColor.

TaskText (string): Custom text to display in the center of the progress bar.

Text and Padding:

TextPadding (int): Padding for positioning the task text inside the control.

Methods:

Parameters:

progress: The progress for the outer circle.
taskProgress: The progress for the inner circle.
taskDescription: The text to display in the center.

Description: Updates both the progress bars and task description. Stops the indeterminate animation once progress is available.

RunTaskAsync:

public async Task RunTaskAsync();

Description: Simulates a long-running task, updating progress over time. Sets the progress bar to indeterminate, updates it as the task progresses, and then shows a completion message once done.

OnPaint:

protected override void OnPaint(PaintEventArgs e);

Description: Custom rendering logic for the radial progress bars and the center text. The method calculates the progress sweep for each circle and draws arcs using the specified colors. It also handles text scaling and positioning.

OnResize:

protected override void OnResize(EventArgs e);

Description: Ensures the control resizes correctly, with a minimum size of 150x150, and invalidates the control for repaint after resizing.

ShortenFilePath:

private string ShortenFilePath(string text);

Description: A helper method to shorten the text if it exceeds 30 characters. This is used for displaying task descriptions.

Indeterminate State Animation:

The indeterminate state features a spinner effect where both the inner and outer circles rotate smoothly.
The outerAngle and innerAngle variables are updated continuously in the timer tick event to create the animation.
The scaleFactor is used to make the rings subtly grow and shrink in a lung-like motion.

Usage Example:

DualRadialProgressBar progressBar = new DualRadialProgressBar();

progressBar.Size = new Size(200, 200);

progressBar.OuterCircleColor = Color.Blue;

progressBar.InnerCircleColor = Color.Green;

progressBar.TaskText = "Loading...";

progressBar.ShowPercentage = true;

this.Controls.Add(progressBar);

// To update progress:

progressBar.UpdateProgress(50, 30, "Halfway there...");

// To simulate a task:

await progressBar.RunTaskAsync();

Notes:

Animation Timer: The timer ticks at an interval of 50ms for smooth animation during the indeterminate state.
Text Scaling: The text scales dynamically based on the progress bar's size to fit inside.
Minimum Size: The control enforces a minimum size of 150x150 pixels to maintain its design.

Page updated

Google Sites

Report abuse