locked
How to write a custom Renderer for Bindable Picker to change its Font attributes: Family,Size ? RRS feed

  • Question

  • User312607 posted

    Hi, I am using a BindablePicker as given here . However, the displayed selected item name font size by default is larger than what is required in my design. So, I want to add two more properties to this picker so that the displayed text, which happens to be the DisplayMemberPath can have desired font size and font family.

    I have added them in the BindablePicker control as :

    public static readonly BindableProperty FontFamilyProperty =          
            BindableProperty.Create("FontFamily", typeof(string), typeof(BindablePicker),string.Empty,BindingMode.OneWay);
    
            public string FontFamily
            {
                get
                {
                    return (string)GetValue(FontFamilyProperty);
                }
                set
                {
                    SetValue(FontFamilyProperty, value);
                }
            }
    
            public static readonly BindableProperty FontSizeProperty =
                   BindableProperty.Create("FontSize",
                       typeof(float),
                       typeof(BindablePicker),15f);
    
            public float FontSize
            {
                get
                {
                    return (float)this.GetValue(FontSizeProperty);
                }
                set
                {
                    this.SetValue(FontSizeProperty, value);
                }
            }
    

    How do I write an android and an iOS renderer to achieve the requirement ?

    Related to this issue, I just tried setting the control's font size and family in the renderer (not as mentioned in the XAML, but hard coded) as :

    Android:

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Picker> e)
            {
    
                base.OnElementChanged(e);
                if (Control != null)
                {
                    Control.Typeface = Typeface.CreateFromAsset(Context.Assets, "Roboto-Medium.ttf");
                    Control.TextSize = 16;
            }
    }
    

    iOS:

         protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Picker> e)
                {
    
                    base.OnElementChanged(e);
                    if (Control != null)
                    {
                        Control.Font = UIFont.SystemFontOfSize(16);
                        Control.Font = UIFont.FromName("Roboto-Regular", 16f);
                    }
        }
    

    This although creates not much of an issue in iOS, the pop-up dialog displayed in the Android device is not proper. I have attached the android screenshots here.

    I want the picker pop up to be as the default pop up, but the font size and family set as in the custom renderer.

    How can I achieve this ?

    Any help would be greatly appreciated.





    Wednesday, June 7, 2017 7:08 AM

All replies

  • User208001 posted

    https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/renderers/

    public class MyPicker: Picker
    {
    }
    

    <ContentPage ...
        xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
        ...>
        ...
        <local:MyPicker  ... ... />
        ...
    </ContentPage>
    

            using Xamarin.Forms.Platform.iOS;
    
            [assembly: ExportRenderer (typeof(MyPicker), typeof(MyPickerRenderer))]
            namespace CustomRenderer.iOS
            {
                public class MyPickerRenderer: PickerRenderer
                {
                    protected override void OnElementChanged (ElementChangedEventArgs<Picker> e)
                    {
                        base.OnElementChanged (e);
    
                        if (Control != null) {
                         ...
                ...
                        }
                    }
                }
            }
    
    Tuesday, June 13, 2017 5:56 PM
  • User369771 posted

    It´s a little bit old, but we run into the same issue and it takes me several hours of investigation.

    Scenario: For some reason you have to implement a custom Renderer for Picker (Android). Before your picker dialog is shown as in the image "default renderer picker pop up". After switch to your custom renderer the dialog looks like the other pop up image.

    Solution: java public class ExtendedPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer

    As you can see on docs.microsoft.com/de-de/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers (I´m not allowed to post the link correctly) there are two columns for Android in Row Picker filled.

    Normally every Android renderer is using the namespace Xamarin.Forms.Platform.Android so you don´t notice that two different PickerRenderer can be extended.

    Wednesday, June 13, 2018 4:08 PM
  • User370317 posted

    @skricke thanks ;)

    Friday, June 29, 2018 10:00 PM