Comment ajouter dynamiquement des rectangles à une toile WPF à l'aide de MVVM?

En mode MVVM WPF, ajoutez le rectangle à Canvas

Description du problème

Vous souhaitez générer et afficher dynamiquement une série de rectangles dans Canvas dans une application MVVM. Le nombre de rectangles est inconnu au moment de l'exécution, et vous avez besoin d'une solution efficace pour les ajouter à Canvas.

Solution

<.> 1. Indication abstraite:

Créez un ViewModel, qui contient des représentations abstraites des listes rectangulaires, par exemple:

<.> 2. XAML signifie:

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

Dans votre mainwindow, créez une toile comme un conteneur rectangulaire:

<.> 3. LIMINATION DES DONNÉES:

lier la collection

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

dans le ViewModel à l'attribut

de . Cela générera automatiquement un rectangle à chaque élément de la collection.

<.> 4. Liaison de style (facultatif):

RectItems ItemsControl Vous pouvez choisir d'utiliser des attributs de liaison de style ItemsSource et

en fonction des attributs x et y de chaque élément rectangulaire.

<.> 5. Schéma alternatif (pas de liaison de style):

Si le style est lié à votre environnement (comme UWP), vous pouvez utiliser la transformation de rendu dans le modèle rectangulaire: Canvas.Left Canvas.Top

Grâce à cette méthode, vous pouvez ajouter et afficher dynamiquement le rectangle dans les données de données ViewModel, quel que soit le nombre de rectangles lors de l'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!