使用 MVVM 在 Gridview 中显示图像动态变化的最佳方式

Question

我想在网格视图中显示几张图像，并在这张图片上显示一些圆圈，例如叠加层。例如，显示几个房间，并在不同的地方为灯或插座做圆圈，如果状态发生变化，则改变颜色。我用大画布制作了一个原型，使用了几张图像，然后用坐标放置这个“点”。

现在我创建了一个模型，其中包含图像路径的字符串和包含多个点的项目（带有 x、y、颜色的自己的类）的列表。我用画布创建了一个项目控件，将图片设置为背景，现在我想为此列表中的每个点制作圆圈或点。

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

如何在每张图片上绘制点以及如何更新它？或者有更好的方法吗？

这是我的原型中的一个示例。 在此输入图片描述

稍后用户应该能够更改行和列以使此布局适合他们的屏幕。

Answer 1

由于您在另一个集合的元素中拥有一个集合，因此您必须将 Signals ItemsControl 嵌套在 Intersections ItemsControl 的 DataTemplate 内。 如果您使用没有列或行的网格，您可以将新的 ItemsControl 堆叠在背景图像的顶部（可能不再需要画布，您可能只使用图像）。

<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>
                <Canvas>
                    <Canvas.Background>
                        <ImageBrush ImageSource="{Binding MapPath}" />
                    </Canvas.Background>
                </Canvas>
                <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>