如何使用MVVM在WPF画布中动态添加多个矩形？

使用MVVM模式在WPF Canvas中动态添加任意数量的矩形

简介

本指南将解决如何在MVVM架构模式下，将多个矩形集合添加到WPF应用程序主窗口的难题。我们将探讨如何在视图模型中使用矩形列表的抽象表示，以及如何使用带有Canvas ItemsPanel、ItemContainerStyle和ItemTemplate的ItemsControl动态显示这些矩形。

视图模型设计

为了管理矩形的抽象表示，定义一个视图模型，其中包含一个RectItem对象的集合，这些对象包含位置和尺寸的属性：

<code class="language-csharp">public class RectItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
}

public class ViewModel
{
    public ObservableCollection<RectItem> RectItems { get; set; }
}</code>

视图实现

在视图中，使用ItemsControl来可视化矩形集合：

<code class="language-xml"><ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="FrameworkElement">
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="Black" Height="{Binding Height}" Width="{Binding Width}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl></code>

与视图模型绑定

ItemsControl的ItemsSource属性绑定到视图模型中的RectItems属性。矩形的Canvas.Left和Canvas.Top属性通过数据绑定设置为各自RectItem对象的X和Y属性。

替代方法

作为一种变体，可以在矩形模板中使用RenderTransform来动态定位矩形：

<code class="language-xml"><ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="Black" Height="{Binding Height}" Width="{Binding Width}">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding X}" Y="{Binding Y}" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl></code>

结论

这种方法允许您动态地将任意数量的矩形添加到WPF画布中，并通过数据绑定的视图模型来管理它们，从而提高MVVM应用程序的灵活性和可维护性。

以上是如何使用MVVM在WPF画布中动态添加多个矩形？的详细内容。更多信息请关注PHP中文网其他相关文章！