WPF画布，如何使用MVVM代码动态添加子项 要求：

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

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

当前解决方案： 有一个带有图像控件的画布。在代码隐藏文件viewmageresult.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文件动态添加子矩形。

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>

上述假设您的虚拟机通过

points

属性公开一组点，并且每个点虚拟机都具有

X

、

Y

、

宽度

和

高度

属性。

将

IsItemsHost=“True”

添加到Kent解决方案的

画布

：

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

非常感谢Kent。这是一个非常好的小变化。。。这真是太好了。打字与交谈的好处在于，当你意识到自己的错误时，你不必点击“添加评论”。。。