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

在WPF MVVM模式下动态向Canvas添加矩形

问题描述

您希望在一个MVVM应用程序的Canvas中动态生成和显示一系列矩形。矩形的数量在运行时是未知的，您需要一个高效的解决方案来将它们添加到Canvas中。

解决方案

1. 抽象表示:

创建一个ViewModel，其中包含矩形列表的抽象表示，例如：

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

2. XAML表示:

在您的MainWindow中，创建一个Canvas作为矩形的容器：

<code class="language-xml"><ItemsControl ItemsSource="{Binding RectItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <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>

3. 数据绑定:

将ViewModel中的RectItems集合绑定到ItemsControl的ItemsSource属性。这将自动为集合中的每个项目生成一个矩形。

4. 样式绑定（可选）:

您可以选择使用样式绑定，根据每个矩形项目的X和Y属性设置Canvas.Left和Canvas.Top属性。

5. 替代方案（无样式绑定）:

如果样式绑定在您的环境中不起作用（例如UWP），您可以在矩形模板中使用渲染变换：

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

通过这种方法，您可以根据ViewModel数据动态添加和显示Canvas中的矩形，而不管运行时矩形的数量是多少。

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