Adding Items to Collection using MVVM pattern

Question

I am having truble accessing ObservableCollection (which is my ItemsSource) from command attached to each of the items.

I am trying make two list, one with all the objects and the second one with objects picked by user.

Here is my view model.

class ViewModel : VMBase
{
    private ObservableCollection<Card> _cardsCollection;
    public ObservableCollection<Card> CardsCollection
    {
        get { return _cardsCollection; }
        set { _cardsCollection = value; }
    }

    static private ObservableCollection<Card> _pickedCards;
    static public ObservableCollection<Card> PickedCards
    {
        get { return _pickedCards; }
        set { _pickedCards = value;
              NotifyPropertyChanged("PickedCards");
            }
    }
}
class Card : VMBase
{
    public string Name { get; set; }
    public Card(string name, int cost, CardType type, CardRarity rarity)
    {
        this.Name = name;
        this.BackgroundImage = String.Format("/Images/Cards/{0}.png", name);

        this.PickCardCommand = new MvvmCommand();
        this.PickCardCommand.CanExecuteFunc = obj => true;
        this.PickCardCommand.ExecuteFunction = PickCard;
    }
    public MvvmCommand PickCardCommand { get; set; }
    public void PickCard(object parameter)
    {
        PickedCards.Add(currentCard); 
        //Above Does not work, not accessible
        CreateDeckModel.PickedCards.Add(currentCard);
        //Above does work but only if Collection is static
        //but if collection is static I am unable to call NotifyPropertyChanged()
    }
}

Here is my XAML file with binding

<GridView Grid.Row="1" ItemsSource="{Binding CardsCollection, Mode=TwoWay}">
     <GridView.ItemTemplate>
         <DataTemplate>
             <Grid>
                  <Button Height="258" Width="180" Content="{Binding}" Margin="0,0,0,0" 
                          Command="{Binding PickCardCommand}" CommandParameter="{Binding}">
                      <Button.Template>
                          <ControlTemplate>
                              <StackPanel Orientation="Vertical">
                                  <Border BorderThickness="2" BorderBrush="White" Height="258" Width="180">
                                      <Border.Background>
                                          <ImageBrush ImageSource="{Binding BackgroundImage}" />
                                      </Border.Background>
                                   </Border>
                              </StackPanel>
                          </ControlTemplate>
                       </Button.Template>
                   </Button>
               </Grid>
           </DataTemplate>
       </GridView.ItemTemplate>
   </GridView>

Here is my MvvmCommand Class

class MvvmCommand : ICommand
{
    public Predicate<object> CanExecuteFunc { get; set; }
    public Action<object> ExecuteFunction { get; set; }
    public void Execute(object parameter)
    {
        ExecuteFunction(parameter);
    }

    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter)
    {
        return CanExecuteFunc(parameter);
    }
}

}

Is there a way to access ItemsSource from Item or DataContext alternatively make command accessible for ViewModel Class?

Bijington · Accepted Answer · 2015-02-17 14:57:06Z

2

You can point the Command to your ViewModel class by changing the button in your xaml file to the following:

<Button Height="258" Width="180" Content="{Binding}" Margin="0,0,0,0" Command="{Binding DataContext.PickCardCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type vw:ViewClass}}}" CommandParameter="{Binding}">

In the RelativeSource binding you will need to change the following:

vw is the namespace for your View, this will have to be declared with the other namespaces in your xaml file.

ViewClass is the name of your class.

Then you obviously need to move the Command over to the ViewModel class from your Card class.

Windows Phone

<GridView x:Name="myGridView" Grid.Row="1" ItemsSource="{Binding CardsCollection, Mode=TwoWay}">
     <GridView.ItemTemplate>
         <DataTemplate>
             <Grid>
                  <Button Height="258" Width="180" Content="{Binding}" Margin="0,0,0,0" 
                          Command="{Binding ElementName=myGridView,
                   Path=DataContext.PickCardCommand}" CommandParameter="{Binding}">
                      <Button.Template>
                          <ControlTemplate>
                              <StackPanel Orientation="Vertical">
                                  <Border BorderThickness="2" BorderBrush="White" Height="258" Width="180">
                                      <Border.Background>
                                          <ImageBrush ImageSource="{Binding BackgroundImage}" />
                                      </Border.Background>
                                   </Border>
                              </StackPanel>
                          </ControlTemplate>
                       </Button.Template>
                   </Button>
               </Grid>
           </DataTemplate>
       </GridView.ItemTemplate>
   </GridView>

You will see that I have now named the GridView and then used the name of the GridView in the binding as the ElementName. I believe this should work.

edited Feb 17, 2015 at 14:57

answered Feb 17, 2015 at 14:31

Bijington

3,7715 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Muds Over a year ago

I think his command binding is correct he needs a way to access the parent collection of the items.

Bijington Over a year ago

If he wants to modify a collection on the parent ViewModel then it would be much cleaner to declare the Command on the ViewModel and modify the collection there.

user2847238 Over a year ago

Unfortunately FindAncestor is not accessible in Windows Phone.

Bijington Over a year ago

@user2847238 I have updated my answer with a Windows Phone section.

Scroog1 · Accepted Answer · 2015-02-17 15:46:25Z

0

You can just pass the Add method of PickedCards to the Card when you create it:

class Card : VMBase
{
    private readonly Action<Card> _addCard;

    public Card(..., Action<Card> addCard)
    {
        ...
        _addCard = addCard;

        this.PickCardCommand = new MvvmCommand();
        this.PickCardCommand.CanExecuteFunc = obj => true;
        this.PickCardCommand.ExecuteFunction = PickCard;
    }

    public MvvmCommand PickCardCommand { get; set; }

    public void PickCard(object parameter)
    {
        _addCard(this);
    }
}

Then when you create the card:

var card = new Card(..., ..., ..., ..., PickedCards.Add)

answered Feb 17, 2015 at 15:46

Scroog1

3,60924 silver badges27 bronze badges

Comments

Muds · Accepted Answer · 2015-02-17 14:31:19Z

-1

You can bind your collection to the Command parameter. Command parameter is currently bound to Item DataSource and not collection

CommandParameter="{Binding}"

Instead use RelativeBinding and bind to itemSource of grid

answered Feb 17, 2015 at 14:31

Muds

4,1365 gold badges37 silver badges58 bronze badges

2 Comments

Muds Over a year ago

let me know if you need help in relative binding

user2847238 Over a year ago

Would be nice if You could help me with it.

Collectives™ on Stack Overflow

Adding Items to Collection using MVVM pattern

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related