# Sizing and Layout

## **Overview**

The **Sizing & Layout** feature ensures your `SiticoneToggleButton` can automatically adapt its size to its text and other style settings (e.g., border thickness, padding, corner radius). This is particularly useful when localizing or dynamically changing the toggle text, allowing the control to resize itself rather than relying on manual adjustments.

***

### **Key API Members**

| **Property**        | **Type** | **Description**                                                                                   | **Example**                        |
| ------------------- | -------: | ------------------------------------------------------------------------------------------------- | ---------------------------------- |
| **AutoSizeControl** |   `bool` | If `true`, automatically resizes the control to fit its text, corner radii, and border thickness. | `myToggle.AutoSizeControl = true;` |

***

### **Key Points to Note**

1. **Automatic Size Calculation**
   * When `AutoSizeControl` is `true`, the button measures its current text (`ToggledText` / `UntoggledText`), font size, and other styling elements (e.g., borders, corner radii) to compute the ideal width and height.
2. **Use with Caution in Complex Layouts**
   * While auto-sizing ensures the text is never clipped, it can conflict with certain fixed or relative layouts. Always test to ensure it fits within your desired form design.
3. **Responsive Layout**
   * If your application frequently changes the toggle text (e.g., due to localization or dynamic content), enabling `AutoSizeControl` keeps the UI consistent without manually recalculating size.
4. **Works in Tandem with Other Styling**
   * The auto-sizing logic also accounts for `BorderThickness` and your corner radius settings to avoid clipping.

***

### **Usage Example**

```csharp
// Assume you have a SiticoneToggleButton named myToggle

// Enable auto-sizing so the control adjusts to fit its content
myToggle.AutoSizeControl = true;

// Example: Changing text at runtime
myToggle.ToggledText = "Enabled";
myToggle.UntoggledText = "Disabled";
// The control now adjusts width/height automatically to accommodate the new text length
```

> **Tip:** If you switch between short and long text (e.g., “On” and “Off” vs. “Enabled” and “Disabled”), enabling auto-size ensures both states look proportionate.

***

### **Best Practices to Create Beautiful UI and Apps**

| **Practice**                                                        | **Reason**                                                                                                      |
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Enable **AutoSizeControl** when the toggle text might change often. | Prevents text clipping and maintains a clean layout without manual size adjustments.                            |
| Ensure the rest of the layout can handle **dynamic control sizes**. | If the toggle’s size grows/shrinks, other controls in your form may shift undesirably if they lack constraints. |
| Combine **AutoSizeControl** with short, concise toggle text.        | Improves readability and avoids excessively large buttons.                                                      |
| Consider your **font size** and **border thickness**.               | Larger fonts and thick borders can substantially increase the control’s required space.                         |

***

### **Common Pitfalls and Design Considerations**

| **Pitfall**                                                              | **Mitigation / Recommendation**                                                                                            |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| Overly **long toggle text** causing large, awkward button sizes.         | Keep text succinct; if more description is needed, add a label or tooltip.                                                 |
| Using auto-size in **fixed-size** or **non-resizable** forms.            | Could cause portions of the button to clip; ensure your form layout can accommodate changes.                               |
| Expecting auto-size to adjust **instantaneously** for custom animations. | Auto-sizing generally handles static changes in text and borders; consider manual sizing if you need real-time animations. |

***

### **Review and Summary**

* **What You Learned**:\
  How `AutoSizeControl` automates dimension changes based on text and styling, preventing layout issues and text truncation.
* **Why It’s Important**:\
  This feature makes it easier to maintain consistent, readable UI elements, especially if your application is localized or the button text changes dynamically.
* **How to Move Forward**:\
  Combine auto-size with your **Appearance & Text**, **Border**, and **Corner Radius** settings to ensure a responsive, user-friendly interface. Always verify your layout can gracefully adapt to changing control sizes.

By leveraging **Sizing & Layout** properly, you maintain an adaptable and polished UI that adjusts itself rather than forcing developers to handle every dimension manually.