---
description: >-
  Content Layout governs how text is positioned within the button control,
  ensuring proper spacing from the control edges and any selection indicators
  for a clean and readable appearance.
---

# Content Layout

## Overview

The Content Layout feature focuses on the arrangement and presentation of the button's text content. By using properties such as `TextPadding` and the overridden `Text` property, developers can control the horizontal spacing between the text and the control’s edge or left-side indicator. This ensures that the text is displayed in a visually appealing manner, regardless of additional styling elements like selection indicators. The layout is dynamically updated to account for changes such as the enabling or disabling of selection markers.

***

### Properties and Configuration

The table below summarizes the key properties related to Content Layout:

<table><thead><tr><th width="169">Property Name</th><th>Description</th><th>Default Value / Range</th><th>Sample Usage Example</th></tr></thead><tbody><tr><td>TextPadding</td><td>Specifies the horizontal spacing between the control's edge (or indicator) and the displayed text.</td><td>Integer (default is 15; must be ≥ 0)</td><td><code>myButton.TextPadding = 20;</code></td></tr><tr><td>Text</td><td>The text displayed on the button. This property is overridden to trigger a re-layout when changed.</td><td>String (default is empty)</td><td><code>myButton.Text = "Submit";</code></td></tr></tbody></table>

_Note: Internally, an `EffectiveTextPadding` value is computed based on whether a left indicator is enabled, ensuring consistent text positioning._

***

### Key Points

<table><thead><tr><th width="281">Key Point</th><th>Details</th></tr></thead><tbody><tr><td>Dynamic Padding Adjustment</td><td>The control automatically adjusts the effective text padding based on the state of the left indicator (if enabled).</td></tr><tr><td>Customizable Text Spacing</td><td>Developers can specify the desired spacing between the text and the control's edge for optimal readability and design consistency.</td></tr><tr><td>Responsive Layout Updates</td><td>Changes to the <code>Text</code> or <code>TextPadding</code> properties trigger a re-layout (via <code>Invalidate</code>), ensuring immediate visual updates.</td></tr></tbody></table>

***

### Best Practices

| Best Practice                      | Description                                                                                                                          | Example Code Snippet                                                                                           |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| Consistent Spacing Across Controls | Use similar `TextPadding` values for all buttons in your application to maintain a uniform look.                                     | `csharp<br>myButton1.TextPadding = 15;<br>myButton2.TextPadding = 15;<br>`                                     |
| Adapt Padding Based on Indicators  | If using selection indicators, adjust `TextPadding` so that the effective padding provides sufficient separation from the indicator. | `csharp<br>if(myButton.ShowLeftIndicator)<br>{<br> myButton.TextPadding = 20;<br>}<br>`                        |
| Update Text Dynamically            | When updating the button text at runtime, ensure that the layout updates correctly by relying on the built-in property change logic. | `csharp<br>myButton.Text = "New Action";<br>// The control automatically invalidates and redraws the text<br>` |

***

### Common Pitfalls

| Pitfall                         | Description                                                                                                                        | How to Avoid                                                                                           |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Inadequate Spacing              | Setting `TextPadding` too low may cause the text to appear cramped, especially when a left indicator is present.                   | Test different padding values in the context of your UI to ensure adequate whitespace around the text. |
| Inconsistent Layouts            | Different controls using varying `TextPadding` values can result in a disjointed appearance across your application.               | Standardize on a common padding value or define a theme to ensure consistency across controls.         |
| Overriding Text Without Refresh | Directly changing the underlying text value without using the overridden `Text` property might bypass the necessary layout update. | Always set the text through the provided `Text` property to trigger proper re-layout and redrawing.    |

***

### Usage Scenarios

| Scenario                     | Description                                                                                                                 | Sample Integration Code                                                                                                                                                                                                                                                                                     |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Standard Action Buttons      | Use content layout to ensure that the button text is well-positioned and readable regardless of additional visual elements. | `csharp<br>// Create a button with defined text and padding<br>SiticoneGroupButton actionButton = new SiticoneGroupButton();<br>actionButton.Text = "Save";<br>actionButton.TextPadding = 15;<br>this.Controls.Add(actionButton);<br>`                                                                      |
| Buttons with Left Indicators | When a selection indicator is enabled, the effective text padding adjusts so that the text does not overlap the indicator.  | `csharp<br>// Enable left indicator and set appropriate text padding<br>SiticoneGroupButton indicatorButton = new SiticoneGroupButton();<br>indicatorButton.Text = "Profile";<br>indicatorButton.ShowLeftIndicator = true;<br>indicatorButton.TextPadding = 20;<br>this.Controls.Add(indicatorButton);<br>` |

***

### Real Life Usage Scenarios

| Real Life Scenario                | Description                                                                                                                          | Example Implementation                                                                                                                                                                                                                                   |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mobile-Style Desktop Applications | Applications that mimic mobile UIs benefit from precise text alignment, ensuring that button labels remain clear on smaller screens. | `csharp<br>// Mobile-style button with optimized text layout<br>SiticoneGroupButton mobileButton = new SiticoneGroupButton();<br>mobileButton.Text = "Launch";<br>mobileButton.TextPadding = 18;<br>this.Controls.Add(mobileButton);<br>`                |
| Enterprise Dashboards             | In dashboards where multiple buttons are used, consistent text layout improves navigation and overall aesthetic.                     | `csharp<br>// Dashboard button setup with uniform text padding<br>SiticoneGroupButton dashboardButton = new SiticoneGroupButton();<br>dashboardButton.Text = "Reports";<br>dashboardButton.TextPadding = 15;<br>this.Controls.Add(dashboardButton);<br>` |

