【问题标题】：WPF Canvas, how to add children dynamically with MVVM code behindWPF Canvas，如何使用背后的 MVVM 代码动态添加子项
【发布时间】：2011-08-20 07:19:07
【问题描述】：

要求：

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

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

当前解决方案：

有一个带图像控制的画布。在文件 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 文件中动态添加子矩形。

【问题讨论】：

标签： wpf mvvm canvas dynamic children

【解决方案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、Y、Width 和 Height 属性。

【讨论】：

非常感谢肯特。小改动效果非常好
那个……太美了。

【解决方案2】：

在肯特解决方案的Canvas 中添加了IsItemsHost="True"：

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

【讨论】：

打字与说话的好处在于，当您意识到自己的错误时，您不必点击“添加评论”...