> 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/buttons-and-elements/siticone-tilebutton/visual-style.md). # Visual Style A feature that controls the visual presentation of the button by enabling gradient fills, borders, and text shadow effects. ## Overview The Visual Style feature provides options to enhance the button's appearance through various styling properties. Developers can enable a gradient background, add a border, and apply a text shadow to improve readability and visual appeal. This feature helps in aligning the button's look with the overall design language of the application. *** #### Feature Properties Table | Property Name | Type | Default Value | Description | | -------------- | ----- | ------------- | ------------------------------------------------------------------------------ | | UseGradient | bool | false | Enables a gradient background effect instead of a solid color fill. | | ShowBorder | bool | false | Determines whether a border is drawn around the button’s perimeter. | | BorderWidth | float | 1f | Specifies the thickness of the border when ShowBorder is enabled. | | ShowTextShadow | bool | false | Toggles the display of a shadow behind the button text to improve readability. | | ShadowDepth | int | 1 | Controls the intensity (offset magnitude) of the text shadow effect. | *** #### Key Points | Aspect | Details | | -------------------- | --------------------------------------------------------------------------------------------------------- | | Customizability | Visual styling can be fine-tuned to match various application themes through simple property adjustments. | | Enhanced Readability | The text shadow option improves text clarity against different background colors or images. | | Modern Appearance | Gradient backgrounds and borders contribute to a sleek, modern design aesthetic. | *** #### Best Practices | Practice | Explanation | | ------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Use gradients sparingly | While gradients can add depth, ensure they complement the overall UI without overwhelming other elements. | | Match border colors with themes | When enabling borders, choose colors and widths that harmonize with the application’s design for a cohesive look. | | Subtle text shadows | Use modest shadow depths and opacities to enhance text readability without distracting from the button label. | | Test on various backgrounds | Verify that the visual style settings render well on different screen resolutions and backgrounds. | *** #### Common Pitfalls | Pitfall | Recommendation | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | Overusing visual effects | Too many effects (e.g., heavy gradients, thick borders, strong shadows) can clutter the interface; use them judiciously. | | Inconsistent styling across controls | Ensure that visual style settings are consistent with other UI components to maintain a unified design language. | | Performance issues with complex gradients | If performance degrades on lower-end hardware, consider disabling or simplifying gradient effects. | *** #### Usage Scenarios | Scenario | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------------------- | | Corporate Dashboards | Use subtle gradients and borders to create a professional and modern look that aligns with corporate branding. | | Consumer-Facing Applications | Enhance visual appeal with refined gradients and text shadows to provide a sleek and attractive user interface. | | Customizable UI Themes | Allow users or designers to toggle visual effects on or off based on personal or branding preferences. | *** #### Code Examples **Example 1: Default Visual Style** This example demonstrates the integration of the SiticoneTileButton with basic visual styling options enabled. ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace VisualStyleDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton with default visual style settings var visualStyleButton = new SiticoneTileButton { Text = "Default Style", Size = new Size(220, 150), Location = new Point(50, 50), // Visual Style properties UseGradient = false, ShowBorder = false, ShowTextShadow = false }; Controls.Add(visualStyleButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` **Example 2: Customized Visual Style** In this example, the button is styled with a gradient background, a visible border, and a subtle text shadow to create a modern appearance. ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace CustomizedVisualStyleDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton with customized visual style settings var styledButton = new SiticoneTileButton { Text = "Styled Button", Size = new Size(220, 150), Location = new Point(30, 30), // Enabling a gradient background UseGradient = true, // Enabling and customizing the border ShowBorder = true, BorderWidth = 2f, // Enabling text shadow for better text visibility ShowTextShadow = true, ShadowDepth = 2, // Color settings (these also work with the visual style) BaseColor = Color.MediumSlateBlue, HoverColor = Color.SlateBlue }; Controls.Add(styledButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` *** #### Review | Aspect | Review Comments | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Aesthetic Flexibility | The Visual Style feature provides the flexibility to adjust gradients, borders, and shadows, thereby enabling a wide range of design possibilities. | | Ease of Integration | With straightforward property assignments, integrating visual style customization is simple and does not require complex logic. | | Impact on Readability | The option to enable text shadows can significantly improve readability, especially when used in conjunction with complex background styles. | *** #### Summary The Visual Style feature of the SiticoneTileButton control enables developers to enhance the button's visual appearance through gradient backgrounds, borders, and text shadows. By adjusting these properties, you can achieve a modern and appealing UI that aligns with your application's overall design while ensuring that the button remains functional and accessible. *** #### Additional Resources | Resource Category | Description | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------- | | Integration Tips | Use the provided code examples as a starting point for integrating and customizing visual styles in your application. | | UI/UX Considerations | Test visual style settings on multiple devices and screen resolutions to ensure a consistent and pleasant user experience. | | Performance Optimization | Monitor performance when using complex visual effects like gradients on older hardware, and adjust settings accordingly. | *** By following the guidelines and examples provided above, developers can seamlessly integrate and customize the Visual Style feature of the SiticoneTileButton control, creating buttons that are both aesthetically pleasing and functionally robust in .NET WinForms applications.