How Align the picker items text to start in xamarin forms Picker?

anji22anji22 USMember ✭✭

Answers

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    If you want to set the Align of the text , you first need to customize a subclass extends from NumberPicker and overwrite the method AddView

    public class TextColorNumberPicker: NumberPicker
    {
        public TextColorNumberPicker(Context context) : base(context)
        {
    
        }
    
        public override void AddView(View child, int index, ViewGroup.LayoutParams @params)
        {
            base.AddView(child, index, @params);
            UpdateView(child);
        }
    
        public void UpdateView(View view)
        {
            if ( view is EditText ) {
    
             // set the Align here  
            }
        }
    }
    

    in Android Project

    create the custom renderer of picker

    public class MyAndroidPicker:PickerRenderer
    {
    
        IElementController ElementController => Element as IElementController;
    
    
        public MyAndroidPicker()
        {
    
        }
    
    
        private AlertDialog _dialog;
    
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);
    
            if (e.NewElement == null || e.OldElement != null)
                return;
    
            Control.Click += Control_Click;
        }
    
        protected override void Dispose(bool disposing)
        {
            Control.Click -= Control_Click;
            base.Dispose(disposing);
        }
    
    
        private void SetPickerDividerColor(TextColorNumberPicker picker)
        {
            Field[] fields = picker.Class.GetDeclaredFields();
    
            foreach (Field pf in fields)
            {
                if(pf.Name.Equals("mSelectionDivider"))
                {
                    pf.Accessible = true;
                    // set the color as transparent
                    pf.Set(picker, new ColorDrawable(this.Resources.GetColor(Android.Resource.Color.Transparent)));
    
                }
            }
    
        }
    
    
        private void Control_Click(object sender, EventArgs e)
        {
    
            Picker model = Element;
    
            var picker = new TextColorNumberPicker(Context);
            if (model.Items != null && model.Items.Any())
            {
    
                picker.MaxValue = model.Items.Count - 1;
                picker.MinValue = 0;
    
                picker.SetDisplayedValues(model.Items.ToArray());
    
                //call the method after you setting DisplayedValues
                SetPickerDividerColor(picker);
                picker.WrapSelectorWheel = false;
                picker.Value = model.SelectedIndex;
            }
    
            var layout = new LinearLayout(Context) { Orientation = Orientation.Vertical };
            layout.AddView(picker);
    
            ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, true);
    
            var builder = new AlertDialog.Builder(Context);
            builder.SetView(layout);
    
            builder.SetTitle(model.Title ?? "");
            builder.SetNegativeButton("Cancel  ", (s, a) =>
            {
                ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
                // It is possible for the Content of the Page to be changed when Focus is changed.
                // In this case, we'll lose our Control.
                Control?.ClearFocus();
                _dialog = null;
            });
            builder.SetPositiveButton("Ok ", (s, a) =>
            {
                ElementController.SetValueFromRenderer(Picker.SelectedIndexProperty, picker.Value);
                // It is possible for the Content of the Page to be changed on SelectedIndexChanged.
                // In this case, the Element & Control will no longer exist.
                if (Element != null)
                {
                    if (model.Items.Count > 0 && Element.SelectedIndex >= 0)
                        Control.Text = model.Items[Element.SelectedIndex];
                    ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
                    // It is also possible for the Content of the Page to be changed when Focus is changed.
                    // In this case, we'll lose our Control.
                    Control?.ClearFocus();
                }
                _dialog = null;
            });
    
            _dialog = builder.Create();
            _dialog.DismissEvent += (ssender, args) =>
            {
                ElementController?.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
            };
            _dialog.Show();
        }
    
    }
    

    And you can set other style of the picker in custom renderer of picker :)

Sign In or Register to comment.