How can i bind a button in listviewitem to a Command in ViewModel in Winrt

Question

I have a NavigateToAccountsCommand RelayCommand property in the ViewModel. When I bind the same to a button on the page anywhere outside the ListView the command binding is working. However as soon as I move this to a ListView's DataTemplate its not working.

I have tried changing the binding from NavigateToAccountsCommand to DataContext.NavigateToAccountsCommand still not working.

Appreciate your help...

<Page
x:Class="FinancePRO.App.Views.AccountsView"
DataContext="{Binding AccountsViewModel, Source={StaticResource MainViewModelLocator}}"
mc:Ignorable="d">

<Grid>
      <!--**This one is working**-->
      <Button  Command="{Binding NavigateToAccountsCommand}" >

     <!--**This one is not working**-->
        <ListView ItemsSource="{Binding AllAccounts}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Stretch">
                      <TextBlock Text="{Binding AccountName}"/>
                      <Button  Command="{Binding NavigateToAccountsCommand}">
                                </Button>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

loopedcode · Accepted Answer · 2013-10-28T23:33:05.717

When you are inside the DataTemplate of the ListView, your data context is the current item of the ListView's ItemsSource. As there is nothing called "NavigateToAccountsCommand" property within your AllAcounts' each individual element, binding isn't working.

To fix that, you will need to reference something from the outside of DataTemplate; following should work. It changes the binding to reference the root Grid's DataContext which should have the property NavigateToAccountsCommand accessible. To reference the grid, you have to add Name attribute, and then use ElementName binding.

    <Grid Name="Root">
          <!--**This one is working**-->
          <Button  Command="{Binding NavigateToAccountsCommand}" >

         <!--**This one is not working**-->
            <ListView ItemsSource="{Binding AllAccounts}" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel HorizontalAlignment="Stretch">
                          <TextBlock Text="{Binding AccountName}"/>
                          <Button  Command"{Binding ElementName=Root, Path=DataContext.NavigateToAccountsCommand}">
                                    </Button>
                    </DataTemplate>
                </ListView.ItemTemplate>
        </ListView>
   </Grid>

Thanks loopedcode, for the prompt response. That solved my problem. — Drunkenelf, Oct 29 '13 at 08:45

score 4 · Answer 2 · answered Oct 29 '13 at 06:21

You can use

<Button x:Name="cmdTabItemCloseButton" 
                                Style="{StaticResource TabItemCloseButtonStyle}"
                                Grid.Column="1" Margin="15,0,0,0"
                                Command="{Binding RelativeSource=
                {RelativeSource FindAncestor, 
                AncestorType={x:Type ListView}}, 
                Path=DataContext.NavigateToAccountsCommand}"
                                CommandParameter="{Binding}"/>

Thanks for the prompt response Dhaval. This works in a normal WPF app, however doesnt work in a WInRT app. thanks anyways. — Drunkenelf, Oct 29 '13 at 08:46

score -1 · Answer 3 · answered Nov 01 '14 at 02:37

I had a similar problem (Win RT) which I solved by just using:

    <GridView
        x:Name="itemGridView"
        ItemClick="ItemView_ItemClick"
        IsItemClickEnabled="True"/>

and then in the Page class:

    private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
    {
        //e is the object being clicked
    }

How can i bind a button in listviewitem to a Command in ViewModel in Winrt

3 Answers3

Linked