Xamarin Forms Switch XAML

Question

I'm new in Xamarin and i'm trying to create a simple page with some components.

One of these component is a Switch it works fine by itself but i would like to change the basic text "inactive/active" by "male/female"

I've seen that in Xaml for windows phone there is a ToggleSwitch Component with a On/OffContent property but i can't seems to find an equivalent in XAML for Xamarin Forms

any idea ?

Thank you!

ClintL ClintL · Accepted Answer · 2015-05-11T17:07:01

The lack of built in switch options, or at least the lack of being able to rename the switch options, has been asked a few times.

You could go with custom renders, modify the text at the OS level or do like I chose to do, just build your own switch.

This switch is two buttons laid out horizontally with the text Yes and No. The selected button gets a red border, and the unselected a transparent border.

class CustomSwitch : Grid
{

    public event EventHandler<SelectedItemChangedEventArgs> ItemSelected;
    private Button negative;
    private Button positive;

    public static readonly BindableProperty SelectedItemProperty = BindableProperty.Create<CustomSwitch, Object>(t => t.SelectedItem, null, BindingMode.TwoWay, propertyChanged: OnSelectedItemChanged);

    public CustomSwitch()
    {

        try
        {
            this.HorizontalOptions = LayoutOptions.Center;
            this.VerticalOptions = LayoutOptions.Center;

            negative = new Button();
            negative.Text = "No";
            negative.Style = <YourNameSpace>.AppStyling.Style_Button_Switch;
            negative.Clicked += (o,s) => OnSelectedItemChanged(this, ItemSelected, (int)Classes.Collections.Enums.SelectionStatus.False);

            positive = new Button();
            positive.Text = "Yes";
            positive.Style = <YourNameSpace>.AppStyling.Style_Button_Switch;
            positive.Clicked += (o, s) => OnSelectedItemChanged(this, ItemSelected, (int)Classes.Collections.Enums.SelectionStatus.True);               

            this.Children.Add(negative, 0,0);
            this.Children.Add(positive, 1,0);
        }
        catch(System.Exception ex)
        {
            <YourNameSpace>.Classes.Helpers.Helper_ErrorHandling.SendErrorToServer(ex, this.GetType().Name, System.Reflection.MethodBase.GetCurrentMethod().Name);
        }

    }

    public Object SelectedItem
    {
        get
        {
            return base.GetValue(SelectedItemProperty);
        }
        set
        {
            if (SelectedItem != value)
            {
                base.SetValue(SelectedItemProperty, value);
                InternalUpdateSelected();
            }
        }
    }

    private void InternalUpdateSelected()
    {
        if((int)SelectedItem == (int)Classes.Collections.Enums.SelectionStatus.False)
        {
            negative.BorderColor = <YourNameSpace>.AppStyling.Color_Selected;
            positive.BorderColor = <YourNameSpace>.AppStyling.Color_UnSelected;
            positive.Opacity = <YourNameSpace>.AppStyling.Opaque_High;
        }
        else if ((int)SelectedItem == (int)Classes.Collections.Enums.SelectionStatus.True)
        {
            negative.BorderColor = <YourNameSpace>.AppStyling.Color_UnSelected;
            negative.Opacity = <YourNameSpace>.AppStyling.Opaque_High;
            positive.BorderColor = <YourNameSpace>.AppStyling.Color_Selected;
        }
        else
        {
            negative.BorderColor = <YourNameSpace>.AppStyling.Color_UnSelected;
            negative.Opacity = <YourNameSpace>.AppStyling.Opaque_High;
            positive.BorderColor = <YourNameSpace>.AppStyling.Color_UnSelected;
            positive.Opacity = <YourNameSpace>.AppStyling.Opaque_High;
        }
    }

    private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
    {
        CustomSwitch boundSwitch = (CustomSwitch)bindable;

        if((int)newValue != (int)Classes.Collections.Enums.SelectionStatus.Unselected)
        {
            boundSwitch.SelectedItem = (int)newValue == (int)Classes.Collections.Enums.SelectionStatus.False ? (int)Classes.Collections.Enums.SelectionStatus.False : (int)Classes.Collections.Enums.SelectionStatus.True;
        }


        if (boundSwitch.ItemSelected != null)
        {
            boundSwitch.ItemSelected(boundSwitch, new SelectedItemChangedEventArgs(newValue));
        }
        boundSwitch.InternalUpdateSelected();
    }

}

Xamarin Forms Switch XAML

1 Answers