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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind command from ViewModel to external ItemTemplate of Xamarin.Forms ListView

Platform: Xamarin.Forms |
Control: SfListView

You can bind the ViewModel command to external ItemTemplate of Xamarin.Forms SfListView by using RelativeBinding in command binding.

XAML: ListView definition

<syncfusion:SfListView x:Name="listView"
                       ItemSpacing="1"
                       ItemsSource="{Binding contactsinfo}">
    <syncfusion:SfListView.ItemTemplate >
        <DataTemplate>
            <local:TemplateViewCell/>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

XAML: ViewCell definition

Binding the ViewModel command for button in ViewCell using AncestorType in RelativeBinding.

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListViewXamarin.TemplateViewCell">
    <ViewCell.View>
        <Grid x:Name="grid" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="1" />
            </Grid.RowDefinitions>
            <Grid RowSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
 
                <Image Source="{Binding ContactImage}"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           HeightRequest="50" WidthRequest="50"/>
 
                <Grid Grid.Column="1"
                          RowSpacing="1"
                          Padding="10,0,0,0"
                          VerticalOptions="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>
 
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
 
                        <Label LineBreakMode="NoWrap"
                             TextColor="#474747"
                             Text="{Binding ContactName}">
 
                        </Label>
                        <Label LineBreakMode="NoWrap"
                           TextColor="#474747"
                           Grid.Row="1"
                           Text="{Binding ContactNumber}">
 
                        </Label>
                    </Grid>
 
                   <Button Grid.Column="1"
                           Text="Call"
                           Command="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}}, Path=BindingContext.TapCommand}"/>
                </Grid>
                <Grid Grid.Row="0"
                          Grid.Column="2"
                          RowSpacing="0"
                          HorizontalOptions="End" VerticalOptions="Start">
 
                    <Label LineBreakMode="NoWrap"
                             TextColor="#474747"
                             Text="{Binding ContactType}">
                    </Label>
                </Grid>
            </Grid>
        </Grid>
    </ViewCell.View>
</ViewCell>

C#: ViewModel Command definition

public ObservableCollection<Contacts> contactsinfo { get; set; }
 
 
public ContactsViewModel()
{
      contactsinfo = new ObservableCollection<Contacts>();
      TapCommand = new Command(OnTapped);
      GenerateInfo();
}
 
private void OnTapped(object obj)
{
     App.Current.MainPage.DisplayAlert("Message","Button tapped","Ok");
}

View sample in GitHub

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
TomG
Oct 25, 2020

Could I ask to expand on this? I haven't seen much documentation about Commands and relative bindings...

Using DataTemplates in a CollectionView... If I can call a ViewModel's Command from a button like this:

<Button Text="Test"
    Command="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}},
                      Path=BindingContext.TestCommand}"/>

Why can't I call that command from an Entry's TextChanged Event like this?

<Entry x:Name="PortionEntry"
    Text ="{Binding QtyTest, Mode=TwoWay}">
    <Entry.Behaviors>
        <behavors:EventToCommandBehavior
            EventName="TextChanged"
            Command="{Binding Source={RelativeSource AncestorType={x:Type ContentPage}},
                              Path=BindingContext.TestCommand}"/>
    </Entry.Behaviors>

My code for EventToCommandBehavior works fine when not used in a DataTemplate. Thank you for this discussion forum!

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile