ICommand will not trigger

Question

My ICommand will not trigger unless I move the DataContext field into the the DataTemplate (contlisttemplate) for the Button. I have images set in a style resource, those disappear as soon as I move the DataContext field into the DataTemplate. Both images and ICommand should be using the same DataContext so I am unsure of why it will not work.

Here is a snippet of my code below.

DataContext="{Binding LongListViewModel, Source={StaticResource viewModelLocator}}"

---

<i:Interaction.Behaviors>
    <GamePad:XboxBehavior StartFocusControlName="continuousList1" IsTopLevelViewForFocus="True"/>
</i:Interaction.Behaviors>

<UserControl.Resources>
    <DataTemplate x:Key="contlisttemplate" >
        <Button  
            Command="{Binding Gotodetailpage}"
            Style="{StaticResource custherotile}">
        </Button> 
    </DataTemplate>
</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <xbox:ContinuousList 
        HorizontalAlignment="Left" 
        Name="continuousList1" 
        VerticalAlignment="Top"                      
        ItemTemplate="{StaticResource contlisttemplate}"
        ItemsSource="{Binding LongListItems}" Height="316" Width="1280"
        Grid.Row="1"
        >

        <i:Interaction.Behaviors>
            <GamePad:XboxBehavior IsContinuousListVuiEnabled="True" HasFocusRetention="True"/>
        </i:Interaction.Behaviors>

    </xbox:ContinuousList>

---

public class LongListViewModel : ViewModelBase<LongListViewModel>
{
    private readonly IDialogService dialogService;
    public Navigateto compass = new Navigateto();

    public LongListViewModel()
    {
        LongListItems = new ObservableCollection<object>();
        dictionaryListwithkey = new Dictionary<string, object>();
        Gotodetailpage = new RelayCommand(PerformGotoDetailPage);
    }

    public LongListViewModel(IDialogService dialogService)
        : this()
    {
        this.dialogService = dialogService;
    }


    public Program getherovideo
    {
        get { return (Program)LongListItems[0]; }
        set
        {
            //SetProperty(ref currentVideo, value,x => x.CurrentVideo);
        }
    }

    public ObservableCollection<object> LongListItems
    {
        get;
        set;
    }


    public Dictionary<string, object> dictionaryListwithkey
    {
        get;
        set;
    }

    public ICommand Gotodetailpage { get; private set; }

    private void PerformGotoDetailPage()
    {
       // Console.WriteLine("List item clicked");
        compass.goToDetailsPageWithPath("89");
    }
}

Answer 1

In case anyone was wondering what the answer was . As per Aaron Hill ATG :

This looks like an issue of scope. The outer DataContext is your LongListViewModel class, which contains the desired ICommand, but the ItemsSource for the container is set to the LongListItems collection exposed by the view-model. This means the effective DataContext for the DataTemplate is an individual member of the collection, not the overall view-model.

Overriding the DataContext of the DataTemplate would let you point back to the view-model and access the ICommand, however it also means you lose any data present within the individual elements of the LongListItems collection. That is probably why the images no longer work in this case.

Since each item in the collection has its own button, it probably makes sense for the ICommand property to be exposed on the individual item rather than the view-model.