Reliure à une collection de formes?

Question

Comment me lier à une collection de formes? Je voudrais construire une petite application (juste pour apprendre) où j'utilise MVVM pour dessiner des formes.

Le DataContext du MainWindow est le MainWindowViewModel

Ce MainWindowViewModel a une ObservableCollection de formes.

Je ne disposent actuellement que d'une toile sur mon MainWindow avec son DataContext lié à cette collection qui ne fonctionne pas:

<Window x:Class="DesktopCanvas.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
> 
    <Canvas DataContext="{Binding Source=ShapeCollection}"> 
    </Canvas> 
</Window> 

Dans le constructeur de la MainWindowViewModel ajouter un rectangle comme celui-ci:

this.ShapeCollection = new ObservableCollection<Shape>(); 
Rectangle rect = new Rectangle(); 
//Größe 
rect.Height = 75; 
rect.Width = 75; 
//Transparenz 
rect.Opacity = 100; 
//Farbe 
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red); 
rect.Fill = myBrush; 
this.ShapeCollection.Add(rect); 

Aucune erreur de liaison jusqu'à présent. Des idées?

Answer 1

Vous souhaitez utiliser un ItemsControl pour lier à un ensemble de données et avoir chaque pièce de données représentée par un type d'interface utilisateur. En outre, vous ne définissez pas la liaison correctement. Commençons par la façon dont ces deux choses pourraient regarder:

<ItemsControl ItemsSource="{Binding Path=ShapeCollection, Element=MainWindow}"> 
</ItemsControl> 

REMARQUE: la suppose que vous avez déclaration contraignante ci-dessus appliqué un x: Name = « MainWindow » à votre élément de fenêtre et que le ShapeCollection est une propriété hors de votre classe MainWindow. Maintenant, puisque la disposition par défaut d'un ItemsControl est un StackPanel avec une orientation verticale, vous devriez voir vos formes empilées les unes sur les autres. Si vous souhaitez modifier la disposition des éléments, vous devez modifier ItemPanelTemplate ItemsControl. Changeons de sorte que les formes sont disposées horizontalement et enveloppées vertifcally lorsque l'espace s'écoule:

<ItemsControl Height="100" ItemsSource="{Binding ShapeCollection, ElementName=Window, Mode=Default}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

Enfin, nous allons parler de votre approche globale. À l'heure actuelle, vous utilisez réellement des formes comme données qui sont en fait quelque peu en retrait d'une technique connue sous le nom de Mode-View-ViewModel (MVVM). Dans MVVM, vous voulez simplement un objet de données pur, puis vous ou, mieux encore, votre concepteur, définissez la représentation visuelle de ces données à l'aide de DataTemplates. Pour en savoir plus sur MVVM, je suggère simplement de cliquer sur l'étiquette ici sur StackOverflow et de creuser dans les questions les plus votées.