Wie füge und positioniere ich Rechtecke auf einer WPF -Leinwand mit MVVM dynamisch?

dynamisch ein variables Rechteck mit MVVM auf WPF Canvas

hinzufügen Ziel dieses Artikels ist es, mehrere Rechtecke auf der Leinwand von MainWindow zu rendern, ohne ihre genaue Menge zur Laufzeit kennen zu müssen. Dies erfordert eine flexible Methode, um das MVVM -Prinzip zu verwenden.

Das abstrakte Rechteck in ViewModel zeigt

an Erstellen Sie ein Ansichtsmodell, das die Abstraktion von Rechteck, einschließlich seiner X-, Y -Koordinaten und Größenattribute definiert.

Ansichten mit itemsControl und Canvas

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));
    }
}

Erstellen Sie in MainWindow ein ItemsControl, bei dem es sich um eine Leinwand handelt. ItemsControl wird im Ansichtsmodell an die Kollektion der Rektiteme gebunden.

Durch diese Einstellung wird die Anzahl der auf der Leinwand gerenderten Rechtecke durch die Anzahl der Rektitems im Ansichtsmodell bestimmt. Mit der Änderung der Sammlung von Ansichtsmodellen werden die Leinwand automatisch aktualisiert, um das neue Rechteck widerzuspiegeln. Bitte beachten Sie, dass ViewModel die

-Schinschnittstelle implementieren muss, um die Datenbindung normale Arbeit zu machen. Die Implementierung der Schnittstelle wurde dem Code -Beispiel hinzugefügt.

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

In der zum Hinzufügen von

Instanzen zur INotifyPropertyChanged -Kollektion können Sie während der Laufzeit rechteckig hinzufügen.

Das obige ist der detaillierte Inhalt vonWie füge und positioniere ich Rechtecke auf einer WPF -Leinwand mit MVVM dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!