Adjusting font size of Xamarin’s Picker

When you’re developing the front-end side of a Xamarin’s app, you’re demanded to put and arrange every UI component in the right place, with right size and right color.  When it comes to size, it’s kinda troublesome to adjust picker to precise font size. The font size of picker in Xamarin, including DatePicker and TimePicker, is simply fixed. So, in this post, we will discuss about a workaround method to approach this problem. With this method, you will be even able to bind the font size of the picker to certain variable in view model if you want to. Note: so far, it works in Android, I still haven’t tried it in iOS. I’ll update this post or make another post after try it in iOS.

Custom Picker Class

The first step is we will create the custom class of the picker. This custom class will inherit picker class and we’ll add one binding property, font size, to this class. The following code is the example of the custom class.


 public class CustomPicker : Picker
    {
        public static readonly BindableProperty FontSizeProperty =
            BindableProperty.Create(nameof(FontSize), typeof(Int32), typeof(CustomPicker),
                10, BindingMode.Default);
        public Int32 FontSize
        {
            get => (Int32)GetValue(FontSizeProperty);
            set => SetValue(FontSizeProperty, value);
        }
    }

Updating Picker UI

The second step, we move on to the Android project. This part is just about the UI, nothing to do with the functionality of the picker. You can ignore and jump to next step if you feel don’t need it. So, in this part, I made and axml file which define the the background of the picker. As you know, standard Xamarin is just a text with underline, not so eye catching. So, I make little bit modification on it. I put the file in Drawable folder inside Resources.




  
    
      
      
      
    
  

  
    
      
      
      
    
  


Custom Picker Renderer

The third step is the most important part. We gonna make custom renderer of the picker. Inheriting from PickerRenderer class, we will adjust the text size property of the picker base on font size property that we’ve created earlier. I use 0.01 as the multiplier just because it suit my need in my previous project, you can change it to meet your need if you feel need to.


 class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            this.Control.Background = Forms.Context.GetDrawable(Resource.Drawable.customPicker);
            if (e.OldElement != null || e.NewElement != null)
            {
                var customPicker = e.NewElement as CustomPicker;
                Control?.SetPadding(20, 0, 0, 0);
                Control.TextSize *= (customPicker.FontSize * 0.01f);
            }

        }
    }

Implementation

Now let’s try it out. The following codes if the sample of xaml file where I use the custom picker, followed by the view model.




    
        
            
            
            
            
        
    


 public class PickerViewModel : INotifyPropertyChanged
    {

        private List countryList;
        private List stateList;
        private List cityList;

        public List CountryList
        {
            get => countryList;
            set => SetObservableProperty(ref countryList, value);
        }

        public List StateList
        {
            get => stateList;
            set => SetObservableProperty(ref stateList, value);
        }

        public List CityList
        {
            get => cityList;
            set => SetObservableProperty(ref cityList, value);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public PickerViewModel()
        {
            CountryList = new List() { "USA", "China", "Russia" };
            StateList = new List() { "California", "Sichuan", "Kirov" };
            CityList = new List() { "Los Angeles", "Guangzhou", "St. Petersburg" };
        }

        protected void SetObservableProperty(ref T field, T value,
            [CallerMemberName] string propertyName = "")
        {
            if (EqualityComparer.Default.Equals(field, value)) return;
            field = value;
            OnPropertyChanged(propertyName);
        }

        protected virtual void OnPropertyChanged(string propertyName)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PickerPage : ContentPage
    {
        public PickerPage()
        {
            InitializeComponent();
            BindingContext = new PickerViewModel();
        }
    }

When you run the project, you will have three different picker with three different size. You can try to bind the font size property with any integer variable you have within your view model.

 

Update : Set Placeholder Color of Xamarin’s Picker

Update : Adjusting Font Size of Xamarin’s Picker (Part 2)

Sample Code is Available in my Github repo

Advertisements

5 thoughts on “Adjusting font size of Xamarin’s Picker

  1. Cool tutorial, thanks.
    I am having issue with android. When I click on the control, my application breaks, with the message : Android.Views.WindowManagerBadTokenException: Unable to add window.
    Any help please

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s