ListView-Schaltfläche nicht binden Klicken Sie in einem UserControl auf einen Befehl in ViewModel (MVVM Light Windows 10)

Question

Ich habe eine ListView, wo die ItemTemplateDataTemplate in einem separaten Benutzersteuerelement platziert ist.

<local:ViewBase 
x:Class="FindTheCat.Views.ShopPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:FindTheCat.Views" 
xmlns:control="using:FindTheCat.UserControls" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
DataContext="{Binding Path=ShopPage, Source={StaticResource ViewModelLocator}}"> 

<Grid x:Name="gridRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualState x:Name="VisualStateMin800"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="800"/> 
       </VisualState.StateTriggers> 
.... 

    <RelativePanel HorizontalAlignment="Stretch"> 
     <TextBlock x:Name="textBlockTitle" Text="Shop" Style="{StaticResource HeaderTextBlockStyle}" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="24,48,24,28" FontSize="64"/> 
     <ListView x:Name="listView" HorizontalAlignment="Left" VerticalAlignment="Top" RelativePanel.Below="textBlockTitle" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,28,0,0" 
        ItemsSource="{Binding Products}" IsItemClickEnabled="False"> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <control:ShopItemTemplate /> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </RelativePanel> 
</Grid> 
</local:ViewBase> 

ShopItemTemplate ist eine Benutzerkontrolle.

<UserControl 
x:Class="FindTheCat.UserControls.ShopItemTemplate" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:FindTheCat.UserControls" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
mc:Ignorable="d" 
> 

<Grid x:Name="grid" Width="600" Margin="0,36" > 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Border > 
     <Image x:Name="image" Height="160" Width="160" Source="{Binding Uri}" VerticalAlignment="Top"/> 
    </Border> 
    <StackPanel x:Name="stackPanel" Grid.Column="1" Margin="16,0,0,0"> 
     <TextBlock x:Name="textBlock" Text="{Binding Title}" Style="{StaticResource BaseTextBlockStyle}" FontSize="24"/> 
     <TextBlock x:Name="textBlock1" Text="{Binding Description}" Style="{StaticResource BaseTextBlockStyle}" FontSize="16" TextWrapping="Wrap" Margin="0,12,0,0"/> 
     <Button x:Name="btnBuy" Content="{Binding Price, ConverterParameter=Buy, Converter={StaticResource PrependStringConverter}}" FontSize="24" RelativePanel.AlignLeftWith="txtTitle" RelativePanel.Below="txtDescription" Style="{StaticResource ButtonBuyStyle}" Background="#74b025" Width="256" Height="60" Margin="0,20,0,0"> 
      <Interactivity:Interaction.Behaviors> 
       <Core:EventTriggerBehavior EventName="Click"> 
        <Core:InvokeCommandAction Command="{Binding ElementName=gridRoot, Path=DataContext.BuyItemCommand}" CommandParameter="{Binding Id}"/> 
       </Core:EventTriggerBehavior> 
      </Interactivity:Interaction.Behaviors> 
     </Button> 
    </StackPanel> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="VisualStateGroup"> 
      <VisualState x:Name="VisualStateMin800"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="800"/> 
       </VisualState.StateTriggers> 

... 

</Grid> 
</UserControl> 

Die Bindung funktioniert gut visuell als jedes Element zeigt korrekt ist, aber die Click Falle btnBuy in ShopItemTemplate stellt nicht die BuyItemCommand im ShopPageViewModel

public ShopPageViewModel() 
    { 
     BuyItemCommand = new RelayCommand<string>(id => buyItem(id)); 

     if (!IsInDesignMode) 
     { 
      loadMockData(); 
     } 
    } 

    public RelayCommand<string> BuyItemCommand 
    { 
     get; 
     private set; 
    } 

    private void buyItem(string id) 
    { 
     Sound.Play(Sounds.Click); 
     InAppPurchase.BuyItem(id); 
    } 

Was mache ich falsch?

Answer 1

Ich habe es herausgefunden. Ich muss nur den korrekten Datenkontext unter Verwendung meiner ViewModelLocator als StaticResource angeben. Also in meinem Fall die Linien

<Interactivity:Interaction.Behaviors> 
    <Core:EventTriggerBehavior EventName="Click"> 
     <Core:InvokeCommandAction Command="{Binding ElementName=gridRoot, Path=DataContext.BuyItemCommand}" CommandParameter="{Binding Id}"/> 
    </Core:EventTriggerBehavior> 
</Interactivity:Interaction.Behaviors> 

werden

<Interactivity:Interaction.Behaviors> 
    <Core:EventTriggerBehavior EventName="Click"> 
     <Core:InvokeCommandAction 
         Command="{Binding Path=ShopPage.BuyItemCommand, Source={StaticResource ViewModelLocator}}" 
         CommandParameter="{Binding Id}"/> 
     </Core:EventTriggerBehavior> 
</Interactivity:Interaction.Behaviors> 

ShopPage ist meine Ansicht und sein Ansichtsmodell ist zugänglich mit ShopPage.BuyItemCommand