MVVM AppBarButton in Listview DataTemplate

Question

So I am using MVVM light to develop a UWP application and I would like to place an AppBarButton in each item in a ListView. My code for the item template is below:

<ListView.ItemTemplate>
<DataTemplate>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="40"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding title}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <TextBlock Text="{Binding uniqueID}" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <StackPanel Grid.Column="1" Grid.RowSpan="2" Width="40" Padding="0,4">
            <AppBarButton Icon="Delete" IsCompact="True" Background="Red" Width="39" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <ie:Interaction.Behaviors>
                    <ic:EventTriggerBehavior EventName="Click">
                        <ic:InvokeCommandAction Command="{Binding DataContext.DeleteItem, ElementName=page}" CommandParameter="{Binding}"/>
                    </ic:EventTriggerBehavior>
                </ie:Interaction.Behaviors>
            </AppBarButton>
        </StackPanel>
    </Grid>
</DataTemplate>

I did this same Event Trigger binding to another AppBarButton earlier in the page that was not inside a ListView and it worked perfectly fine. I have set up the referenced command the same way I set up the earlier one. The DataContext for the page is set correctly and I have verified that elsewhere by binding to it on other objects. For using this format to do this, I am referencing: Mvvm Light UWP Index Of Listitem When Button In ListItem Is Pressed

My problem is that when I have the below part uncommented, I get the below error from visual studio.

<ie:Interaction.Behaviors>
    <ic:EventTriggerBehavior EventName="Click">
        <ic:InvokeCommandAction Command="{Binding DataContext.DeleteItem, ElementName=page}" CommandParameter="{Binding}"/>
    </ic:EventTriggerBehavior>
</ie:Interaction.Behaviors>

Collection property '__implicit_items' is null.

Does anybody have any ideas what I am doing wrong?

Thanks so much!!

BTW AppBarButton derives from Button and for sure has a Command property where you can bind the command direct without interaction — Sir Rufo, Oct 01 '17 at 07:51
That actually worked! Thank you so much. I have no idea why I thought I needed that to get a command parameter out... If you post that as an answer i'll mark it as solution. — Kenneth Witham, Oct 01 '17 at 16:27

score 0 · Accepted Answer · answered Nov 08 '17 at 19:33

I ended up using the Command parameter of AppBarButton to bind to the command I had in my ViewModel. Removing the Interaction.Behaviors and using this build in XAML parameter worked.

<AppBarButton Icon="Delete" Command="{Binding DataContext.DeleteCourse, ElementName=page}" 
    CommandParameter="{Binding}" />

MVVM AppBarButton in Listview DataTemplate

1 Answers1