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