> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/progress-and-loading/siticone-radialprogress/visual-styling.md). # Visual Styling A feature that enables developers to customize the look and feel of the progress control, including background, arc appearance, text display, and additional effects like shadows and themes. ## Overview The Visual Styling feature exposes a range of properties that allow you to tailor the aesthetic aspects of the SiticoneRadialProgressBar. Developers can modify the background color, progress arc appearance (including thickness, color, and border visibility), text styling, and even apply predefined color themes or background shading for enhanced visual appeal. *** ### Sections #### Key Points | Aspect | Description | Example/Notes | | ------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | BackColor | Sets the canvas color of the control’s background. | `progressBar.BackColor = Color.Transparent;` | | StartAngle | Defines the angle (in degrees) where the progress arc begins. | `progressBar.StartAngle = -90;` | | Clockwise | Determines whether the progress arc is drawn in a clockwise direction. | `progressBar.Clockwise = true;` | | FillProgressArea | Decides if the control should fill the progress area (like a pie slice) or only draw an arc. | `progressBar.FillProgressArea = true;` | | ShowRadialBorder | Toggles the visibility of the outer border (ring) that accompanies the progress arc. | `progressBar.ShowRadialBorder = true;` | | ProgressThickness | Sets the thickness of the progress arc. | `progressBar.ProgressThickness = 15f;` | | ProgressBaseColor | Provides the default color of the progress arc if no other animation or range-based settings override it. | `progressBar.ProgressBaseColor = Color.FromArgb(42, ColorTranslator.FromHtml("#221e41"));` | | ProgressFont | Configures the font used for rendering the progress text. | `progressBar.ProgressFont = new Font("Segoe UI", 14, FontStyle.Bold);` | | ShadowColor, ShadowOffset, ShadowBlur | Control the appearance of the text shadow to add depth to the displayed progress text. | `progressBar.ShadowColor = Color.FromArgb(100, Color.Black);progressBar.ShadowOffset = new Point(2, 2);progressBar.ShadowBlur = 5;` | | CurrentColorTheme | Allows the application of a predefined color theme (e.g., Ocean, Forest, Sunset) for quick styling changes. | `progressBar.CurrentColorTheme = SiticoneRadialProgressBar.ColorTheme.Forest;` | | EnableBackgroundShading | Enables an additional shading effect to the background for aesthetic depth. | `progressBar.EnableBackgroundShading = true;` | *** #### Best Practices | Recommendation | Rationale | Code Example | | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | Choose contrasting colors | Ensures the progress arc and text remain legible against the background. | `csharp
progressBar.BackColor = Color.White;
progressBar.ProgressBaseColor = Color.Blue;
` | | Utilize predefined themes | Use CurrentColorTheme for consistency and ease of styling across different UI sections. | `csharp
progressBar.CurrentColorTheme = SiticoneRadialProgressBar.ColorTheme.Ocean;
` | | Test shadow effects | Adjust ShadowColor, ShadowOffset, and ShadowBlur to achieve subtle yet effective text shadows. | `csharp
progressBar.ShadowColor = Color.FromArgb(80, Color.Gray);
progressBar.ShadowOffset = new Point(3, 3);
progressBar.ShadowBlur = 4;
` | | Maintain consistency between FillProgressArea and ShowRadialBorder | To ensure that the visual style remains coherent whether filling the area or drawing an arc. | `csharp
progressBar.FillProgressArea = false;
progressBar.ShowRadialBorder = true;
` | *** #### Common Pitfalls | Pitfall | Explanation | How to Avoid | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | | Inconsistent color contrast | Poor choices for BackColor and ProgressBaseColor may result in unreadable progress displays. | Test color combinations to ensure sufficient contrast between elements. | | Overuse of shadow effects | Excessive shadow blur or offset can distract from the main progress display. | Use moderate values for ShadowBlur and ShadowOffset to maintain visual clarity. | | Ignoring scale and layout adjustments | If the control’s size is altered without adjusting visual properties, the progress ring may look misaligned. | Ensure that size changes are paired with proportional adjustments to ProgressThickness and offsets. | *** #### Usage Scenarios | Scenario | How Visual Styling Helps | Sample Code Example | | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | Custom Themed Progress Display | Apply a theme to rapidly alter the overall color scheme without manually setting each color property. | `csharp
progressBar.CurrentColorTheme = SiticoneRadialProgressBar.ColorTheme.Sunset;
` | | Filled Progress Indicator | Use FillProgressArea to create a pie-slice style progress indicator for a dashboard visualization. | `csharp
progressBar.FillProgressArea = true;
progressBar.ShowRadialBorder = false;
` | | Enhanced Text Legibility | Combine ProgressFont and text shadow properties to ensure progress text is clear and professional-looking. | `csharp
progressBar.ProgressFont = new Font("Segoe UI", 16, FontStyle.Regular);
progressBar.EnableTextShadow = true;
` | *** #### Code Examples and Integration Demos **Example 1: Applying a Predefined Theme** ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; public class ThemedForm : Form { public ThemedForm() { var progressBar = new SiticoneRadialProgressBar { Size = new Size(160, 160), Location = new Point(20, 20), // Use the predefined "Ocean" theme CurrentColorTheme = SiticoneRadialProgressBar.ColorTheme.Ocean, BackColor = Color.White, StartAngle = -90, Clockwise = true, FillProgressArea = false, ShowRadialBorder = true, ProgressThickness = 10f, ProgressFont = new Font("Segoe UI", 14, FontStyle.Bold), EnableBackgroundShading = true }; this.Controls.Add(progressBar); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new ThemedForm()); } } ``` **Example 2: Customizing the Progress Arc and Text Shadow** ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; public class CustomStyleForm : Form { public CustomStyleForm() { var progressBar = new SiticoneRadialProgressBar { Size = new Size(180, 180), Location = new Point(30, 30), BackColor = Color.LightGray, StartAngle = 0, Clockwise = false, FillProgressArea = true, ShowRadialBorder = true, ProgressThickness = 20f, ProgressBaseColor = Color.DarkCyan, ProgressFont = new Font("Arial", 16, FontStyle.Italic), // Configure shadow for the progress text EnableTextShadow = true, ShadowColor = Color.FromArgb(100, Color.Black), ShadowOffset = new Point(3, 3), ShadowBlur = 6 }; this.Controls.Add(progressBar); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new CustomStyleForm()); } } ``` *** #### Review | Review Aspect | Discussion | Recommendations | | ----------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | Aesthetic Flexibility | Visual Styling offers a wide range of customization options to suit various UI design needs. | Experiment with both individual properties and themes for the best visual results. | | Ease of Customization | The properties are straightforward to set, and code examples make integration simple. | Follow the code examples to rapidly prototype different visual styles. | | Integration Consistency | Predefined themes and consistent property naming help ensure a uniform look across the application. | Use themes where possible to reduce the risk of inconsistent customizations. | *** #### Summary The Visual Styling feature of the SiticoneRadialProgressBar empowers developers to design visually compelling progress indicators with ease. By leveraging properties for background color, arc styling, text formatting, shadows, and themes, you can quickly adapt the control’s appearance to match your application’s design language. Extensive code samples and clear property tables facilitate a smooth integration process. *** #### Additional Useful Sections **Troubleshooting Tips** | Issue | Potential Cause | Suggested Resolution | | ------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | Progress arc not visible | Incorrect combination of FillProgressArea and ShowRadialBorder | Verify the settings for both properties to ensure that the intended visual effect is achieved. | | Text appears blurry or misaligned | Mismatch between ProgressFont and shadow settings | Adjust font size and shadow offset values to enhance clarity. | | Theme colors not applying as expected | Overriding CurrentColorTheme with manual color settings inadvertently | Set the theme first, then adjust only specific visual properties if needed. | **FAQs** | Question | Answer | | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | How do I apply a custom color theme? | Use the CurrentColorTheme property with one of the predefined options or customize the ColorAnimationCycle manually. | | Can I combine FillProgressArea with a shadow effect? | Yes, the control supports both filled progress and shadowed text simultaneously for enhanced aesthetics. | | What should I do if the progress arc appears too thick or thin? | Adjust the ProgressThickness property to fine-tune the arc’s visual weight. | *** This comprehensive documentation for the Visual Styling feature provides you with the necessary insights, best practices, and sample code examples to effectively customize the visual aspects of the SiticoneRadialProgressBar control within your .NET WinForms applications.