Xamarin.Forms example of how to have a Xamarin.Forms element Event trigger an MVVM Command using a custom Behavior
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
XamarinExamples.Forms.EventToCommand
iOS
.gitignore
LICENSE
README.md
XamarinExamples.Forms.EventToCommand.sln

README.md

XamarinExamples.Forms.EventToCommand

This repository holds an a working example of the Xamarin Reusable EventToCommand custom Behavior which lets you bind Commands to Events for Xamarin.Form elements that do not properly support the MVVM Command Pattern.

While this example uses a ListView ItemTapped Event as the example, it can be applied to any Event using the appropriate Converter for the EventArgs.

Cheers!

How it works

Xamarin.Forms

In the Xamarin.Forms project we implement the resusable EventToCommand Behavior example as described over at the Xamarin documentation (link)

<ListView ItemsSource="{Binding ListValues}">
    ...
    <ListView.Behaviors>
        <b:EventToCommandBehavior EventName="ItemTapped" Command="{Binding ItemTappedCommand}" Converter="{StaticResource SelectedItemConverter}" />
    </ListView.Behaviors>
</ListView>

This tells Xamarin.Forms to use our EventToCommand behavior to bind the ItemTapped Event to the specified command ItemTappedCommand which is defined in the ViewModel

public EventToCommandPageViewModel()
{
    //Assign method to be invoked by Command
    ItemTappedCommand = new Command((o) => ItemTapped(o));
}

/// <summary>
///     Command that will be mapped to the ItemTapped event
/// </summary>
/// <value>The item tapped command.</value>
public Command ItemTappedCommand { get; }

... more code ...

/// <summary>
///     Handle ItemTapped Event (via Command)
/// </summary>
/// <param name="value">Value.</param>
void ItemTapped(object value)
{
    SelectedValue = value as string ?? string.Empty;;
}

Using this method keeps our Code Behind clean from any Event mapping and allows us to follow a pure MVVM model where Events are bound to Commands and there's loose couping between our XAML and our ViewModel.

FYI

  • This Example makes use of James Montemagno's OnPropertyChanged() implementation of INotifyPropertyChanged which is really fantasic and should be in the base class for any MVVM ViewModel you're working with. Check out his MVVM Blog Post and video from The Xamarin Show here
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "")
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
  • We use a little tick to keep the ListView from rendering blank items past the end of our enumerated strings. By placing the following code as the "footer" for the ListView, it'll cause it to truncate the rendering of the items at the correct point.
<!-- This actually keeps the list from rendering blank cells past the last item-->
<ListView.Footer>
    <StackLayout Orientation="Horizontal" />
</ListView.Footer>

Cheers!

Example of ItemTapped Event through MVVM