如何使用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中文網其他相關文章！