Changing the default text color of a Picker control in Xamarin Forms for Windows Phone 8.1

Question

I am using Xamarin Forms picker control and require setting the text color, however there is no such property. I have tried making a custom renderer which worked out for me in android and ios (I ended up redrawing the control). In the wp8.1 platform there is no Draw event and the control itself in the renderer doesn't seem to have the properties to set the text color. I have also attempted changing the control the picker binds to unsuccessfully.

Currently I have created the bindable property TextColor in the PCL which is working. The code for my renderer is shown below (I have stripped all my test code and am putting only the basic code since I havent found anything useful yet and am putting my code just to keep everyone in context). Also note that the property Picker.TextColorProperty doesnt exist and is what I would like to do...

using Namespace.CustomControls;
using Namespace.WinPhone.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.WinPhone;

[assembly: ExportRendererAttribute(typeof(BindablePicker), typeof(BindablePickerRenderer))]
namespace Namspace.WinPhone.Renderers
{
    public class BindablePickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            var picker = e.NewElement;
            BindablePicker bp = (BindablePicker)this.Element;

            if (this.Control != null)
            {
                var pickerStyle = new Style(typeof(Picker))
                {
                    Setters = {
                        new Setter {Property = Picker.BackgroundColorProperty, Value = bp.BackgroundColor},
                        new Setter {Property = Picker.TextColorProperty, Value = bp.TextColor}
                    }
                };

                picker.Style = pickerStyle;
            }
        }
    }
}

Anyhow I am wondering if anyone might have a little more knowledge on how to do this and could shed some light on me.

Kerseymere

Answer 1

There is no TextColor property available in the Picker like you mention.

Even this being the case, we can still achieve changing the Picker text color for WindowsPhone.

I'm assuming you are inheriting from PickerRenderer as it was missing from your code example and I've added some extra things so this is more helpful to others:-

Define the interface in the PCL:-

public interface ICustomPicker2
{
    Xamarin.Forms.Color MyBackgroundColor { get; set; }
    Xamarin.Forms.Color MyTextColor { get; set; }
}

Extend the Xamarin.Forms Picker in the PCL:-

public class CustomPicker2
    : Xamarin.Forms.Picker
    , ICustomPicker2
{

    public static readonly BindableProperty MyBackgroundColorProperty = BindableProperty.Create<CustomPicker2, Xamarin.Forms.Color>(p => p.MyBackgroundColor, default(Xamarin.Forms.Color));

    public static readonly BindableProperty MyTextColorProperty = BindableProperty.Create<CustomPicker2, Xamarin.Forms.Color>(p => p.MyTextColor, default(Xamarin.Forms.Color));

    public Xamarin.Forms.Color MyTextColor
    {
        get { return (Xamarin.Forms.Color)GetValue(MyTextColorProperty); }
        set { SetValue(MyTextColorProperty, value); }
    }

    public Xamarin.Forms.Color MyBackgroundColor
    {
        get { return (Xamarin.Forms.Color)GetValue(MyBackgroundColorProperty); }
        set { SetValue(MyBackgroundColorProperty, value); }
    }
}

Create your WindowsPhone renderer like so in a class library:-

public class CustomPicker2Renderer
    : PickerRenderer
{

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

        var picker = e.NewElement;
        CustomPicker2 bp = (CustomPicker2)this.Element;

        if (this.Control != null)
        {
            var pickerStyle = new Style(typeof(Picker))
            {
                Setters = {
                     new Setter {Property = Picker.BackgroundColorProperty, Value = bp.MyBackgroundColor},
                }
            };

            SetPickerTextColor(bp.MyTextColor); 

            picker.Style = pickerStyle;
        }       
     }

    private void SetPickerTextColor(Xamarin.Forms.Color pobjColor)
    {
        byte bytR = (byte)(pobjColor.R * 255);
        byte bytG = (byte)(pobjColor.G * 255);
        byte bytB = (byte)(pobjColor.B * 255);
        byte bytA = (byte)(pobjColor.A * 255);
        //
        ((System.Windows.Controls.Control)(((System.Windows.Controls.Panel)this.Control).Children[0])).Foreground = new SolidColorBrush(System.Windows.Media.Color.FromArgb(bytA, bytR, bytG, bytB));
    }

Note, the above is all what you need if you just want to set the text color the once.

However if you want to change the color after it has been initially set, then you will need to listen to the property change and act upon it like in the following:-

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        //
        if (e.PropertyName == "MyTextColor")
        {
            SetPickerTextColor((this.Element as CustomPicker2).MyTextColor);
        }
    }

You will also need to export the renderer from the class library as well:-

[assembly: ExportRendererAttribute(typeof(CustomPicker2), typeof(CustomPicker2Renderer))]

Indigo

Thanks that worked perfect! I fixed the code and added the class declaration with the PickerRenderer inheritance (appears I overwrote it accidently) in case anyone stumbles on this question. – Kerseymere

This is great (+1), but one thing - why use a style to override the background color? This means you're also overriding any other styles that might be on the Xamarin element. Instead you should just set the individual background color property. – Aretina