I would like to show several Images in an Gridview and show on this picture some circles like an overlay.For Example show several rooms and do circles in different places for lamps or outlets and change color, if the state changed. I made an prototype with an big canvas, uses several images and then place this “dots” with coordinates.

Now i created an model with an string for the path of the image and a List with items (own class with x,y,color) for several dots. I created an itemcontrol with an canvas, set the picture as Background an now i would like to make circles or dots for every point in this list.

<ItemsControl ItemsSource="{Binding Intersections}" FontFamily="Bahnschrift" Margin="10,10,10,10" AutomationProperties.IsRowHeader="False" BorderThickness="0,0,0,0" Background="#A5FFFFFF" BorderBrush="{x:Null}" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" VerticalAlignment="Top" MinHeight="500"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Canvas Width="200" Height="200" >
                <Canvas.Background>
                    <ImageBrush ImageSource="{Binding MapPath}" />
                </Canvas.Background>                    
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

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

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

    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;
    }
}

How can i draw the dots on every picture and how am i able to update this? Or is there an better way to do this?

Here is an example from my prototyp.
enter image description here

Later the user should be able to change row and columns to fit this layout to their screen.

Edit: Here do I insert testdata

 private ObservableCollection<Intersection> _intersections;
    public IEnumerable<Intersection> Intersections => 
    _intersections;


    public HomeViewModel(DataStore dataStore)
    {
    this.dataStore = dataStore;
    _intersections = new ObservableCollection<Intersection>();
    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);
    }

With the solution from Tarazed I got the most of the behaviour I want. Now the only problem is, that the dots, they supposed to be over the map, are in the top-left corner.

Red Dot stuck in corner