Search code examples
c#mvvmwindows-8windows-store-appswinrt-xaml

How to get Listview ItemClick Vallue in Relay Command


Hi i'm working in windows store app with MVVM pattern and i have some problem in catch the listview itemclick value in relay command. Now i got the selected item value.But don't know how to get itemclickValue. Here i have attach my code.

XAML

 <ListView x:Name="lstItem" ItemTemplate="{StaticResource ItemTemplate}"  ItemsSource="{Binding ItemList}" Padding="130,0,0,0" SelectedItem="{Binding SelectedItem,Mode=TwoWay}">
            <Triggers:Interactions.Triggers>
                <Triggers:EventTrigger EventName="SelectionChanged">
                    <Triggers:InvokeCommandAction Command="{Binding SelectedItemCommand}" CommandParameter="{Binding SelectedItem,Mode=TwoWay}"/>
                </Triggers:EventTrigger>
            </Triggers:Interactions.Triggers>
        </ListView>

ViewModel Code

private Item _selectedItem;
    public Item SelectedItem { get { return _selectedItem; } set { _selectedItem = value; NotifyPropertyChanged("SelectedTrends"); } }



private RelayCommand<Item> _selectedItemCommand;
    public RelayCommand<Item> SelectedItemCommand
    {
        get
        {
            return this._selectedItemCommand
                ?? (this._selectedItemCommand= new RelayCommand<Item>(item=>
                {
                    MessageDialog messagedialog = new MessageDialog(item.Name,"Test");
                    messagedialog.ShowAsync();
                }));
        }

    }

Solution

  • There's a bit of redundancy here:

    Option 1: Spare the CommandParameter:

    private Item _selectedItem;
    public Item SelectedItem 
    { 
         get { return _selectedItem; } 
         set { _selectedItem = value; NotifyPropertyChanged("SelectedTrends"); } 
    }
    
    
    
    private RelayCommand _selectedItemCommand;
    public RelayCommand SelectedItemCommand
    {
        get
        {
            return this._selectedItemCommand
                ?? (this._selectedItemCommand= new RelayCommand(() =>
                {
                    MessageDialog messagedialog = new MessageDialog(selectedItem.Name,"Test");
                    messagedialog.ShowAsync();
                }));
        }
    
    }
    

    and the XAML:

    <ListView x:Name="lstItem" ItemTemplate="{StaticResource ItemTemplate}"  ItemsSource="{Binding ItemList}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}" Padding="130,0,0,0">
        <Triggers:Interactions.Triggers>
            <Triggers:EventTrigger EventName="SelectionChanged">
                <Triggers:InvokeCommandAction Command="{Binding SelectedItemCommand}" />
            </Triggers:EventTrigger>
         </Triggers:Interactions.Triggers>
     </ListView>
    

    Option 2: Spare the SelectedItem binding:

    <ListView x:Name="lstItem" ItemTemplate="{StaticResource ItemTemplate}"  ItemsSource="{Binding ItemList}" Padding="130,0,0,0">
        <Triggers:Interactions.Triggers>
            <Triggers:EventTrigger EventName="SelectionChanged">
                <Triggers:InvokeCommandAction Command="{Binding SelectedItemCommand}" CommandParameter="{Binding SelectedItem, ElementName=lstItem}"/>
            </Triggers:EventTrigger>
         </Triggers:Interactions.Triggers>
     </ListView>
    

    and remove the SelectedItem property from the ViewModel, unless you need it for something else.

    EDIT

    If you want to handle the click event on an item, you need to move the behavior to the ItemTemplate DataTemplate parent control, for example the grid in which the controls are placed. This lets you handle the click event on the item.