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

Question

需求:

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

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

当前解决方案

有一个带图像控件的画布.在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属性,每个点虚拟机有X,Y,Width,和Height属性.