title: Xamarin Forms Binding Command from View Model to Button in List View Data Template
body: <p>I am building social post sharing application using Xamarin.Forms 2.4 and it talks to my API.</p>
  
  <p>I have PostsPage which uses PostDataViewModel to load ObservableCollection to ListView defined in PostsPage. Data template of list views points to view file. However, in Post View Template I can bind to individual properties of My Post Model, but binding to command, which exists on ViewModel doesn't work. I tried x:Reference with no luck.</p>
  
  <p>My Model:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  
  namespace SOD_APP_V2.Model
  {
  public class PostDataModel
  {
      public string ID { get; set; }
      public string Title { get; set; }
      public string Message { get; set; }
      public string Image { get; set; }
      public string SocialMedia { get; set; }
      public string AvailableTime { get; set; }
      public string Audiences { get; set; }
      public string Topics { get; set; }
      public List&lt;PostVersion&gt; Versions { get; set; }
  
      public PostDataModel PostDetails
      {
          get
          {
              return this;
          }
      }
  }
  public class PostVersion
  {
      public string SocialMediaID { get; set; }
      public string IconPath { get; set; }
      public int CharacterCount { get; set; }
      public string Message { get; set; }
  }
  }
  </code></pre>
  
  <p>My View Model:</p>
  
  <pre><code>namespace SOD_APP_V2.ViewModel
  {
  public class PostDataViewModel : INotifyPropertyChanged
  {
      public event PropertyChangedEventHandler PropertyChanged;
  
      //Bindable properties
      public ObservableCollection&lt;PostDataModel&gt; PostDataCollection { get; set; }
      public ICommand LoadMorePostsCommand { get; private set; }
      public ICommand RejectPostCommand { get; private set; }
  
      public static JObject SocialmediaSites { get; set; }
      public object SelectedItem { get; set; }
  
      bool isLoadMoreEnabled;
      public bool IsLoadMoreEnabled
      {
          get
          {
              return isLoadMoreEnabled;
          }
          set
          {
              if (isLoadMoreEnabled != value)
              {
                  isLoadMoreEnabled = value;
                  OnPropertyChanged((nameof(IsLoadMoreEnabled)));
              }
          }
      }
  
      string pageTitle;
      public string PageTitle
      {
          get
          {
              return pageTitle;
          }
          set
          {
              if (pageTitle != value)
              {
                  pageTitle = value;
                  OnPropertyChanged(nameof(PageTitle));
              }
          }
      }
  
      int currentPage = 1;
      public int CurrentPage
      {
          get
          {
              return currentPage; 
          }
          set
          {
              if(currentPage != value)
              {
                  currentPage = value;
                  OnPropertyChanged(nameof(CurrentPage));
              }
          }
      }
  
      public PostDataViewModel()
      {
          PostDataCollection = new ObservableCollection&lt;PostDataModel&gt;();
          SocialmediaSites = default(JObject);
  
          IsLoadMoreEnabled = true;
          LoadMorePostsCommand =
              new Command(async () =&gt; await GetPosts(), () =&gt; IsLoadMoreEnabled);
  
          RejectPostCommand = new Command&lt;PostDataModel&gt;((post) =&gt;
          {
              System.Diagnostics.Debug.WriteLine("Reject command executed");
              System.Diagnostics.Debug.WriteLine("Post ID: " + post.ID);
          });
  
          string deployment = ConfigController.GetDeploymentName(ApiController.DeploymentDomain);
  
          MessagingCenter.Subscribe&lt;PostsPage, JArray&gt;(this, "translations", (sender, arg) =&gt; {
              PageTitle = (arg[0].ToString() != "") ? arg[0].ToString() : "Posts from " + deployment;
          });
          if (deployment != null)
          {
              //TODO: lang packs
              PageTitle = "Posts from " + deployment;
          }
      }
  
      public async Task&lt;bool&gt; GetPosts()
      {
          ...
      }
  
      protected virtual void OnPropertyChanged(String propertyName)
      {
          if (PropertyChanged != null)
          {
              PropertyChanged(this, new PropertyChangedEventArgs(nameof(propertyName)));
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>My Post Page XAML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:local="clr-namespace:SOD_APP_V2"
  xmlns:view="clr-namespace:SOD_APP_V2.View;assembly=SOD_APP_V2"
  xmlns:viewModel="clr-namespace:SOD_APP_V2.ViewModel;assembly=SOD_APP_V2"
  xmlns:controls="clr-namespace:SOD_APP_V2.Controls;assembly=SOD_APP_V2"
  x:Class="SOD_APP_V2.PostsPage" x:Name="PostsPage"
  &gt;
  &lt;ContentPage.BindingContext&gt;
      &lt;viewModel:PostDataViewModel/&gt;
  &lt;/ContentPage.BindingContext&gt;
  &lt;ContentPage.Content&gt;
      &lt;StackLayout&gt;
          &lt;StackLayout Orientation="Vertical" Padding="10, 5, 10, 5"&gt;
              &lt;Label x:Name="titleLabel" Text="{Binding PageTitle}"
                       VerticalOptions="Start"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       BackgroundColor="Transparent"
                       HorizontalOptions="CenterAndExpand" /&gt;
              &lt;controls:InfiniteListView x:Name="listView"
                          SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                          IsLoadMoreItemsPossible="{Binding IsLoadMoreEnabled}"
                          LoadMoreInfiniteScrollCommand="{Binding LoadMorePostsCommand}"
                          IsEnabled="true"
                          IsBusy="{Binding IsBusy}"
                          HasUnevenRows="true"
                          ItemsSource="{Binding PostDataCollection}"
                          SeparatorVisibility="None"&gt;
                  &lt;controls:InfiniteListView.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;ViewCell&gt;
                              &lt;view:PostViewTemplate/&gt;
                          &lt;/ViewCell&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/controls:InfiniteListView.ItemTemplate&gt;
              &lt;/controls:InfiniteListView&gt;
          &lt;/StackLayout&gt;
          &lt;StackLayout HorizontalOptions="FillAndExpand"
              VerticalOptions="End"&gt;
              &lt;Label x:Name="infoLabel" Text="test"
                      Opacity="0"
                      TextColor="White"
                      BackgroundColor="#337ab7"
                      HorizontalTextAlignment="Center"&gt;
                  &lt;/Label&gt;
          &lt;/StackLayout&gt;
      &lt;/StackLayout&gt;
  &lt;/ContentPage.Content&gt;
  </code></pre>
  
  <p></p>
  
  <p>And Finally my Post View template describing each post:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:model="clr-namespace:SOD_APP_V2.Model;assembly=SOD_APP_V2"
  xmlns:controls="clr-namespace:SOD_APP_V2.Controls;assembly=SOD_APP_V2"
  x:Class="SOD_APP_V2.View.PostViewTemplate"&gt;
  &lt;ContentView.Resources&gt;
      &lt;ResourceDictionary&gt;
          &lt;Style TargetType="controls:AwesomeButton"&gt;
              &lt;Setter Property="BorderWidth" Value="1"/&gt;
              &lt;Setter Property="TextColor" Value="White"/&gt;
              &lt;Setter Property="BorderRadius" Value="7"/&gt;
              &lt;Setter Property="FontFamily" Value="FontAwesome"/&gt;
          &lt;/Style&gt;
      &lt;/ResourceDictionary&gt;
  &lt;/ContentView.Resources&gt;
  &lt;ContentView.Content&gt;
      &lt;Frame HasShadow="false" CornerRadius="5" IsClippedToBounds="true" OutlineColor="#09478e" Padding="0" Margin="10"&gt;
      &lt;Grid 
          Padding="0"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="1" /&gt;
              &lt;ColumnDefinition Width="1" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="1" /&gt;
              &lt;ColumnDefinition Width="1" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="50"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="50"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="1"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="100"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="1"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="40"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="40"&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition Height="1"&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#B0C4DB" Padding="5"&gt;
              &lt;Label x:Name="postTitle" Text="{Binding Title}" TextColor="#09478e" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/&gt;
              &lt;StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="End"&gt;
              &lt;controls:AwesomeButton Clicked="OnAvailableTimePopupClicked" CommandParameter="{Binding AvailableTime}" Text="&amp;#xf017;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"&gt;&lt;/controls:AwesomeButton&gt;
              &lt;controls:AwesomeButton Clicked="OnAudiencesPopupClicked" CommandParameter="{Binding Audiences}" Text="&amp;#xf0c0;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"&gt;&lt;/controls:AwesomeButton&gt;
              &lt;controls:AwesomeButton Clicked="OnTopicsPopupClicked" CommandParameter="{Binding Topics}" Text="&amp;#xf02c;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"&gt;&lt;/controls:AwesomeButton&gt;
              &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
          &lt;controls:RepeaterView  Grid.Row="1" Grid.Column="2"
                                ItemsSource="{Binding Versions}"
                                NoOfColumns="3"
                                &gt;
              &lt;controls:RepeaterView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;StackLayout Spacing="0" &gt;
                          &lt;Label Text="{Binding Message}" IsVisible="false"/&gt;
                          &lt;Image Source="{Binding IconPath}"&gt;
                              &lt;Image.GestureRecognizers&gt;
                                  &lt;TapGestureRecognizer
                                          Tapped="OnMessageVersionClicked"
                                          NumberOfTapsRequired="1" /&gt;
                              &lt;/Image.GestureRecognizers&gt;
                          &lt;/Image&gt;
                      &lt;/StackLayout&gt;
                  &lt;/DataTemplate&gt;
              &lt;/controls:RepeaterView.ItemTemplate&gt;
          &lt;/controls:RepeaterView&gt;
  
          &lt;Image BackgroundColor="White" Grid.Row="3" Grid.Column="2" Source="{Binding Image}" VerticalOptions="FillAndExpand"/&gt;
          &lt;Label x:Name="postMessage" BackgroundColor="White" Grid.Row="3" Grid.Column="3" Text="{Binding Message}" TextColor="#09478e" VerticalOptions="FillAndExpand" /&gt;
  
          &lt;controls:AwesomeButton Clicked="OnSharePostClicked" CommandParameter="{Binding ID}" BackgroundColor="#5cb85c" Grid.Row="5" Grid.Column="2" Text="&amp;#xf1e0; Share" BorderColor="#5cb85c"&gt;&lt;/controls:AwesomeButton&gt;
          &lt;controls:AwesomeButton Clicked="OnSchedulePostClicked" CommandParameter="{Binding ID}" BackgroundColor="#5bc0de" Grid.Row="5" Grid.Column="3" Text="&amp;#xf073; Schedule" BorderColor="#5bc0de"&gt;&lt;/controls:AwesomeButton&gt;
  
          &lt;controls:AwesomeButton Clicked="OnEditPostClicked" CommandParameter="{Binding PostDetails}" TextColor="#09478e" BackgroundColor="White" Grid.Row="6" Grid.Column="2" Text="&amp;#xf040; Edit" BorderColor="#09478e"&gt;&lt;/controls:AwesomeButton&gt;
          &lt;controls:AwesomeButton  Command="{Binding Path=DataContext.RejectPostCommand}" CommandParameter="{Binding}" BackgroundColor="#d9534f" Grid.Row="6" Grid.Column="3" Text="&amp;#xf00d; Reject" BorderColor="#d9534f"&gt;&lt;/controls:AwesomeButton&gt;
          &lt;!-- Inner Border --&gt;
          &lt;BoxView Grid.Row="2" Grid.RowSpan="3" Grid.Column="1" BackgroundColor="#09478e"&gt;&lt;/BoxView&gt;
          &lt;BoxView Grid.Row="2" Grid.RowSpan="3" Grid.Column="4" BackgroundColor="#09478e"&gt;&lt;/BoxView&gt;
          &lt;BoxView Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="2" BackgroundColor="#09478e"&gt;&lt;/BoxView&gt;
          &lt;BoxView Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="4" BackgroundColor="#09478e"&gt;&lt;/BoxView&gt;
      &lt;/Grid&gt;
      &lt;/Frame&gt;
  &lt;/ContentView.Content&gt;
  </code></pre>
  
  <p></p>
  
  <p>As you see in Post View Template, I am trying to bind RejectPostCommand in ViewModel, but it doesn't bind. I tried x:Reference to PostsPage, but it threw me exception, as it couldn't find that Page from my View Template. I need to able to access command somehow. Would anybody have any ideas?</p>