Switch control differences

[david-maw]

Description

The switch control in Windows is sufficiently different from the Android (and, I'd guess ios) one that it's difficult to use in a cross-platform project.

It's also different enough from the Xamarin implementation that it's difficult to migrate.

Steps to Reproduce

1. Unzip the project in Simple-Toggle.zip
   2. Compile and run it in Android, you should see this (which is also what the Xamarin version looks like):
   3. 
2. Compile and run it in Windows and you should see this (which seems more like the UWP default behavior)

The main differences look like the presence of the "On" and "Off" text by default with no seeming option to turn them off and the default HorizontalOptions which looks like it might be "start" on Windows and "end" on Android.

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows 10

Did you find any workaround?

No, on UWP I might be able to use OffContent and OnContent to disable the labels (incidentally these seem like they would be very useful, they just do not seem to be available on Android, Xamarin, or MAUI)

Relevant log output

No response

[david-maw]

I just checked generating a UWP app on Xamarin and it uses the same OnContent/OffContent text so the MAUI implementation ISNT different from the Xamarin-on-UWP implementation, simply different from Android and (I assume) ios.

[kristinx0211]

verified repro on Android 11 and windows with 17.3.0 preview 1.0[32413.517.main].

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[dnovaprove]

That's a bizarre choice for default behavior. Maui should suppress the text or allow to set it dinamically.

[vishaljadhav09]

Hello @david-maw , @jsuarezruiz ,@Redth,

I have also faced this displaying On Off text issue in Windows as it is not displaying on other platform.So tried lots of practices to disable this On/Off text of switch.

And found one solution to this problem.I think we can try this solution. So I have used Absolute Layout. As Absolute Layout gives you option to specify child's width . I have given 60 as width for the Switch controll. And it show only the Switch not On/Off text next to it.

And also checked by resizing the window , all is working fine. The On/Off Text doesn't Appear. So I think we can thought about this solution.Also the Best Thing is it is working fine for Android till not checked for iOS.

Happy to receive observations and suggestions....

Note- For entire source code, Please visit here

`

            <AbsoluteLayout Margin="{OnPlatform iOS='0,20,0,0'}" >

                <Label Text="Switch Demo" 
                       Margin="16,14,0,0"
                       Style="{StaticResource ProfileSettingLabel}"/>
                <Switch Style="{StaticResource ProfileSettingSwitch}" 
                        ThumbColor="{OnPlatform Android='#0969D9', iOS='#FFFFFF',  WinUI='#FFFFFF'}"     
                        OnColor="#0969D9"
                        AbsoluteLayout.LayoutBounds="0.7,0,60,35"
                        AbsoluteLayout.LayoutFlags="XProportional,YProportional" 
                        Toggled="OnLocationSwitchToggled"
                        IsVisible="{OnPlatform Android='True',iOS='True',WinUI='True'}"/>

            </AbsoluteLayout>

`

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 2.0. Repro on Android and Windows platform with sample project. Simple-Toggle.zip

[vishaljadhav09]

  Hello Winnie Zhang ,

  As I have mentioned there, have you tried absolute layout as layout ?

Please check On/Off text still showing in windows or not?

On Thu, Apr 20, 2023 at 8:59 AM Winnie Zhang @.***> wrote:

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 2.0. Repro on Android and Windows platform with sample project. Simple-Toggle.zip https://github.com/dotnet/maui/files/11279532/Simple-Toggle.zip [image: image] https://user-images.githubusercontent.com/77434865/233251064-9cb81f67-28b4-4b00-87bc-6aa1e919b8e2.png [image: image] https://user-images.githubusercontent.com/77434865/233251069-cd8da49c-d92b-4ea9-9f20-dc839b1e0d5d.png

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/6177#issuecomment-1515662163, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4C47CFZE7JRHRDUTA5F7VTXCCUSNANCNFSM5TUDDCXA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[david-maw]

@vishaljadhav09 Surely what you describe is a workaround, not a fix, certainly it masks the symptom, but the underlying problem is unchanged. Certainly AbsoluteLayout has its place, but it can be very unforgiving and somewhat tricky to use, especially in an adaptive interface.

[vishaljadhav09]

Yes @david-maw you are right this is some kind of workaround to the issue.So until MAUI resolve this issue from their side we can think about this workaround.

[nicop85]

+1 to this problem currently showing the "on/off" label besides the switch in WinUI (v. 7.0.86)

[Felicity-R]

An alternative to restricting the width is to use a handler mapping to get rid of that label. Like:

   SwitchHandler.Mapper.AppendToMapping("Custom", (h, v) =>
        {
            // Get rid of On/Off label beside switch, to match other platforms
            h.PlatformView.OffContent = string.Empty;
            h.PlatformView.OnContent = string.Empty;

            h.PlatformView.MinWidth = 0;
        });

Setting the MinWidth to 0 is necessary to let it size better, otherwise there's a bunch of empty space left on the right due to https://github.com/microsoft/microsoft-ui-xaml/issues/3652

[nicop85]

@Felicity-R thanks for sharing! It worked for me

[allen-628]

Nearly a year has passed and this very simple issue (little fish) still is unresolved, for windows. Is there any timeline for getting this fixed? Or has the Maui Team moved on to the next latest and greatest, catching the big fish while the little fishes keep getting away ?

[jfversluis]

I think it's important to remember that the paradigm of .NET MAUI is that we translate everything from the abstract layer to what is should look and feel like on the platform implementation. That is exactly what is going on here. If you define a ToggleSwitch in WinUI, this is what you will get. For iOS and Android it's the same thing, but the difference is: they don't show an On/Off label to the side.

If you want to not show the label, then indeed you can go into the platform functionality with a custom mapper and control that behavior as per Felicity-R's comment above:

#if WINDOWS
 SwitchHandler.Mapper.AppendToMapping("Custom", (h, v) =>
        {
            // Get rid of On/Off label beside switch, to match other platforms
            h.PlatformView.OffContent = string.Empty;
            h.PlatformView.OnContent = string.Empty;

            h.PlatformView.MinWidth = 0;
        });
#endif

We could maybe turn this behavior around if that would make more sense to people: set the labels to be empty by default, and if you want to have something there only then you have to create a custom mapper?

What would be the preferred action to take here? I'm not really clear on that at this time.

[david-maw]

My preferred action is to maximize the chance of a single form layout working on all platforms. I use MAUI so as to have a single application run across multiple platforms and having this default the same way on all platforms would best meet that goal.

Certainly a mapper is easy (well, speaking personally, it is if someone shows me how to do it as in this case) but I'd prefer simply adding OffContent and OnContent properties to the MAUI Switch class. Alas, that would mean implementing them in Android and IOS, which seems like a lot of work for a handy, but niche feature. IMHO a reasonable compromise would be to, as you put it, 'turn this behavior around', hide the default content in Windows and document a solution for anyone who wants the labels on Windows (which I presume are localized, making the solution a bit trickier).

[david-maw]

Sorry @jfversluis I forgot to explicitly name you in the previous reply to your post.

[jfversluis]

My preferred action is to maximize the chance of a single form layout working on all platforms. I use MAUI so as to have a single application run across multiple platforms and having this default the same way on all platforms would best meet that goal.

I definitely understand your sentiment, but I'd think if you want it to really look the same, there are other frameworks that will make it easier to achieve that. Don't get me wrong, I want to keep you here with .NET MAUI, but our paradigm has always been that we translate our abstract layer controls into whatever it should look like on the platform.

For Windows in this case that means having "On/Off" next to this control. If you go through Windows apps, that is what you will see, so if your user is using your apps on Windows, that is what they would expect to see.

What I definitely don't see us doing is implement this as a property and thus also implementing extra functionality for this on iOS and Android. As you already say: it's localized and all that, so we're opening up a whole new set of extra work there which we don't want to do.

What we could do is introduce a platform-specific for this so that we can influence this only for Windows. I think I'd still keep the default to on because it's the default behavior on Windows and it would be a breaking change if we would suddenly change that now.

That will make it easier to set this without writing your own handler, would that be an option?

[david-maw]

Thanks @jfversluis, a platform specific would be fine, but unless it's got some downside that I don't understand documenting the handler workaround would do as far as I'm concerned. Since I'm almost completely unfamiliar with handlers I'm probably not qualified to comment on the relative merits of the two solutions) though a plaform specific seems like it would be a bit better integrated.

As for cross-platform compatibility, I want my app to have a native look and feel on whatever platform it's on even though the difference for some things like entry fields is considerable. This difference was bothersome mostly because it changed the overall geometry of the control and duplicated the function of a Label which did essentially the same thing (generate a message for on vs. off). In the more general case differences like an entry box vs. an underline are less significant to the overall page layout.

[jsuarezruiz]

There is a quick workaround and we are evaluating options (add new property and implement on all platforms, platform specific etc).

#if WINDOWS
 SwitchHandler.Mapper.AppendToMapping("Custom", (h, v) =>
        {
            // Get rid of On/Off label beside switch, to match other platforms
            h.PlatformView.OffContent = string.Empty;
            h.PlatformView.OnContent = string.Empty;

            h.PlatformView.MinWidth = 0;
        });
#endif

However, it will not happen for .NET 8 timing. We will open a new Spec once we have it defined and we are going to close this issue. Feel free to let me know if we are not covering all the request in the upcoming spec or to open a new issue. Thanks for all your feedback and time.

[david-maw]

Thanks, the workaround is an adequate closure as far as I'm concerned, This issue was never critical, which is probably why it has taken over a year to get to the point of "we don't have time to get it done for the next release". I'll keep an eye out for the new spec and observe in passing that placement of the on/off text is a cultural consideration and should likely be localizable even if it isn't configurable.

[david-maw]

Sorry @jsuarezruiz, forgot to tag you in the previous comment.