Proposal: Allow on/off label placement on either side of ToggleSwitch

[gabbybilka]

Proposal: Add alternate label placement to ToggleSwitch

Summary

Apps are interested in a left-positioned on/off label on the ToggleSwitch instead of it appearing on the right. We're thinking of adding additional API to support the choice between a left or right positioned on/off label. However, we would like to hear from the community on whether this would be taken advantage of in your apps or if the proposed approach can be improved upon.

Current ToggleSwitch on/off label position

Additional ToggleSwitch on/off label position

Rationale

• If a popular pattern, a built in API to switch between the two modes would increase consistency of exact recommended position

Scope

Capability	Priority
A on/off label can appear to the left of the switch itself (in LTR languages) without re-templating or re-styling the ToggleSwitch	Must

Implementation exploration

An on/off content positioning boolean

<ToggleSwitch IsOnOffContentPositionOpposite="true" />
// In RTL languages, the OnOffContent is by default to the left of the ToggleSwitch. Setting this to true would mean the OnOffContent would appear to the right of the ToggleSwitch and the header label would still be right-aligned.

An on/off position property with new enum

<ToggleSwitch OnOffContentPosition="Left" />

enum ToggleSwitchOnOffContentPosition 
{
  Right, // default
  Left,
}

Open Questions

• Are you changing the location of the on/off label in a ToggleSwitch currently?
• Is there a use to add more positions than merely left or right?

[mdtauk]

Seems like a very sensible thing to add. It would be useful for aligning ToggleSwitches to the right without any awkward space after the different content strings.

[greatoceansoftware]

Would also like ability to position the Header to the left of the ToggleSwitch.

[FredoZeLegend]

i would also like to have the capability to set the content text as header too...

[Gaoyifei1011]

Proposal: Add alternate label placement to ToggleSwitch

Summary

Apps are interested in a left-positioned on/off label on the ToggleSwitch instead of it appearing on the right. We're thinking of adding additional API to support the choice between a left or right positioned on/off label. However, we would like to hear from the community on whether this would be taken advantage of in your apps or if the proposed approach can be improved upon.

Current ToggleSwitch on/off label position

Additional ToggleSwitch on/off label position

Rationale

• If a popular pattern, a built in API to switch between the two modes would increase consistency of exact recommended position

Scope

Capability Priority
A on/off label can appear to the left of the switch itself (in LTR languages) without re-templating or re-styling the ToggleSwitch Must

Implementation exploration

An on/off content positioning boolean

// In RTL languages, the OnOffContent is by default to the left of the ToggleSwitch. Setting this to true would mean the OnOffContent would appear to the right of the ToggleSwitch and the header label would still be right-aligned. ### An on/off position property with new enum enum ToggleSwitchOnOffContentPosition { Right, // default Left, } ## Open Questions * Are you changing the location of the on/off label in a ToggleSwitch currently? * Is there a use to add more positions than merely left or right?

Isn't there any new progress in this improvement?

[castorix]

As it uses a Grid, you can invert colums of elements, with ControlTemplate ("DefaultToggleSwitchStyle") or by code
Test by code (OffContentPresenter, OnContentPresenter in column 0, OuterBorder, SwitchKnobBounds, SwitchKnob in column 3)

[deejayy]

As it uses a Grid, you can invert colums of elements, with ControlTemplate ("DefaultToggleSwitchStyle") or by code Test by code (OffContentPresenter, OnContentPresenter in column 0, OuterBorder, SwitchKnobBounds, SwitchKnob in column 3)

Thanks a lot, you opened a new dimension to me! (I'm pretty new to dotnet)

I've managed to replace the columns by duplicating the whole DefaultToggleSwitchStyle, but I feel this can easily break/left behind when upstream receives a change and the component starts acting differently. Do you think there is a more future-proof approach to address only these content changes? (I tried to strip the template /e.g. visual states/, but it started falling apart pretty soon.)

I'm not comfortable with the idea of changing these things in code, I'd like to separate visuals/business logic.