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.
EDIT 2: Changed the set of the Canvas.Top and Canvas.Left to an ItemContainerStyle Layer. Now it works
<ItemsControl ItemsSource="{Binding Intersections}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Border Width="620" Margin="10,10,10,10" Padding="5" >
<Image Width="600" Height="600" Source="{Binding MapPath}" />
</Border>
<ItemsControl ItemsSource="{Binding SignalList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Fill="Red" Width="20" Height="20"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding SignalX}" />
<Setter Property="Canvas.Top" Value="{Binding SignalY}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="600" Width="600"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Since you have a collection inside elements of another collection, you will have to nest a Signals ItemsControl inside the DataTemplate of the Intersections ItemsControl. If you use a Grid with no columns or rows, you can stack the new ItemsControl on top of the background image (which might no longer need a canvas, you could probably just use an Image).
<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>
<Grid>
<Image Source="{Binding MapPath}"/>
<ItemsControl ItemsSource="{Binding Signals}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Canvas.Left="{Binding SignalX}" Canvas.Top="{Binding SignalY}" Width="5" Height="5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
As a side note, I also advise against using accessible fields. Anything that can be a public field can be a property easily. Even if it's just an auto-property, it will save you a lot of trouble down the road. Keep those fields private... always.
public int SignalX { get; }
public int SignalY { get; }
public Color ColorOn { get; } = Color.Green;
public Color ColorOff { get; } = Color.Red;
public string Name { get; }
public List<Signals> Signals { get; } = new();