How do I bind a Command with Parameters to a Syncfusion Listview... while using Prism?

Question

I am using the Syncfusion Listview with Xamarin forms, and want to use the ICommand interface located in my model.

When reading the help file for this control it seems to direct me to setting an event on the control itself, and then processing the response in my View.

Screen.xaml

       <syncfusion:SfListView x:Name="listView" Grid.Row="1"  ItemsSource="{Binding TrustAnchors}" 
           SelectionChanged="Handle_SelectionChanged" ItemSize="100" >
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.4*" />
                            <RowDefinition Height="0.6*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />
                        <Label Grid.Row="1" Text="{Binding Description}" TextColor="Teal" FontSize="15"/>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>

• Is it possible for me to process the click event (SelectionChanged) in my ViewModel?

• Should I create a button in my template, or is this a hack?

Answer 1

We have checked the reported query “Events in ViewModel when using PRISM” at our end. You can achieve your requirement by using EventToCommandBehavior class available in prism library.

Code snippet: C# : Command for event definition in ViewModel.

public class MainPageViewModel : BindableBase, INavigationAware
{
    private Command<ItemSelectionChangedEventArgs> selectionChangedCommand;
    public Command<ItemSelectionChangedEventArgs> SelectionChanged
    {
        get { return selectionChangedCommand; }
        set { selectionChangedCommand = value; }
    }

    public MainPageViewModel()
    {
             SelectionChanged = new Command<ItemSelectionChangedEventArgs>(OnSelectionChanged);
    }

    private void OnSelectionChanged(ItemSelectionChangedEventArgs eventArgs)
    {

    }
}

# EventArgs converter returns the ItemSelectionChangedEventArgs while executing command

public class EventArgs : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        object eventArgs = null;
        if (value is Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs)
            eventArgs = value as Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs;         
        return eventArgs;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Code Snippet: XAML : EventToCommandBehavior binds the ViewModel command to SfListView SelectionChanged event in Behaviors.

xmlns:behvaior="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"

<ContentPage.Resources>
    <ResourceDictionary>
        <local:EventArgs x:Key="eventArgs" />
    </ResourceDictionary>
</ContentPage.Resources>

<listView:SfListView x:Name="listView" ItemSize="70"                      
                        ItemsSource="{Binding ContactsInfo}">
    <listView:SfListView.Behaviors>
        <behvaior:EventToCommandBehavior EventName="SelectionChanged"     
                                         EventArgsConverter="{StaticResource eventArgs}"
                                         Command="{Binding SelectionChanged}"/>
    </listView:SfListView.Behaviors>
    </listView:SfListView.ItemTemplate>
</listView:SfListView>

We have attached the sample for your reference. You can download the same from following location

Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewPrismMust1198452680

You can create button in your template if you want any specific action that should work when click on button alone. It is not the hack. You can customize based on the element also.