WPF lienzo, cómo agregar dinámicamente los niños con el código de MVVM detrás

Question

Requisito:

Para dibujar un mapa de bits de imagen (de 1024 x 1024 píxeles) y el rectángulo (s) basado en la colección de puntos. El rectángulo debe caber exactamente en la ubicación de los píxeles sobre la imagen. También es necesario agregar algo de texto dentro del rectángulo.

La imagen siempre será solo una y los rectángulos se agregarán dinámicamente.

Solución actual:

Have a canvas with Image Control. Agregue el código dinámico bajo el código detrás del archivo 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); 
    } 

Edición:

Desde sigo patrón MVVM, la colección de puntos para el rectángulo está en mis archivos ViewImageResultModel.cs modelo de vista. No puedo agregar el rectángulo hijo dinámicamente desde el archivo ViewModel.

Cualquier ayuda es muy apreciada.

Gracias de antemano

Answer 1

ItemsControl es su amigo:

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

Lo anterior presupone su VM expone una colección de puntos a través de una propiedad Points, y que cada punto VM tiene X, Y, Width, y Height propiedades.

Answer 2

Agregado IsItemsHost="True" a la Canvas de la solución de Kent:

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