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

Ajouter dynamiquement un rectangle variable avec MVVM sur le canevas WPF

Le but de cet article est de rendre plusieurs rectangles sur la toile de Mainwindow, sans avoir à connaître leur quantité précise lors de l'exécution. Cela nécessite une méthode flexible pour utiliser le principe MVVM.

Le rectangle abstrait dans ViewModel indique

Créez un modèle de vue qui définit l'abstraction du rectangulaire, y compris ses coordonnées x, y et ses attributs de taille.

Vues avec itemsControl et Canvas

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

Dans MainWindow, créez un itemStrol, qui est itemspanel comme canvas. ItemsControl sera lié à la collection Rectitems dans le modèle de vue.

À travers ce paramètre, le nombre de rectangles rendus sur la toile sera déterminé par le nombre de rectims dans le modèle de vue. Avec le changement de collection de modèles de vue, la toile sera automatiquement mise à jour pour refléter le nouveau rectangle. Veuillez noter que pour que le travail normal de la liaison de données de liaison des données doit implémenter l'interface

. L'implémentation de l'interface a été ajoutée à l'exemple de code.

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

Dans la collection pour ajouter

> la collection INotifyPropertyChanged, vous pouvez ajouter dynamiquement le rectangle pendant 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!