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

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> 

1 Answers

Answers 1

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; } 

I home it helps (and sorry any bad English spelling).

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati