Xamarin.Forms - 使用 XAML 元素作为参数

Question

In my XAML page I have set a Picker. It works good, but it's not very user-friendly, sice there's no possibility to add an arrow icon in the Picker parameters. So I added an Image with a Gesture Recognizer, like this:

<Grid HeightRequest="50">
    <Picker x:Name="mySlugPicker" Grid.ColumnSpan="4"  Title="Sélectionnez votre serveur" ItemsSource="{Binding ServerList}"  ItemDisplayBinding="{Binding Value}" SelectedItem="{Binding SelectedItem}" TextColor="Black" TitleColor="Black" BackgroundColor="White"/>
    <Image Grid.Column="4" Source="down_arrow.png">
        <Image.GestureRecognizers>
            <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding OpenPicker}" CommandParameter="{Binding mySlugPicker}"/>
        </Image.GestureRecognizers>
    </Image>
</Grid>

All I want to do is open the Picker when the down arrow is pressed, so I defined a Command in my ViewModel like that:

public Command<Picker> OpenPicker { get; }

public ViewModel()
{
    OpenPicker = new Command<Picker>(TriggerPickerOpening);
}

private void TriggerPickerOpening(Picker picker)
{
    picker.Focus();
}

As you can see, I defined the "x:Name" property for my Picker, and I passed this x:Name as my command parameter. But when I'm launching my app, it throws me a NullReferenceException.

What am I doing wrong?

Answer 1

By not specifying a Source to your binding, it will go to search for mySlugPicker in your page BindingContext which is your view model and where mySlugPicker does not exist:

<Grid HeightRequest="50">
    <Picker x:Name="mySlugPicker" Grid.ColumnSpan="4"  Title="Sélectionnez votre serveur" ItemsSource="{Binding ServerList}"  ItemDisplayBinding="{Binding Value}" SelectedItem="{Binding SelectedItem}" TextColor="Black" TitleColor="Black" BackgroundColor="White"/>
    <Image Grid.Column="4" Source="down_arrow.png">
        <Image.GestureRecognizers>
            <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding OpenPicker}" CommandParameter="{Binding Source={x:Reference mySlugPicker}}"/>
        </Image.GestureRecognizers>
    </Image>
</Grid>

A good practice to avoid exception/crash would be to do a null check (don't trust parameter) before calling a method:

private void TriggerPickerOpening(Picker picker)
{
    picker?.Focus();
}

which is equivalent to:

private void TriggerPickerOpening(Picker picker)
{
    if (picker != null)
        picker.Focus();
}

Null-Coditional operator