Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I style the items list in a Xamarin Picker (in Android)

I have a Xamarin Android application that uses a Picker to select from a list of values. I have been changing the style of the application, but run into problems with the Picker. Although I can set the TextColor, I could not set the colour of the placeholder text.

After searching SO for help, I've implemented a custom renderer, and I now have the text and placeholder showing in the correct text. However, previously when I touched the placeholder text, the child dialog appeared and displayed all the items, allowing the user to select one. Now I have the custom renderer implemented, the child dialog only shows the top two items, and the user has to scroll through them before hitting OK.

I have two questions:

  1. At a minimum, how can I get the child dialog displaying the full list again?
  2. Is it possible to set the background and text colour for the items list dialog?

The XAML looks like this:

<c:CustomPicker x:Name="DivisionList" Title="{x:Static prop:Resources.PickerDivision}" 
                        SelectedIndexChanged="DivisionList_SelectedIndexChanged">
    <Picker.Behaviors>
        <b:RequiredPickerValidator x:Name="DivValidator" IsValid="{Binding Path=BindingContext.IsDivisionValid, Mode=OneWayToSource, Source={x:Reference contentPage}}" />
    </Picker.Behaviors>
</c:CustomPicker>

The CustomPicker class is as follows:

namespace <myapp>.Portable.Controls
{
    public class CustomPicker : Picker
    {
        public Color PlaceholderColour
        {
            get { return (Color)App.Current.Resources["PlaceholderTextColour"]; }
        }

        public Color TextColour
        {
            get { return (Color)App.Current.Resources["LabelTextColour"]; }
        }

        public Color BackgroundColour
        {
            get { return (Color)App.Current.Resources["PaneBackgroundColour"]; }
        }
    }
}

And the customer renderer is this:

[assembly: ExportRendererAttribute(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace <myapp>.Droid.Controls.Renderers
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            Control?.SetPadding(20, 20, 20, 20);
            if (e.OldElement != null || e.NewElement != null)
            {
                var customPicker = e.NewElement as CustomPicker;

                Android.Graphics.Color phCol = customPicker.PlaceholderColour.ToAndroid();
                Android.Graphics.Color textCol = customPicker.TextColour.ToAndroid();
                Android.Graphics.Color bgCol = customPicker.BackgroundColour.ToAndroid();

                Control.SetBackgroundColor(bgCol);
                Control.SetHintTextColor(phCol);
                Control.SetTextColor(textCol);
            }
        }
    }
}

Many thanks in advance!

Picker popup before custom renderer: Picker popup before custom renderer

Picker popup after custom renderer: Picker popup after custom renderer

like image 421
OriginalBigBri Avatar asked Dec 24 '22 10:12

OriginalBigBri


1 Answers

There appear to be 2 picker renderers.

Xamarin.Forms.Platform.Android.PickerRenderer & Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer

Make sure you use the last one and your layout will be the same as before!!!

The source where i got my answer: https://forums.xamarin.com/discussion/97150/how-to-write-a-custom-renderer-for-bindable-picker-to-change-its-font-attributes-family-size

Renderers (no real indication there are 2): https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers

like image 142
Andy Avatar answered Dec 27 '22 12:12

Andy