Appearance and Text

Defines how the control looks in various states (On/Off/Disabled) and what text is displayed, including the context menu’s font.

Overview

The Appearance & Text feature set determines the visual presentation of the SiticoneToggleButton for different toggle states (On, Off, and Disabled) as well as the textual content displayed on the control and its optional context menu. By configuring properties such as background/foreground colors and toggle text, developers can create a consistent and visually appealing user experience.

---

Key API Members

Below is a table summarizing the main appearance and text-related properties:

Name	Type	Description	Example
ToggledBackColor	Color	Background color applied when the control is in the On state.	myToggle.ToggledBackColor = Color.FromArgb(0, 120, 215);
UntoggledBackColor	Color	Background color applied when the control is in the Off state.	myToggle.UntoggledBackColor = Color.FromArgb(240, 240, 240);
ToggledForeColor	Color	Text color applied when the control is in the On state.	myToggle.ToggledForeColor = Color.White;
UntoggledForeColor	Color	Text color applied when the control is in the Off state.	myToggle.UntoggledForeColor = Color.Black;
DisabledBackColor	Color	Background color shown when the control is disabled.	myToggle.DisabledBackColor = Color.FromArgb(230, 230, 230);
DisabledForeColor	Color	Text color shown when the control is disabled.	myToggle.DisabledForeColor = Color.Gray;
ToggledText	string	The text displayed on the control when the toggle is On.	myToggle.ToggledText = "On";
UntoggledText	string	The text displayed on the control when the toggle is Off.	myToggle.UntoggledText = "Off";
ContextMenuFont	Font	The font used by the context menu if right-clicking on the toggle.	myToggle.ContextMenuFont = new Font("Segoe UI", 12f);

---

Key Points to Note

1. Separate Colors for Each State

   • You can give distinct background/foreground colors for On (ToggledBackColor, ToggledForeColor) and Off (UntoggledBackColor, UntoggledForeColor) states.

   • If the control is disabled, it automatically uses DisabledBackColor and DisabledForeColor.

2. Text Updates Dynamically

   • When the control’s state changes, it automatically updates its visible text to either ToggledText or UntoggledText.

   • You can provide different strings (or even an empty string) to indicate states clearly.

3. Context Menu Font

   • The right-click context menu inherits its font from ContextMenuFont.

   • Changing this property immediately updates how the context menu text is rendered.

4. Interaction with Other Features

   • If you also enable Animations or a Ripple Effect, the chosen colors still apply, but be mindful of visual harmony across the states.

---

Usage Example

Setting Up Appearance in Code

// Assume you have a SiticoneToggleButton named myToggle
myToggle.ToggledBackColor = Color.DodgerBlue;
myToggle.UntoggledBackColor = Color.LightGray;

myToggle.ToggledForeColor = Color.White;
myToggle.UntoggledForeColor = Color.Black;

myToggle.DisabledBackColor = Color.FromArgb(200, 200, 200);
myToggle.DisabledForeColor = Color.DarkGray;

myToggle.ToggledText = "Active";
myToggle.UntoggledText = "Inactive";

// Context menu appearance
myToggle.ContextMenuFont = new Font("Consolas", 10f);

When myToggle is toggled On, its background will be DodgerBlue, and it will display the text “Active” in white. When it is toggled Off, it switches to a light gray background with the text “Inactive” in black.

---

Best Practices to Create Beautiful UI and Apps

Practice	Reason
Ensure on/off states use colors with clear contrast.	Users need immediate visual distinction to recognize the control’s state.
Pick foreground colors that are easy to read against the background.	Enhances accessibility and readability (e.g., white text on dark background, black text on light).
Keep disabled colors obviously muted or different.	Makes it clearer to users that interaction with the control is not possible.
Choose a context menu font that’s consistent with your application.	Promotes a unified visual style across menus and control elements.
Consider short yet descriptive toggle text.	A single or double word for On/Off helps with both usability and a neat UI layout.

---

Common Pitfalls and Design Considerations

Pitfall	Mitigation / Recommendation
Overusing intense colors for ToggledBackColor and UntoggledBackColor.	Use balanced color schemes to avoid distracting the user.
Forgetting to set DisabledBackColor and DisabledForeColor.	Provide clearly grayed or muted colors so the disabled state is visually distinct.
Setting ToggledText or UntoggledText to overly long strings.	Could lead to text truncation or cause layout issues; keep them concise or use auto-sizing if needed.
Inconsistent font styles between ContextMenuFont and main UI.	Align fonts for consistency in style, especially if your app uses a standard theme or brand identity.

---

Review and Summary

• What You Learned: How to control the visual aspects of SiticoneToggleButton (colors, text, fonts) based on On/Off and Disabled states.

• Why It’s Important: Consistent and clear appearance cues help users instantly recognize the control’s status and offer a polished, professional look.

• How to Move Forward: Combine these appearance properties with toggle events or animations to create a seamless and user-friendly experience. Pay attention to contrasting colors, ensuring both accessibility and aesthetic appeal.

By leveraging these properties effectively, you can craft beautiful toggle switches that fit perfectly into your application’s theme, delivering a highly intuitive user interface.