Xamarin.Forms开关按钮需求：设置开关背景图及替换IN/OUT文本求适配UI

Hey there! Let’s tackle your Xamarin.Forms Switch customization needs—both replacing the background images for on/off states and swapping the ON/OFF text with IN/OUT are totally doable with two solid approaches. Here’s what I’ve used successfully in projects:

The default Xamarin.Forms Switch doesn’t expose properties for these customizations out of the box, so writing platform-specific renderers gives you full control over the native Switch controls.

Step 1: Create a Custom Switch Control (Shared Project) #

First, define a custom Switch in your shared code to add bindable properties for your background images:

public class CustomSwitch : Switch
{
    public static readonly BindableProperty OnBackgroundImageProperty =
        BindableProperty.Create(nameof(OnBackgroundImage), typeof(string), typeof(CustomSwitch));

    public string OnBackgroundImage
    {
        get => (string)GetValue(OnBackgroundImageProperty);
        set => SetValue(OnBackgroundImageProperty, value);
    }

    public static readonly BindableProperty OffBackgroundImageProperty =
        BindableProperty.Create(nameof(OffBackgroundImage), typeof(string), typeof(CustomSwitch));

    public string OffBackgroundImage
    {
        get => (string)GetValue(OffBackgroundImageProperty);
        set => SetValue(OffBackgroundImageProperty, value);
    }
}

Step 2: iOS Renderer #

In your iOS project, add a renderer to override the native UISwitch’s behavior:

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);
            
            if (Control == null || Element is not CustomSwitch customSwitch) return;

            // Set background images for on/off states
            Control.OnImage = UIImage.FromFile(customSwitch.OnBackgroundImage);
            Control.OffImage = UIImage.FromFile(customSwitch.OffBackgroundImage);
            
            // Replace ON/OFF with IN/OUT
            Control.SetTitle("IN", UIControlState.Selected);
            Control.SetTitle("OUT", UIControlState.Normal);
        }
    }
}

Step 3: Android Renderer #

For Android, use a selector drawable to handle state-based backgrounds (cleaner than setting images directly):

1. Create a switch_background.xml file in Resources/drawable (Android project):

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on_bg" android:state_checked="true" />
    <item android:drawable="@drawable/off_bg" android:state_checked="false" />
</selector>

2. Add the renderer to your Android project:

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomSwitchRenderer : SwitchRenderer
    {
        public CustomSwitchRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);
            
            if (Control == null) return;

            // Apply the state-based background
            Control.Background = Context.GetDrawable(Resource.Drawable.switch_background);
            
            // Swap ON/OFF with IN/OUT
            Control.TextOn = "IN";
            Control.TextOff = "OUT";
        }
    }
}

Step 4: Use the Custom Switch in XAML #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <local:CustomSwitch OnBackgroundImage="on_bg.png" 
                        OffBackgroundImage="off_bg.png"
                        IsToggled="False" />
</ContentPage>

If you want to skip writing native code, these libraries offer out-of-the-box customization:

• Syncfusion Xamarin Switch: Lets you set TextOn="IN", TextOff="OUT", and OnBackgroundImage/OffBackgroundImage directly via XAML properties. No native code required.
• Telerik UI for Xamarin Switch: Provides robust customization options for states, text, and backgrounds—great if you’re already using Telerik components in your project.
• Xamarin Community Toolkit: While the default Switch here doesn’t have these properties, you can combine VisualStateManager with custom styles to achieve similar results (better for lightweight needs).

Final Recommendation #

If you need pixel-perfect control over every detail, go with custom renderers. If you’re looking to save time and avoid platform-specific code, third-party libraries are the way to go—just double-check their licensing for commercial projects.

内容的提问来源于stack exchange，提问作者Manthiram