We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

EventToCommandBehavior with SfListView ItemTapped and CommandParameter

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?


1 Reply

MK Muthu Kumaran Gnanavinayagam Syncfusion Team August 10, 2017 03:15 PM UTC

Hi Christoph, 
 
You can achieve your requirementEvents 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. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu Kumaran. 


Loader.
Live Chat Icon For mobile
Up arrow icon