Wie füge ich mit MVVM mehrere Rechtecke zu einer WPF -Leinwand dynamisch hinzu?

Verwenden Sie den MVVM -Modus, um dynamisch eine beliebige Anzahl von Rechtecken in WPF Canvas

hinzuzufügen

Einführung

Diese Anleitung löst das Problem, wie mehrere Rechtecke zum MVVM -Architekturmodus hinzugefügt werden, um das Hauptfenster der WPF -Anwendung mehrere Rechtecke hinzuzufügen. Wir werden untersuchen, wie die abstrakte Darstellung der rechteckigen Liste im Ansichtsmodell verwendet wird und wie die ItemsControl des Canvas itemsPanel, der ItemContainerStyle und die ItemTemplate verwendet werden, um diese Rechtecks ​​dynamisch anzuzeigen.

Modelldesign anzeigen

Definieren Sie ein Ansichtsmodell, der eine Sammlung eines Rektitemobjekts enthält, um das Zusammenfassung des Rechtecks ​​zu verwalten.

Implementierung anzeigen

Verwenden Sie in der Ansicht itemsControl, um die rechteckige Sammlung zu visualisieren:

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

mit dem Ansichtsmodell

gebunden

itemsControls itemsource -Eigenschaft ist im Ansichtsmodell an die Eigenschaft der Rektiteme gebunden. Die Eigenschaften der rechteckigen Leinwand.

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

Alternative Methode

Als Variante können Sie RenderTransform in der rechteckigen Vorlage verwenden, um das Rechteck dynamisch zu lokalisieren:

Schlussfolgerung

Mit dieser Methode können Sie WPF -Leinwand dynamisch ein Rechteck mit einer beliebigen Anzahl hinzufügen und diese über Datengebunden -Ansichtsmodelle verwalten, wodurch die Flexibilität und Wartung der MVVM -Anwendung verbessert wird.

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