CODEWITHSUNDEEP
c#mvvmwinrt-xaml
Drunkenelf
Drunkenelf

Reputation: 123

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

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>

Upvotes: 8

Views: 9945

Answers (3)

Stefan Michev
Stefan Michev

Reputation: 5093

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
    }

Upvotes: -1

Dhaval Patel
Dhaval Patel

Reputation: 7591

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}"/>

Upvotes: 4

loopedcode
loopedcode

Reputation: 4893

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>

Upvotes: 13

Related Questions