WPF Canvas, cómo agregar hijos dinámicamente con código MVVM detrás

dynamic children

Question

Requisito:

Dibujar una imagen de mapa de bits (de 1024 x 1024 píxeles) y rectángulo (s) en función de 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:

Tener un lienzo con control de imagen. 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);
    }

Problema:

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

Cualquier ayuda es muy apreciada.

Gracias por adelantado

Answer 1

Se agregó IsItemsHost="True" a la solución Canvas of 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>

Answer 2

ItemsControl es tu 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 supone que su máquina virtual expone una colección de puntos a través de una propiedad Points y que cada punto VM tiene propiedades de X , Y , Width y Height .