Sizing and Layout

Manages how the Siticone ToggleButton is sized and positioned, specifically through the AutoSizeControl property that adjusts the button’s dimensions based on its text content and borders.

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

// 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.