Articles in this section
Category / Section

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

1 min read

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied