WPF Canvas，如何使用MVVM代码动态添加子项

Question

要求：

根据点的集合绘制一个位图图像和矩形。矩形应完全适合图像上的像素位置。还需要在矩形内添加一些文本。

图像始终只有一张，并且矩形将动态添加。

当前的解决方案：

使用带有图像控制的画布。在代码隐藏文件ViewImageResult.xaml.cs下添加动态代码。

    private void DrawResult(int left, int right, int width, int height)
    {
        Border bord = new Border();
        bord.BorderThickness = new Thickness(1);
        bord.BorderBrush = Brushes.Red;
        bord.Width = width;
        bord.Height = height;
        _mainCanvas.Children.Add(bord);
        Canvas.SetLeft(bord, left);
        Canvas.SetTop(bord, right);
    }

问题：

由于我遵循 MVVM 模式，因此矩形的点集合位于我的 ViewModel 文件 ViewImageResultModel.cs 中。我无法从 ViewModel 文件动态添加子矩形。

Answer 1

ItemsControl 是您的朋友：

<Grid>
    <Image Source="..."/>
    <ItemsControl ItemsSource="{Binding Points}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

上面假设您的 VM 通过 Points 属性公开点的集合，并且每个点 VM 都有 X、< code>Y、Width 和 Height 属性。

Answer 2

将 IsItemsHost="True" 添加到 Kent 解决方案的 Canvas 中：

<Grid>
    <Image Source="..."/>
    <ItemsControl ItemsSource="{Binding Points}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas  IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Y}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>