How to Align Text on Xamarin Custom Picker

Question

I have a Xamarin Forms project on Visual Studio 2019. I have a simple custom picker as I have not managed to do a custom one. Don't know how to even though I have searched it.

What I want is to align my text on the center and get rid of the cancel button. Is there a way to do this without a custom renderer?

Here is my Picker

 <Picker x:Name="CustomerPicker" Title="Seleccione un cliente"
                    SelectedIndexChanged="CustomerPicker_OnSelectedIndexChanged" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>

I have used those properties but it still looks like this

Is there a way of doing this? If only with renderer, how? I can't find it properly explained. Please help and thanks.

Answer 1

You could remove the cancel button like below.

Xaml:

   <Picker x:Name="picker"
    Title="Select"
    TitleColor="Red">
        <Picker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>item1</x:String>
                <x:String>item2</x:String>
                <x:String>item3</x:String>
                <x:String>item4</x:String>

            </x:Array>
        </Picker.ItemsSource>
    </Picker>

Custom Renderer:

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
namespace App1.Droid
{
public class CustomPickerRenderer : PickerRenderer
{
    IElementController ElementController => Element as IElementController;
    public CustomPickerRenderer(Context context) : base(context)
    {

    }

    private AlertDialog _dialog;

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.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 Control_Click(object sender, EventArgs e)
    {
        Xamarin.Forms.Picker model = Element;

        var picker = new NumberPicker(Context);
        if (model.Items != null && model.Items.Any())
        {
            // set style here
            picker.MaxValue = model.Items.Count - 1;
            picker.MinValue = 0;
             
            picker.SetDisplayedValues(model.Items.ToArray());
            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(Xamarin.Forms.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();
    }
}
}