---
description: >-
  This feature controls the overall look and feel of the Siticone MenuButton by
  customizing rounded corners, hover opacity, shadows, and icon strokes.
---

# Appearance and Visual Style

## Overview

The Appearance & Visual Style feature allows developers to adjust the visual elements of the button control, such as its border radius, shadow effects, and icon stroke thickness, to ensure the control fits seamlessly into a wide range of application themes and user interfaces.

***

### Feature Details

The following table provides a clear overview of each property under Appearance & Visual Style:

| Property        | Data Type | Default Value               | Description                                               |
| --------------- | --------- | --------------------------- | --------------------------------------------------------- |
| BorderRadius    | int       | 8                           | Determines the curvature of the button corners.           |
| HoverOpacity    | byte      | 150                         | Sets the opacity level of the hover effect.               |
| EnableShadow    | bool      | true                        | Enables or disables the shadow effect beneath the button. |
| ShadowColor     | Color     | Color.FromArgb(50, 0, 0, 0) | Specifies the color used for the shadow.                  |
| ShadowDepth     | int       | 3                           | Sets the depth of the shadow in pixels.                   |
| IconStrokeWidth | float     | 2f                          | Defines the thickness of the icon strokes.                |

***

### Code Examples and Samples

Below is a comprehensive example demonstrating how to integrate and customize the Appearance & Visual Style feature of the SiticoneMenuButton in a .NET WinForms application.

#### Sample Code: Customizing Visual Style

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;  // Ensure you reference the correct namespace

namespace MenuButtonDemo
{
    public class MainForm : Form
    {
        private SiticoneMenuButton menuButton;

        public MainForm()
        {
            InitializeComponents();
        }

        private void InitializeComponents()
        {
            // Create and configure the SiticoneMenuButton
            menuButton = new SiticoneMenuButton
            {
                Size = new Size(60, 60),
                Location = new Point(50, 50),
                BorderRadius = 12,               // Increased rounded corners for a modern look
                HoverOpacity = 180,              // Slightly more opaque hover effect
                EnableShadow = true,             // Enable shadow to add depth
                ShadowColor = Color.FromArgb(80, 0, 0, 0),  // Darker shadow for emphasis
                ShadowDepth = 4,                 // Increase shadow depth
                IconStrokeWidth = 2.5f           // Slightly thicker icon stroke for better visibility
            };

            // Add the button to the form's controls
            Controls.Add(menuButton);

            // Form settings
            Text = "SiticoneMenuButton Demo";
            Size = new Size(300, 200);
            StartPosition = FormStartPosition.CenterScreen;
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}
```

#### Sample Code: Dynamic Appearance Updates

In this example, the button's appearance is updated dynamically based on user interaction (e.g., toggling shadow on/off):

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI;

namespace DynamicVisualStyleDemo
{
    public class MainForm : Form
    {
        private SiticoneMenuButton menuButton;
        private CheckBox chkEnableShadow;

        public MainForm()
        {
            InitializeComponents();
        }

        private void InitializeComponents()
        {
            menuButton = new SiticoneMenuButton
            {
                Size = new Size(60, 60),
                Location = new Point(30, 30),
                BorderRadius = 10,
                HoverOpacity = 150,
                EnableShadow = true,
                ShadowColor = Color.Gray,
                ShadowDepth = 3,
                IconStrokeWidth = 2f
            };

            chkEnableShadow = new CheckBox
            {
                Text = "Enable Shadow",
                Location = new Point(30, 110),
                Checked = menuButton.EnableShadow
            };
            chkEnableShadow.CheckedChanged += (s, e) =>
            {
                menuButton.EnableShadow = chkEnableShadow.Checked;
                menuButton.Invalidate(); // Refresh the control to reflect the change
            };

            Controls.Add(menuButton);
            Controls.Add(chkEnableShadow);

            Text = "Dynamic Appearance Demo";
            Size = new Size(250, 180);
            StartPosition = FormStartPosition.CenterScreen;
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}
```

***

### Key Points

| Aspect             | Details                                                                                        |
| ------------------ | ---------------------------------------------------------------------------------------------- |
| Customization      | Properties allow tailoring of corner radius, shadow, hover opacity, and icon stroke width.     |
| Integration        | Seamlessly integrate within .NET WinForms projects by setting properties at design or runtime. |
| Visual Consistency | Adjustments help maintain visual consistency with the overall UI theme.                        |

***

### Best Practices

| Practice                 | Explanation                                                                                        |
| ------------------------ | -------------------------------------------------------------------------------------------------- |
| Use Meaningful Defaults  | Choose default values that match your application's theme to reduce manual adjustments.            |
| Test Responsiveness      | Verify that visual changes (e.g., shadows and opacity) render well on various display resolutions. |
| Leverage Dynamic Updates | Use property changes at runtime to offer users real-time customization of the UI.                  |
| Refresh Control Properly | Call Invalidate() after changing visual properties to ensure the control repaints correctly.       |

***

### Common Pitfalls

| Pitfall                                | How to Avoid                                                                                        |
| -------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Overusing High Opacity or Dark Shadows | Test different opacity and shadow settings to avoid a heavy or cluttered UI appearance.             |
| Inconsistent BorderRadius Values       | Ensure that the BorderRadius is set proportionally to the control size to maintain a balanced look. |
| Not Refreshing the Control             | Always call Invalidate() after property changes to reflect updates immediately.                     |

***

### Usage Scenarios

| Scenario                      | How Appearance & Visual Style Helps                                                      |
| ----------------------------- | ---------------------------------------------------------------------------------------- |
| Modern Desktop Application    | Use a larger BorderRadius and subtle shadow for a sleek, contemporary look.              |
| Enterprise Software Dashboard | Fine-tune hover opacity and icon stroke to maintain consistency with corporate branding. |
| Custom Theme Integration      | Dynamically update visual style properties to match user-selected themes.                |

***

### Review

The Appearance & Visual Style feature in the SiticoneMenuButton control provides robust options for developers to customize the look and feel of the button. By adjusting properties such as BorderRadius, HoverOpacity, EnableShadow, ShadowColor, ShadowDepth, and IconStrokeWidth, you can ensure that the control not only meets aesthetic requirements but also integrates well into any modern application design.

***

### Summary

The Appearance & Visual Style feature is essential for creating visually appealing and theme-consistent user interfaces. Developers can easily modify key visual parameters such as rounded corners, shadows, and icon strokes to ensure the SiticoneMenuButton fits perfectly into their application’s design language. Using the provided code examples and best practices, integrating and customizing these visual elements is straightforward and highly flexible.

***

### Additional Sections

#### Troubleshooting

| Issue                      | Resolution                                                                                         |
| -------------------------- | -------------------------------------------------------------------------------------------------- |
| Shadow Not Visible         | Verify that EnableShadow is true and the ShadowDepth is set appropriately.                         |
| Rounded Corners Appear Off | Ensure that the BorderRadius is not set to a value larger than half the control’s height or width. |
| Visual Updates Delay       | Confirm that Invalidate() is called after any property change to refresh the control immediately.  |

#### Future Enhancements

| Enhancement               | Description                                                                              |
| ------------------------- | ---------------------------------------------------------------------------------------- |
| Animation Enhancements    | Introduce smoother transitions for shadow and hover effects to further modernize the UI. |
| Theme Integration Support | Allow dynamic binding of visual properties to application-wide themes for consistency.   |

By following this documentation, developers can effectively utilize and customize the Appearance & Visual Style of the SiticoneMenuButton control in their .NET WinForms applications.





