Xamarin Forms Switch text in UWP

Question

Just like someone else encountered for windows-phone here, I'm looking to change the text next to the Switch control in xamarin-forms, that only seems to be possible ootb for Android. The difference is that I'm looking to change the control's text in uwp (and that over a year has passed since the previous person asked his/her question).

Does anyone have a (relatively easy) solution for this, or is this answer still the best solution?

Franklin Chen - MSFT Franklin Chen - MSFT · Accepted Answer · 2016-09-14T10:55:18

Does anyone have a (relatively easy) solution for this

I checked Xamarin.forms Switch source code, for WinRT platform, the Switch control's style actually follows Windows.UI.Xaml.Controls.ToggleSwitch's style.

So we can create modify the default template based on our requirement.

For the default ToggleSwitch styles and templates, please see here

Please notice this part:

<ContentPresenter x:Name="OffContentPresenter"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.Column="2"
                        Opacity="0"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Content="{TemplateBinding OffContent}"
                        ContentTemplate="{TemplateBinding OffContentTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw" />
    <ContentPresenter x:Name="OnContentPresenter"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.Column="2"
                        Opacity="0"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Content="{TemplateBinding OnContent}"
                        ContentTemplate="{TemplateBinding OnContentTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw" />

If we need to change the text next to switch thumb, we can just avoid setting Content property using TemplateBinding.

Add the default style under Application.Resources node(App.xaml). If you are not familar with this, see ResourceDictionary and XAML resource references

Create two resources, change the value from code behind if you need:

<x:String x:Key="MyOffContent">Close</x:String>
<x:String x:Key="MyOnContent">Open</x:String>

Modify template:

<ContentPresenter x:Name="OffContentPresenter"
                    Grid.Row="1"
                    Grid.RowSpan="3"
                    Grid.Column="2"
                    Opacity="0"
                    Foreground="{TemplateBinding Foreground}"
                    IsHitTestVisible="False"
                    Content="{StaticResource MyOffContent}"
                    ContentTemplate="{TemplateBinding OffContentTemplate}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />
    <ContentPresenter x:Name="OnContentPresenter"
                    Grid.Row="1"
                    Grid.RowSpan="3"
                    Grid.Column="2"
                    Opacity="0"
                    Foreground="{TemplateBinding Foreground}"
                    IsHitTestVisible="False"
                    Content="{StaticResource MyOnContent}"
                    ContentTemplate="{TemplateBinding OnContentTemplate}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    AutomationProperties.AccessibilityView="Raw" />

Sample XAML code: http://codepaste.net/qjin7c

Screenshot:

Xamarin Forms Switch text in UWP

1 Answers