Лучший способ показать динамические изменения изображения в Gridview с помощью MVVM ⇐ C#

[Anonymous]

Я хотел бы показать несколько изображений в Gridview и показать на этом изображении несколько кругов, как наложение. Например, покажите несколько комнат и сделайте круги в разных местах для ламп или розеток и измените цвет, если состояние изменилось. Я создал прототип с большим холстом, использовал несколько изображений, а затем разместил эти «точки» с координатами.
Теперь я создал модель со строкой для пути к изображению и списком. с элементами (собственный класс с x,y,color) для нескольких точек. Я создал элемент управления с холстом, установил изображение в качестве фона и теперь хочу нарисовать круги или точки для каждой точки в этом списке.

Код: Выделить всё

Код: Выделить всё

internal class Intersection
{
private String _mapPath;
public String MapPath
{
get
{
return _mapPath;
}
set
{
_mapPath = value;
}
}
public String Name;
public List Signals;

public Intersection(String name, String mapPath)
{
this.Name = name;
this.MapPath = mapPath;
Signals = new List();
}

public void AddSignal(Signals signals)
{
Signals.Add(signals);
}

}

Код: Выделить всё

internal class Signals
{
public int SignalX = 0;
public int SignalY = 0;
public Color ColorOn = Color.Green;
public Color ColorOff = Color.Red;

public Signals(int x, int y)
{
SignalX = x;
SignalY = y;
}
}

Как мне нарисовать точки на каждом изображении и как я могу это обновить? Или есть лучший способ сделать это?
Вот пример из моего прототипа.
введите здесь описание изображения
Позже пользователь должен иметь возможность изменять строки и столбцы, чтобы этот макет соответствовал их экрану.
Изменить: здесь я вставляю тестовые данные

Код: Выделить всё

 private ObservableCollection _intersections;
public IEnumerable Intersections =>
_intersections;

public HomeViewModel(DataStore dataStore)
{
this.dataStore = dataStore;
_intersections = new ObservableCollection();
Intersection test1 = new Intersection("test1",
"/test/testknoten107.png");
Intersection test2 = new Intersection("test2",
"/test/testknoten108.png");

test1.AddSignal(new Signals(400, 400));
test1.AddSignal(new Signals(100, 100));
test1.AddSignal(new Signals(2000, 2000));
test1.AddSignal(new Signals(300, 300));

test2.AddSignal(new Signals(100, 100));
test2.AddSignal(new Signals(100, 200));
test2.AddSignal(new Signals(200, 100));
test2.AddSignal(new Signals(200, 200));
_intersections.Add(test1);
_intersections.Add(test2);
}

С решением от Tarazed я добился максимально желаемого поведения. Теперь единственная проблема заключается в том, что точки, которые должны были находиться над картой, находятся в верхнем левом углу.
Красная точка застряла в углу

Подробнее здесь: https://stackoverflow.com/questions/789 ... -with-mvvm