WPF Canvas, comment ajouter des enfants dynamiquement avec le code MVVM derrière
exigence:
pour dessiner une image Bitmap(de 1024 x 1024 pixels) et un (des) rectangle (s) Basé (s) sur la collection de points. Le rectangle doit correspondre exactement à l'emplacement des pixels sur l'image. Il y a aussi du texte à ajouter à l'intérieur du rectangle.
L'Image sera toujours une seule et les rectangles seront ajoutés dynamiquement.
Solution Actuelle:
avoir une toile avec contrôle D'Image. Ajouter le code dynamique sous le code derrière fichier ViewImageResult.XAML.cs.
private void DrawResult(int left, int right, int width, int height)
{
Border bord = new Border();
bord.BorderThickness = new Thickness(1);
bord.BorderBrush = Brushes.Red;
bord.Width = width;
bord.Height = height;
_mainCanvas.Children.Add(bord);
Canvas.SetLeft(bord, left);
Canvas.SetTop(bord, right);
}
Question:
depuis que je suis MVVM pattern, la collecte de points pour rectangle est dans mon ViewModel fichier Viewimageresulmodel.cs. Je ne suis pas capable d'ajouter le rectangle enfant dynamiquement à partir du fichier ViewModel.
Toute aide est très appréciée.
Merci d'avance
2 réponses
ItemsControl est votre ami:
<Grid>
<Image Source="..."/>
<ItemsControl ItemsSource="{Binding Points}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
ci-dessus suppose que votre VM expose une collection de points via un Points propriété, et que chaque point VM a X,Y,Width et Height propriétés.
Ajouté IsItemsHost="True"Canvas de Kent solution:
<Grid>
<Image Source="..."/>
<ItemsControl ItemsSource="{Binding Points}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>