Open a picker automatically when a page transition occurs at Xamarin.Forms

Question

I am a developer with Xamarin. I'm developing with Xamarin.Forms. I would like to open a picker when a page transition occurs. I searched for existing information and found the following information about opening the picker by using Focus().

<ContentPage
    Appearing="OnContentPageAppearing"
    >
    <Picker x:Name="TypePicker"
        ItemsSource="{Binding ItemTypes}"
        SelectedItem="{Binding SelectedItemType}" />

    private void OnContentPageAppearing(object sender, EventArgs e)
    {
        TypePicker.Focus();
    }

However, this is not enough to open the Picker. Do we need the equivalent of a Click or Tap event? If so, how do I write the code?

Answer 1

You could use Rg.Plugins.Popup plugin to create a popup page with picker.

I am not sure how do you use the navigation. I use a button click event to open the pop up page first. And then when i close the pop up page, navigate to the another page.

The code of navigating to the pop up page.

 private async void Button_Clicked(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PushAsync(new Popup_picker());
    }

Popup page:

Xaml:

<rg:PopupPage  xmlns:rg="http://rotorgames.com" xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App3.Popup_picker">
<rg:PopupPage.Animation>
    <rg:ScaleAnimation
        DurationIn="400"
        DurationOut="300"
        EasingIn="SinOut"
        EasingOut="SinIn"
        HasBackgroundAnimation="True"
        PositionIn="Center"
        PositionOut="Center"
        ScaleIn="1.2"
        ScaleOut="0.8" />
</rg:PopupPage.Animation>
<StackLayout  Margin="60"
            BackgroundColor="White">
    <Picker x:Name="TypePicker"
    ItemsSource="{Binding ItemTypes}"
    ItemDisplayBinding="{Binding Item}"
    SelectedItem="{Binding SelectedItemType}" Unfocused="TypePicker_Unfocused"/>
</StackLayout>

</rg:PopupPage>

ViewModel for the Popup page:

public class PickerViewModel
{
    public IList<PickerModel> ItemTypes { get; set; }

    public PickerModel SelectedItemType { get; set; }
    public PickerViewModel()
    {
        ItemTypes = new List<PickerModel>()
        {
             new PickerModel() { Item="A"},
             new PickerModel() { Item="B"},
             new PickerModel() { Item="C"},
        };
        SelectedItemType = ItemTypes[0];
    }
}

public class PickerModel
{
    public string Item { get; set; }
}

Code behind: Do the navigation when you close the popip page.

 public partial class Popup_picker : PopupPage
{
    public Popup_picker()
    {
        InitializeComponent();
        this.BindingContext = new PickerViewModel();
    }
    protected override Task OnAppearingAnimationBeginAsync()
    {
        return Content.FadeTo(1);
    }
    protected override Task OnAppearingAnimationEndAsync()
    {
        return Content.FadeTo(1);
    }

    private async void TypePicker_Unfocused(object sender, FocusEventArgs e)
    {
        await PopupNavigation.Instance.PopAsync();
    }
    protected async override void OnDisappearing()
    {
        base.OnDisappearing();
        await Navigation.PushAsync(new Page1());
    }
}

For more details about the Rg.Plugins.Popup, please refer to the link below. https://github.com/rotorgames/Rg.Plugins.Popup