EventToCommandBehavior with SfListView ItemTapped and CommandParameter

[Christoph Nienaber]

I have the following:

A SfListView with an Image and a Label as cells on a xaml page, utilizing MVVM. I want to use the EventToCommandBehavior (https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/behaviors/reusable/event-to-command-behavior/) to bind the ItemTapped event to a command. As commandparameter I want to pass a property of an object inside the SfListView Source ObservableCollection. 

Heres my xaml: 

    <ContentPage.BindingContext>

        <vm:SiteOverviewViewModel x:Name="viewModel" />

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <ResourceDictionary>

            <conv:ByteToImageSourceConverter x:Key="ByteConverter" />

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentView ControlTemplate="{StaticResource MainPageTemplate}">

        <ContentView.Content>

            <syncfusion:SfListView ItemSize="300" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"

                                       ItemsSource="{Binding Sites}" Orientation="Vertical">

                <syncfusion:SfListView.Behaviors>

                    <behaviors:EventToCommandBehavior EventName="ItemTapped" Command="{Binding Path=BindingContext.SiteClickCommand}" CommandParameter="{Binding Name}" />

                </syncfusion:SfListView.Behaviors>

                <syncfusion:SfListView.ItemTemplate>

                    <DataTemplate>

                        <Grid Padding="10">

                            <Grid.RowDefinitions>

                                <RowDefinition Height="0.75*" />

                                <RowDefinition Height="0.25*" />

                            </Grid.RowDefinitions>

                            <Image Source="{Binding ImageData, Converter={StaticResource ByteConverter}}"

                                       HeightRequest="250"

                                       HorizontalOptions="Center" />

                            <Button Text="{Binding FriendlyName}"

                                    HorizontalOptions="Center"

                                    VerticalOptions="Center"

                                    Grid.Row="1"

                                    Command="{Binding Path=BindingContext.SiteClickCommand,

                                    Source={x:Reference View}}" CommandParameter="{Binding Name}" FontSize="Large" />

                        </Grid>

                    </DataTemplate>

                </syncfusion:SfListView.ItemTemplate>

            </syncfusion:SfListView>        

        </ContentView.Content>

    </ContentView>

So basically I want the ItemTapped event to behave exactly as the button does, so that I can exchange the button with a label, having both the image and the label be clickable as a result. 

However my button works and the ItemTapped-Command does not work. Notice the ControlTemplate that makes the xaml a bit harder. How can I solve this issue while maintaining MVVM?

[Muthu Kumaran Gnanavinayagam]

Hi Christoph, 

 

You can achieve your requirement “Events into Commands using Behaviors in SfListView” by creating a Command for ItemTapped event of SfListView in ViewModel. You can associate the Commands to Events of SfListView using Behaviors. We have published a KB documentation to meet your requirement. Please refer the attached KB link for more information. 

 

KB Link: https://www.syncfusion.com/kb/7523/how-to-turn-events-into-commands-with-behaviors-in-sflistview 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu Kumaran.