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

Question

要求:

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

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

当前解决方案:

有一个带有图像控制的 Canvas 。在文件 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是你的 friend :

<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 , Y , Width , 和 Height特性。