如何使用MVVM在WPF畫布上動態添加和定位矩形？

使用 MVVM 在 WPF Canvas 上動態添加大小可變的矩形

本文的目標是在 MainWindow 的畫布上渲染多個矩形，而無需在運行時知道它們的精確數量。這需要一種靈活的方法，利用 MVVM 原則。

ViewModel 中的抽象矩形表示

創建一個視圖模型，定義矩形的抽象表示，包括其 x、y 坐標和尺寸的屬性。

<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 : INotifyPropertyChanged
{
    public ObservableCollection<RectItem> RectItems { get; set; } = new ObservableCollection<RectItem>();

    // INotifyPropertyChanged implementation (required for data binding)
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}</code>

帶有 ItemsControl 和 Canvas 的視圖

在 MainWindow 中，創建一個 ItemsControl，其 ItemsPanel 為 Canvas。 ItemsControl 將綁定到視圖模型中的 RectItems 集合。

<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}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="FrameworkElement">
            <Setter Property="Canvas.Left" Value="{Binding X}" />
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl></code>

通過這種設置，在畫布上渲染的矩形數量將由視圖模型中 RectItems 的數量決定。隨著視圖模型集合的變化，畫布將自動更新以反映新的矩形。 請注意，為了使數據綁定正常工作，ViewModel需要實現INotifyPropertyChanged接口。 代碼示例中已添加該接口的實現。

通過在 ViewModel 中向 RectItems 集合添加 RectItem 實例，可以在運行時動態添加矩形。

以上是如何使用MVVM在WPF畫布上動態添加和定位矩形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！