title: How do I call an MvxCommand/ICommand when selecting an item from a Grid?
body: <p>I am enjoying the N+1DaysOfMVVMCross but I am stuck on Day 5 (Sort of a day 2 and day 5 combo)...</p>
  
  <p>I used day 2 to develop a grid view UI and wanted to use the day 5 info to add a Command that will open a secondary view when an item is selected from the grid.  The Command code in the ViewModel is never executed (though it does execute from a button).  </p>
  
  <p>I think the issue is more related to WPF/XAML but thought I would reference MVVMCross as this is where I hit the road block.</p>
  
  <p>Thanks for any help/tips/direction</p>
  
  <p>How about some source code...</p>
  
  <p>From the view model, sorry for the list initialization I'm slowly working through this.</p>
  
  <pre><code>using Cirrious.MvvmCross.ViewModels;
  using System.Collections.Generic;
  using TeleBacteriology.Core.Services;
  
  namespace TeleBacteriology.Core.ViewModels
  {
      public class WorklistViewModel : MvxViewModel
      {
          public WorklistViewModel(IWorklistItemService service)
          {
              var newList = new List&lt;WorklistItem&gt;();
  
              WorklistItem newWorklistItem = service.CreateNewWorklistItem("201401250001", "http://placekitten.com/301/301");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250002", "http://placekitten.com/302/302");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250003", "http://placekitten.com/303/303");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250004", "http://placekitten.com/304/304");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250005", "http://placekitten.com/305/305");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250006", "http://placekitten.com/306/306");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250007", "http://placekitten.com/307/307");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250008", "http://placekitten.com/308/308");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250009", "http://placekitten.com/309/309");
              newList.Add(newWorklistItem);
  
              newWorklistItem = service.CreateNewWorklistItem("201401250010", "http://placekitten.com/310/310");
              newList.Add(newWorklistItem);
  
              Worklist = newList;
          }
  
          private List&lt;WorklistItem&gt; _worklist;
          public List&lt;WorklistItem&gt; Worklist
          {
              get { return _worklist; }
              set { _worklist = value; RaisePropertyChanged(() =&gt; Worklist); }
          }
  
          private MvxCommand _detailsCommand;
          public System.Windows.Input.ICommand DetailsCommand
          {
              get
              {
                  _detailsCommand = _detailsCommand ?? new MvxCommand(DoDetailsCommand);
                  return _detailsCommand;
              }
          }
  
          private void DoDetailsCommand()
          {
              ShowViewModel&lt;PlateDetailsViewModel&gt;();
          }
      }
  }
  </code></pre>
  
  <p>The XAML for the view:</p>
  
  <pre><code>&lt;common:LayoutAwarePage
      x:Name="pageRoot"
      x:Class="TeleBacteriology.Store.Views.WorklistView"
      DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TeleBacteriology.Store.Views"
      xmlns:common="using:TeleBacteriology.Store.Common"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"&gt;
  
      &lt;Page.Resources&gt;
  
          &lt;!-- Collection of items displayed by this page --&gt;
          &lt;CollectionViewSource
              x:Name="itemsViewSource"
              Source="{Binding Worklist}"/&gt;
  
          &lt;DataTemplate x:Key="Worklist250x250ItemTemplate"&gt;
              &lt;Grid HorizontalAlignment="Left" Width="250" Height="250"&gt;
                  &lt;Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"&gt;
                      &lt;Image Source="{Binding ImageUrl}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/&gt;
                  &lt;/Border&gt;
                  &lt;StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"&gt;
                      &lt;TextBlock Text="{Binding AccessionNum}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/&gt;
                      &lt;TextBlock Text="{Binding ImageUrl}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
          &lt;/DataTemplate&gt;
  
          &lt;DataTemplate x:Key="Worklist80ItemTemplate"&gt;
              &lt;Grid Margin="6"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="Auto"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60"&gt;
                      &lt;Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/&gt;
                  &lt;/Border&gt;
                  &lt;StackPanel Grid.Column="1" Margin="10,0,0,0"&gt;
                      &lt;TextBlock Text="{Binding AccessionNum}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/&gt;
                      &lt;TextBlock Text="{Binding ImageUrl}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/Grid&gt;
          &lt;/DataTemplate&gt;
  
          &lt;!-- TODO: Delete this line if the key AppName is declared in App.xaml --&gt;
          &lt;x:String x:Key="AppName"&gt;My Application&lt;/x:String&gt;
      &lt;/Page.Resources&gt;
  
      &lt;!--
          This grid acts as a root panel for the page that defines two rows:
          * Row 0 contains the back button and page title
          * Row 1 contains the rest of the page layout
      --&gt;
      &lt;Grid Style="{StaticResource LayoutRootStyle}"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="140"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;!-- Horizontal scrolling grid used in most view states --&gt;
          &lt;GridView
              x:Name="itemGridView"
              AutomationProperties.AutomationId="ItemsGridView"
              AutomationProperties.Name="Items"
              TabIndex="1"
              Grid.RowSpan="2"
              Padding="116,136,116,46"
              ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
              ItemTemplate="{StaticResource Worklist250x250ItemTemplate}"
              SelectionMode="None"
              IsSwipeEnabled="false"
              SelectedItem="{Binding DetailsCommand}"/&gt;
  
          &lt;!-- Vertical scrolling list only used when snapped --&gt;
          &lt;ListView
              x:Name="itemListView"
              AutomationProperties.AutomationId="ItemsListView"
              AutomationProperties.Name="Items"
              TabIndex="1"
              Grid.Row="1"
              Visibility="Collapsed"
              Margin="0,-10,0,0"
              Padding="10,0,0,60"
              ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
              SelectedItem="{Binding DetailsCommand}"
              ItemTemplate="{StaticResource Worklist80ItemTemplate}"
              SelectionMode="None"
              IsSwipeEnabled="false"/&gt;
  
          &lt;!-- Back button and page title --&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/&gt;
              &lt;TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/&gt;
          &lt;/Grid&gt;
          &lt;Grid Grid.Row="2"&gt;
              &lt;Button Content="Go Details" Command="{Binding DetailsCommand}" /&gt;
  
          &lt;/Grid&gt;
  
          &lt;VisualStateManager.VisualStateGroups&gt;
  
              &lt;!-- Visual states reflect the application's view state --&gt;
              &lt;VisualStateGroup x:Name="ApplicationViewStates"&gt;
                  &lt;VisualState x:Name="FullScreenLandscape"/&gt;
                  &lt;VisualState x:Name="Filled"/&gt;
  
                  &lt;!-- The entire page respects the narrower 100-pixel margin convention for portrait --&gt;
                  &lt;VisualState x:Name="FullScreenPortrait"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
  
                  &lt;!--
                      The back button and title have different styles when snapped, and the list representation is substituted
                      for the grid displayed in all other view states
                  --&gt;
                  &lt;VisualState x:Name="Snapped"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
  
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
              &lt;/VisualStateGroup&gt;
          &lt;/VisualStateManager.VisualStateGroups&gt;
      &lt;/Grid&gt;
  &lt;/common:LayoutAwarePage&gt;
  </code></pre>
  
  <p>I can post for the second view but I don't think that's necessary.  Again, if I place a button in the view and set the Command binding to DetailsCommand, the second view pops up just fine.  Can't get it to work with item selection on the grid.</p>