Agregue n rectangularjs al canvas con MVVM en WPF

Quiero agregar un conjunto de rectangularjs a la ventana principal de mi aplicación mvvm. En mi viewModel tengo una colección de objetos que convierto a clases System.Windows.Shapes.Rectangle con un convertidor (código a continuación):

ViewModel:

RecognizedValueViewModel { public ObservableCollection BarcodeElements { get { return _BarcodeElements; } set { _BarcodeElements = value; } } public RecognizedValueViewModel() { BarcodeElements = InitializeBarcodeElements(); } } 

Convertidor:

 public BarcodeElementToRectangleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { Rectangle barcodeRectangle = GetRectangleFromBarcodeElement(value as BarcodeElement); return barcodeRectangle; } } 

Los rectangularjs se deben mostrar en un canvas en mi ventana principal:

    

Agregaría Rectangularjs al canvas en el código, pero ahora no sé cuántos rectangularjs hay en tiempo de ejecución. ¿Hay alguna manera de cómo puedo lograr esto? Gracias.

En un enfoque MVVM adecuado, tendría un modelo de vista con una representación abstracta de una lista de rectangularjs, por ejemplo, de esta manera:

 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 RectItems { get; set; } } 

Entonces tendría una vista que usa un ItemsControl para visualizar una colección de tales elementos Rect . ItemsControl tendría un canvas como su ItemsPanel y un ItemContainerStyle y ItemTemplate apropiados que se unen a las propiedades del modelo de vista apropiado. Puede verse así:

                

Una alternativa sin enlaces en Style Setters (que no funcionan en UWP) podría verse así:

                 

Puede vincular la colección de rectangularjs a un control de elemento y establecer su altura, ancho y margen:

          

Solo una idea para empezar …