add circle(points) to canvas from a ObservableCollection to view using mvvm

Question

I am an absolute newbie to c#, WPF and MVVM and I and trying to create a canvas were I can add points based on an observable colletion's points x and y coordinates. I created the custome user control and this is my view model: I do not understand the binding how to bind the data on my viewmodel to my view. more specifically.

public  class ViewModel : INotifyPropertyChanged

{ public event PropertyChangedEventHandler PropertyChanged;

public ViewModel()
{
    points = new ObservableCollection<Point>();
    this.testData();
}

public ObservableCollection<Point> points { get; set; }

private void testData()
{
      points.Add(new Point(0, 50) );
      points.Add(new Point(50, 0));
      points.Add(new Point(13, 73));
      points.Add(new Point(12, 23));
      points.Add(new Point(34, 80));
      points.Add(new Point(322, 225));
     points.Add(new Point(270, 510));
    points.Add(new Point(0, 0));
 }
}

This is what I have on my view.xaml

<Canvas>
 <local:UserControl2 />
</Canvas>

and my user control

  public partial class UserControl2 : UserControl
  {
     public UserControl2()
     {
         InitializeComponent();
        this. DataContext = new ViewModel();
     }
  }

It is partially working now, it is displaying the the location on the canvas not the circles/points. I added some changes to my view.xaml — Jose Gonzalez, Apr 14 '17 at 18:25
This answer details exactly how it works http://stackoverflow.com/a/1030191/1228 similar questions http://stackoverflow.com/questions/2317713/binding-wpf-canvas-children-to-an-observablecollection and http://stackoverflow.com/questions/3135438/binding-to-canvas If you're binding to a collection, and the control needs to show something for each thing in the collection, you need to use an ItemsControl. The Panel holds the items that are created, and you can use DataTemplates to control how each is constructed. That's the basic pattern. — , Apr 18 '17 at 16:14

Mister AleXK · Answer 1 · 2017-04-15T00:11:48.987

You could try two things: raise notifyproprtychanged event in the set section of your observable collection ( i know, its silly, i had luck with this sollution in similar case) or (also worked for me) create a New, local observablecollection in your testData Function, fill it with values and then set your observable collection to local filled observable collection. You also could try both of this ways in combination. Please also recheck your property binding in your view. Be sure its set to notifyoncodeupdated (or something) and also to notifyontargetupdated (have no visual Studio to check it here)

add circle(points) to canvas from a ObservableCollection to view using mvvm

1 Answers1