Border Settings

Configures the control’s border thickness, color, and style, providing flexible design options that can match various UI themes.

Overview

The Border Settings feature controls the outline of the SiticoneToggleButton. It lets you specify how the border is drawn (e.g., solid, dashed, dotted, 3D) and dynamically adjust thickness and colors based on whether the toggle is On or Off. By customizing these properties, you can align the control’s appearance with your overall application style, highlight active states, or diminish borders for a minimalistic UI.

---

Key API Members

Below is a table summarizing the primary properties that manage the toggle button’s border configuration:

Property	Type	Description	Example
BorderThickness	float	The width of the border, measured in pixels.	myToggle.BorderThickness = 2f;
BorderStyleOption	BorderStyleOptions (enum)	Determines the style of the border (e.g., Solid, Dashed, Dotted, Double, 3D styles, etc.).	myToggle.BorderStyleOption = BorderStyleOptions.Dashed;
UntoggledBorderColor	Color	The border color when the control is Off.	myToggle.UntoggledBorderColor = Color.Gray;
ToggledBorderColor	Color	The border color when the control is On.	myToggle.ToggledBorderColor = Color.Blue;

---

Key Points to Note

1. Dynamic Color Changes

   • When IsToggled is true, the button uses ToggledBorderColor; otherwise, it uses UntoggledBorderColor.

2. Variable Styles with BorderStyleOption

   • The BorderStyleOptions enum includes a range of style choices: Solid, Dashed, Dotted, Double, 3D, and more.

   • Some styles (e.g., Hidden) effectively remove or minimize the visible border.

3. Border Thickness

   • A larger BorderThickness value visually emphasizes the control.

   • A very thin border can create a minimalist look but may reduce clarity in differentiating the button’s boundaries.

4. Pen Settings

   • Internally, the control uses a Pen object to draw the border, applying the specified style and thickness.

   • In some styles (e.g., Double or 3D variants), width or additional rendering effects may be simulated by automatically increasing the pen’s width.

---

Usage Example

Configuring Borders in Code

// Assume you have a SiticoneToggleButton named myToggle

// Make the border thicker for a prominent outline
myToggle.BorderThickness = 2.5f;

// Choose a dashed style for a casual or dynamic look
myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.Dashed;

// Set the border colors for On/Off states
myToggle.ToggledBorderColor = Color.MediumSlateBlue;
myToggle.UntoggledBorderColor = Color.DarkGray;

// Optional: Switch to a different border style depending on user interactions
myToggle.StateChanged += (s, e) =>
{
    if (myToggle.IsToggled)
    {
        // Make the border more visible when toggled on
        myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.SolidDouble;
    }
    else
    {
        // Subtle border when toggled off
        myToggle.BorderStyleOption = SiticoneToggleButton.BorderStyleOptions.Dotted;
    }
};

Tip: Experiment with various border styles from the BorderStyleOptions enum to see which best fits your UI theme.

---

Best Practices to Create Beautiful UI and Apps

Practice	Reason
Match border color to the toggle state’s background color.	Ensures visual consistency and indicates active/inactive states more clearly.
Use a thinner border if the overall design is minimalistic, or a thicker one for emphasis.	Maintains a cohesive look with the rest of your application’s design.
Use high contrast between the border and the button background.	Improves visibility and clarity for all users, including those with low vision.
Select a border style that complements your UI theme.	For modern, flat designs, use Solid; for more playful UI, experiment with dashed or dotted.
Consider dynamic changes to border style upon toggling for extra feedback.	Reinforces state changes and enhances user engagement.

---

Common Pitfalls and Design Considerations

Pitfall	Mitigation / Recommendation
Setting a very large BorderThickness with certain styles (e.g., Double, 3D).	Can look oversized or break the control’s layout. Stay within a suitable thickness range (1–4 px).
Using invisible or hidden styles unintentionally.	Double-check your BorderStyleOption to ensure you haven’t accidentally set a style like Hidden.
Overusing 3D or Double effects in modern/flat UIs.	Might clash with a flat theme; use these styles where they fit the broader design context.
Forgetting to specify ToggledBorderColor and UntoggledBorderColor distinctly.	Could make the toggle states look identical, reducing clarity on whether the button is On or Off.

---

Review and Summary

• What You Learned: How to control the button’s outline—its thickness, color, and style—using a straightforward set of properties and an enum.

• Why It’s Important: Borders can significantly influence both readability and aesthetics. With appropriately chosen colors and styles, your toggle button stands out clearly or blends seamlessly into your application’s design.

• How to Move Forward: Combine these border settings with other appearance options (e.g., Appearance & Text configuration) to create a consistent, engaging user experience. Make sure to test your chosen styles across different screen sizes and color themes.

By leveraging the Border Settings feature effectively, you can achieve both subtle and bold designs, ensuring your toggles align with the overall style of your application.