title: Binding button click in ListView template MvvMCross
body: <p>I have a listview with a template containing a button. When the button get's clicked i want an event to fire and return me a value of the listview row, so i can use it to add it to a database. My problem is, i don't know how to bind my buttonevent to the itemtemplate. I've tried a few approaches but with no success so far. </p>
  
  <p><strong>My Listview:</strong>
       </p>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:local="http://schemas.android.com/apk/res-auto"
  
      android:orientation="vertical"
  
      android:layout_width="fill_parent"
  
      android:layout_height="fill_parent"&gt;
  
      &lt;Mvx.MvxListView
  
          android:layout_width="fill_parent"
  
          android:layout_height="wrap_content"
  
          android:divider="#aeaeae"
  
          android:dividerHeight="1px"
  
          local:MvxBind="ItemsSource MenuCollection; ItemClick OrderBtnClick"        
  
          local:MvxItemTemplate="@layout/listitem_menuitem" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p><strong>My ItemTemplate:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:local="http://schemas.android.com/apk/res-auto"
  
      android:orientation="horizontal"
  
      android:layout_width="fill_parent"
  
      android:layout_height="fill_parent"&gt;
  
      &lt;Mvx.MvxImageView
  
          android:layout_width="100dp"
  
          android:layout_height="100dp"
  
          android:layout_margin="10dp"
  
          local:MvxBind="ImageUrl ImageUrl" /&gt;
  
      &lt;LinearLayout
  
          android:orientation="vertical"
  
          android:layout_width="fill_parent"
  
          android:layout_height="fill_parent"
  
          android:layout_weight="1"&gt;
  
          &lt;TextView
  
              android:layout_width="fill_parent"
  
              android:layout_height="wrap_content"
  
              android:layout_marginLeft="30dp"
  
              android:textSize="40dp"
  
              local:MvxBind="Text Name" /&gt;
  
          &lt;TextView
  
              android:layout_width="fill_parent"
  
              android:layout_height="wrap_content"
  
              android:layout_marginLeft="50dp"
  
              android:textSize="20dp"
  
              local:MvxBind="Text ShortDescription" /&gt;
  
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
  
          android:orientation="vertical"
  
          android:layout_width="fill_parent"
  
          android:layout_height="fill_parent"
  
          android:layout_weight="1"
  
          android:minWidth="25px"
  
          android:minHeight="25px"&gt;
  
          &lt;Button
  
              android:layout_width="wrap_content"
  
              android:layout_height="70dip"
  
              android:layout_alignParentRight="true"
  
              android:layout_marginTop="20dip"
  
              android:layout_marginRight="20dip"
  
              android:layout_gravity="right|center_vertical"
  
              android:text="Bestel"            
  
              android:id="@+id/button1" /&gt;
  
      &lt;/LinearLayout&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p><strong>My ViewModel:</strong> </p>
  
  <pre><code>public class ListPresentationViewModel: MvxViewModel    
      {    
          private readonly ISQLService _sqlSvc;   
  
          public ListPresentationViewModel (ISQLService sqlService)    
          {    
              _sqlSvc = sqlService;    
              MenuCollection = _sqlSvc.MenuItemGetAll ();    
          }   
  
  
          private List&lt;MenuItem&gt; _menuCollection = new List&lt;MenuItem&gt; ();    
  
          public List&lt;MenuItem&gt; MenuCollection {    
              get{ return _menuCollection;}    
              set {    
                  _menuCollection = value;
                  RaisePropertyChanged (() =&gt; MenuCollection);    
              }    
          }    
  
  
          private IMvxCommand _orderBtnClick;    
          public IMvxCommand OrderBtnClick{    
              get{    
                  _orderBtnClick = _orderBtnClick ?? new MvxCommand(btnClick);
  
                  return _orderBtnClick;}    
  
          }  
  
  
          private void btnClick()    
          {    
              //Do Something    
          }
  
      }
  </code></pre>
  
  <p>I placed the local:MvxBind="Click OrderBtnClick" on the button in the template and on the listview. The ItemClick seems to work when i remove the button from the itemtemplate, but that's not what i'm looking for. I want the button to be triggering the event. Can anyone point me in the right direction?</p>
  
  <hr>
  
  <p><strong><em>UPDATE</em>:</strong></p>
  
  <p>I've tried the second suggestion stuart lodge posted <a href="https://stackoverflow.com/questions/12682082/mvvmcross-changing-viewmodel-within-a-mvxbindablelistview">here</a>. Here is my <strong>wrapper class</strong>:</p>
  
  <pre><code>public class MenuItemWrap
      {
          MenuItem _mnuItem;
          ListPresentationViewModel _parent;
  
  
          public MenuItemWrap ()
          {           
  
          }
  
          public MenuItemWrap (MenuItem item, ListPresentationViewModel parent)
          {
              _mnuItem = item;
              _parent = parent;
          }
  
          public IMvxCommand Click {
              get {
                  return new MvxRelayCommand (() =&gt; _parent.btnClick(WrapConverter.ConvertToWrapMenuItem(_mnuItem, _parent)));
              }
          }
          public MenuItem Item{ get { return _mnuItem; } }
  
      }
  </code></pre>
  
  <p><strong>My ViewModel:</strong></p>
  
  <pre><code>public class ListPresentationViewModel: MvxViewModel
      {
          private readonly ISQLService _sqlSvc;
  
          public ListPresentationViewModel (ISQLService sqlService)
          {
              _sqlSvc = sqlService;
              MenuCollection = WrapConverter.ConvertToWrapperClass(_sqlSvc.MenuItemGetAll (), this);
          }
  
          private List&lt;MenuItemWrap&gt; _menuCollection = new List&lt;MenuItemWrap&gt; ();
          public List&lt;MenuItemWrap&gt; MenuCollection {
              get{ return _menuCollection;}
              set {
                  _menuCollection = value;
                  RaisePropertyChanged (() =&gt; MenuCollection);
              }
          }
  
          private IMvxCommand _orderBtnClick;
          public IMvxCommand OrderBtnClick{
              get{
                  _orderBtnClick = _orderBtnClick ?? new MvxCommand&lt;MenuItemWrap&gt; (btnClick);
                  return _orderBtnClick;
              }
          }
  
          public void btnClick(MenuItemWrap item)
          {
              MenuCollection.Clear ();
          }
      }
  </code></pre>
  
  <p>And here is my <strong>template</strong>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  
      xmlns:local="http://schemas.android.com/apk/res-auto"
  
      android:orientation="horizontal"
  
      android:layout_width="fill_parent"
  
      android:layout_height="fill_parent"&gt;
  
      &lt;Mvx.MvxImageView
  
          android:layout_width="100dp"
  
          android:layout_height="100dp"
  
          android:layout_margin="10dp"
  
          local:MvxBind="ImageUrl Item.ImageUrl" /&gt;
  
      &lt;LinearLayout
  
          android:orientation="vertical"
  
          android:layout_width="fill_parent"
  
          android:layout_height="fill_parent"
  
          android:layout_weight="1"&gt;
  
          &lt;TextView
  
              android:layout_width="fill_parent"
  
              android:layout_height="wrap_content"
  
              android:layout_marginLeft="30dp"
  
              android:textSize="40dp"
  
              local:MvxBind="Text Item.Name" /&gt;
  
          &lt;TextView
  
              android:layout_width="fill_parent"
  
              android:layout_height="wrap_content"
  
              android:layout_marginLeft="50dp"
  
              android:textSize="20dp"
  
              local:MvxBind="Text Item.ShortDescription" /&gt;
  
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
  
          android:orientation="vertical"
  
          android:layout_width="fill_parent"
  
          android:layout_height="fill_parent"
  
          android:layout_weight="1"
  
          android:minWidth="25px"
  
          android:minHeight="25px"&gt;
  
          &lt;Button
  
              android:layout_width="wrap_content"
  
              android:layout_height="70dip"
  
              android:layout_alignParentRight="true"
  
              android:layout_marginTop="20dip"
  
              android:layout_marginRight="20dip"
  
              android:layout_gravity="right|center_vertical"
  
              android:text="Bestel"
  
              local:MvxBind="Click btnClick.OrderBtnClick"
  
              android:id="@+id/button1" /&gt;
  
      &lt;/LinearLayout&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>My listview works perfectly. All properties get bind correctly, and i can see the name, shortdescription and image. What does not work is the Button Click. In my application output i get an error saying: <em>MvxBind:Warning: 76.06 Unable to bind: source property source not found Cirrious.MvvmCross.Binding.Parse.PropertyPath.PropertyTokens.MvxPropertyNamePropertyToken on MenuItemWrap</em> </p>
  
  <p>I've tried a few approaches to fix it, but with no success. I will mention i did not find the RelayCommand class in the MvvMCross assemblies so i copy pasted the code from <a href="https://github.com/slodge/MonoCrossExtensions/blob/master/Cirrious/Cirrious.MvvmCross/Commands/MvxRelayCommand.cs" rel="nofollow noreferrer">here</a> into my project. </p>