How can I change the color of a Selector Rendere in iOS to be a new color?

Question

I am using code that creates a selector looking like this:

What I would like to do is to change the code so that what is blue all changed to a color specified in the XAML. Does anyone have any ideas as to how this could be done?

The XAML I use looks like this:

<local:SegmentedControl ValueChanged="OnModeChanged" x:Name="segControlMode" HorizontalOptions="End">
   <local:SegmentedControl.Children>
      <local:SegmentedControlOption Text="Learn" />
      <local:SegmentedControlOption Text="Quiz" />
   </local:SegmentedControl.Children>
</local:SegmentedControl>

iOS renderer:

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using System.Diagnostics;
using System;

[assembly: ExportRenderer(typeof(Japanese.SegmentedControl), typeof(Japanese.iOS.SegmentedControlRenderer))]
namespace Japanese.iOS
{
    public class SegmentedControlRenderer : ViewRenderer<SegmentedControl, UISegmentedControl>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
        {
            base.OnElementChanged(e);

            UISegmentedControl segmentedControl = null;
            if (Control == null)
            {
                segmentedControl = new UISegmentedControl();

                for (var i = 0; i < e.NewElement.Children.Count; i++)
                {
                    segmentedControl.InsertSegment(Element.Children[i].Text, i, false);
                }

                SetNativeControl(segmentedControl);
                SetSelectedSegment();
            }

            if (e.OldElement != null)
            {
                // Unsubscribe from event handlers and cleanup any resources
                if (segmentedControl != null)
                    segmentedControl.ValueChanged -= NativeValueChanged;
            }

            if (e.NewElement != null)
            {
                // Configure the control and subscribe to event handlers
                segmentedControl.ValueChanged += NativeValueChanged;
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == nameof(SegmentedControl.SelectedSegment))
                SetSelectedSegment();
        }

        void NativeValueChanged(object sender, EventArgs e)
        {
            if (Element is SegmentedControl formsElement)
            {
                formsElement.SelectedSegment = (int)Control.SelectedSegment;
            };
        }

        void SetSelectedSegment()
        {
            if (Element is SegmentedControl formsElement)
            {
                if (formsElement.SelectedSegment >= 0 && formsElement.SelectedSegment < Control.NumberOfSegments)
                    Control.SelectedSegment = formsElement.SelectedSegment;
            }
        }
    }
}

What I would like to do is to change the color something like this in the XAML for example:

<local:SegmentedControl ValueChanged="OnModeChanged" x:Name="segControlMode" HorizontalOptions="End" Color="Red" >
    <local:SegmentedControl.Children>
      <local:SegmentedControlOption Text="Learn" />
      <local:SegmentedControlOption Text="Quiz" />
   </local:SegmentedControl.Children>
</local:SegmentedControl>

For android if you are using default colors then try editing Resources->values->colors.xml or Resources->values->styles.xml — Leslie Correa, Jan 31 '18 at 17:21
I agree that would work but would it not be confusing if I was to set the color one way in Android and another way in iOS (using XAML) — Alan2, Feb 01 '18 at 13:15

Diego Rafael Souza · Answer 1 · 2018-03-29T12:53:15.523

You can create a BindableProperty on the shared project class and handle its changes on the renderer.

Here are some changes you have to do:

Create one `BindableProperty` on the `SegmentedControl` class

public class SegmentedControl : Xamarin.Forms.View /* Replace this with your real inheritance */
{
    /* ... The rest of your class ... */

    public static readonly BindableProperty TintColorProperty = BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(SegmentedControl), Color.Blue, BindingMode.OneWay);
    public Color TintColor
    {
        get { return (Color)GetValue(TintColorProperty); }
        set { SetValue(TintColorProperty, value); }
    }

    /* ... The rest of your class ... */
}

Then transfer the selected color to the native control equivalent property on the Renderer's methods:

protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
{
    base.OnElementChanged(e);

    /* ... Your previous code as it is now ...*/

    segmentedControl.TintColor = e.NewElement?.TintColor.ToUIColor();

    SetNativeControl(segmentedControl);
    SetSelectedSegment();

    /* ... Your further code as it is now ...*/
}

protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    base.OnElementPropertyChanged(sender, e);

    if (e.PropertyName == nameof(SegmentedControl.SelectedSegment))
        SetSelectedSegment();

    /* Keep one eye on changes after rendered */
    if(e.PropertyName == SegmentedControl.TintColorProperty.PropertyName)
        SetSegmentTintColor();
}

void SetSegmentTintColor()
{
    if (Element is SegmentedControl formsElement)
        Control.TintColor = formsElement.TintColor;
}

How can I change the color of a Selector Rendere in iOS to be a new color?

1 Answers1

Create one BindableProperty on the SegmentedControl class

Create one `BindableProperty` on the `SegmentedControl` class