***

### Troubleshooting Tips

| Issue                                     | Potential Cause                                                                                                         | Resolution                                                                                                                |
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Text Appears Cramped                      | The `TextPadding` value may be too low, especially when a left indicator is enabled, resulting in insufficient spacing. | Increase the `TextPadding` value and test the layout until the text appears comfortably spaced.                           |
| Misaligned Text                           | Custom layout adjustments or overriding layout logic without proper updates may cause misalignment.                     | Ensure that all text updates go through the overridden `Text` property and that the control is invalidated after changes. |
| Inconsistent Layout After Dynamic Changes | Changing the text or padding at runtime without a layout refresh may result in a stale or misaligned appearance.        | Rely on the property setters which call `Invalidate` to force a redraw of the control when changes occur.                 |

***

### Integration Code Sample

The following example demonstrates how to integrate and configure Content Layout in a simple WinForms application:

```csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI; // Ensure the correct namespace is referenced

public class MainForm : Form
{
    public MainForm()
    {
        // Initialize and configure a SiticoneGroupButton with customized content layout
        SiticoneGroupButton contentButton = new SiticoneGroupButton
        {
            Text = "Submit Order",
            Size = new Size(220, 50),
            Location = new Point(20, 20),
            TextPadding = 15, // Sets the horizontal spacing between the edge/indicator and the text
            // Other interactive properties can be set as required
            NormalColor = Color.FromArgb(100, 100, 100),
            HoverColor = Color.FromArgb(80, 80, 80),
            PressColor = Color.FromArgb(50, 50, 50),
            TextColor = Color.LightGray,
            SelectedTextColor = Color.White
        };

        // Add the button to the form
        Controls.Add(contentButton);
    }

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

***

### Review

<table><thead><tr><th width="252">Review Aspect</th><th>Details</th></tr></thead><tbody><tr><td>Clean Text Presentation</td><td>Content Layout ensures that text remains legible and well-spaced from the control's edges, even when additional elements like indicators are present.</td></tr><tr><td>Ease of Customization</td><td>With just a few properties, developers can adjust the text positioning to achieve the desired layout, contributing to a consistent and polished UI.</td></tr><tr><td>Automatic Layout Updates</td><td>The control automatically recalculates and updates the layout when text or padding properties change, simplifying dynamic UI updates.</td></tr><tr><td>Integration Flexibility</td><td>This feature seamlessly integrates with other styling and interactive properties, allowing for a holistic approach to control customization.</td></tr></tbody></table>

***

### Summary

<table><thead><tr><th width="261">Summary Point</th><th>Description</th></tr></thead><tbody><tr><td>Precise Text Positioning</td><td>Content Layout provides fine control over the placement of text within the button, ensuring a balanced and aesthetically pleasing design.</td></tr><tr><td>Customizable Padding</td><td>Developers can adjust the horizontal spacing via the <code>TextPadding</code> property to account for additional visual elements such as selection indicators.</td></tr><tr><td>Responsive to Changes</td><td>Changes to text content or padding values trigger an automatic layout refresh, ensuring that the control always displays current and well-aligned information.</td></tr><tr><td>Consistent User Experience</td><td>Well-defined content layout enhances readability and consistency across various controls and application themes.</td></tr></tbody></table>

***

### Additional Useful Sections

#### Frequently Asked Questions (FAQ)

| Question                                | Answer                                                                                                                                         |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| How do I change the text on the button? | Use the overridden `Text` property, for example: `myButton.Text = "New Label";`, which triggers a layout update automatically.                 |
| What is the purpose of `TextPadding`?   | `TextPadding` sets the horizontal spacing between the button's text and its edge or indicator, ensuring the text does not appear cramped.      |
| Can the text layout update dynamically? | Yes, changes to the `Text` or `TextPadding` properties trigger a re-layout through the built-in property setters, keeping the display current. |

#### Integration Checklist

<table><thead><tr><th width="301">Checklist Item</th><th>Status</th></tr></thead><tbody><tr><td>Set the Text Content</td><td>Verify that the <code>Text</code> property is set to the desired label.</td></tr><tr><td>Configure Text Padding</td><td>Confirm that <code>TextPadding</code> is appropriately set to maintain adequate spacing from the control's edge or indicator.</td></tr><tr><td>Test Dynamic Updates</td><td>Ensure that runtime changes to text or padding correctly trigger a layout update.</td></tr><tr><td>Validate Across Different Themes</td><td>Check that the text layout remains consistent across various UI themes and resolutions.</td></tr></tbody></table>

***

By following this comprehensive documentation for Content Layout, developers can effectively control and customize the presentation of text within the button control in their .NET WinForms applications, ensuring clear and visually appealing user interfaces.
