> 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/icon-settings.md). # Icon Settings A feature that manages the display and positioning of an image icon in relation to the button text. ## Overview The Icon Settings feature provides a set of properties to control how an icon is rendered on the button. Developers can specify the icon image, its alignment relative to the text, padding between the icon and text, margin around the icon, and the dimensions of the icon. These options help in creating visually appealing buttons that incorporate branding or illustrative imagery. *** #### Feature Properties Table | Property Name | Type | Default Value | Description | | ------------- | ---------------- | ---------------- | -------------------------------------------------------------------------------------- | | Icon | Image | null | The image displayed alongside the button text. | | IconAlignment | ContentAlignment | MiddleLeft | Determines the placement of the icon relative to the text (e.g., left, right, center). | | IconPadding | int | 5 | Defines the spacing between the icon and the button text. | | IconMargin | Padding | new Padding(5) | Sets the empty space around the icon within the button. | | IconSize | Size | new Size(24, 24) | Specifies the dimensions (width and height) of the icon. | *** #### Key Points | Aspect | Details | | ------------------ | ----------------------------------------------------------------------------------------------- | | Flexibility | Easily adjust the icon's size, placement, and spacing to match various UI designs. | | Integration | Seamlessly integrates with the button's overall layout without interfering with text rendering. | | Visual Enhancement | Provides a visual cue that can be used to reinforce branding or functional context. | *** #### Best Practices | Practice | Explanation | | --------------------------------- | ------------------------------------------------------------------------------------------------------------- | | Use appropriately sized icons | Ensure that the icon dimensions (IconSize) are balanced with the button size for a clean look. | | Align icon with text purposefully | Choose IconAlignment based on the content and design of your button (e.g., left-aligned for standard labels). | | Maintain consistent spacing | Use IconPadding and IconMargin consistently across similar buttons for a uniform appearance. | | Optimize icon quality | Use high-quality, appropriately scaled images to avoid pixelation or distortion on high-DPI displays. | *** #### Common Pitfalls | Pitfall | Recommendation | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | Overcrowding the button with a large icon | Keep icon dimensions and margins moderate to ensure that text remains legible. | | Misalignment of icon and text | Verify that IconAlignment and IconPadding are set so that the icon does not overlap with or push the text out of place. | | Inconsistent icon styling across controls | Standardize icon settings across your UI to maintain a consistent design language. | *** #### Usage Scenarios | Scenario | Description | | --------------------------- | --------------------------------------------------------------------------------------------------- | | Branding Buttons | Use an icon that represents your brand logo to reinforce brand identity on key action buttons. | | Navigation Controls | Integrate directional or symbolic icons to indicate navigation or specific functionalities. | | Data Entry and Form Actions | Enhance usability by adding icons that visually differentiate buttons (e.g., save, cancel, upload). | *** #### Code Examples **Example 1: Basic Icon Integration** This example demonstrates how to add a simple icon to the SiticoneTileButton with default settings. ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace IconSettingsDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton var iconButton = new SiticoneTileButton { Text = "Save", Size = new Size(220, 150), Location = new Point(50, 50), // Icon Settings Icon = Image.FromFile("save_icon.png"), // Ensure the image file is available IconAlignment = ContentAlignment.MiddleLeft, IconPadding = 5, IconMargin = new Padding(5), IconSize = new Size(24, 24) }; Controls.Add(iconButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` **Example 2: Customized Icon Placement** This example shows how to customize the icon settings by placing the icon to the right of the text with increased padding. ```csharp using System; using System.Drawing; using System.Windows.Forms; using SiticoneNetFrameworkUI; namespace CustomizedIconSettingsDemo { public class MainForm : Form { public MainForm() { // Initialize the SiticoneTileButton with customized icon settings var customIconButton = new SiticoneTileButton { Text = "Upload", Size = new Size(220, 150), Location = new Point(30, 30), // Customized Icon Settings Icon = Image.FromFile("upload_icon.png"), // Use a valid image path IconAlignment = ContentAlignment.MiddleRight, IconPadding = 10, IconMargin = new Padding(8), IconSize = new Size(32, 32) }; Controls.Add(customIconButton); } [STAThread] static void Main() { Application.EnableVisualStyles(); Application.Run(new MainForm()); } } } ``` *** #### Review | Aspect | Review Comments | | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | Visual Impact | Adding icons significantly enhances the visual appeal and usability of buttons. | | Customization Ease | The properties provided allow for straightforward adjustments to icon appearance and placement. | | Integration Flexibility | The icon seamlessly integrates with text, and the customizable spacing ensures a balanced layout across different UI designs. | *** #### Summary The Icon Settings feature of the SiticoneTileButton control enables developers to integrate and customize an icon within the button. By adjusting properties such as Icon, IconAlignment, IconPadding, IconMargin, and IconSize, you can create buttons that are visually engaging and functionally informative. This feature is ideal for branding, navigation, and enhancing user interface clarity in WinForms applications. *** #### Additional Resources | Resource Category | Description | | -------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Integration Tips | Refer to the provided code examples for guidance on adding and customizing icons in your application. | | UI Consistency | Ensure icon settings are standardized across your UI to maintain a cohesive design language. | | Performance Considerations | Use optimized images and appropriate sizes to prevent performance issues, especially in image-intensive applications. | *** By following the guidelines and examples provided, developers can seamlessly integrate and customize the Icon Settings feature of the SiticoneTileButton control, enhancing both the aesthetic appeal and usability of buttons within their .NET WinForms applications.