c# - direccionando programáticamente un lienzo creado en xaml

wpf mvvm

Question

Estoy creando una aplicación en WPF usando el enfoque MVVM. Soy bastante nuevo en el tema y estoy buscando punteros sobre cómo lograr lo siguiente: He creado un lienzo en XAML, de la siguiente manera:

<canvas name = "myCanvas">
...
</canvas>

Agregué un botón, también en XAML, que quiero usar para dibujar (programáticamente) algunas formas básicas (línea, rectángulo, etc.) en el lienzo existente con un clic del mouse. Dado que estoy usando el enfoque MVVM, el comando del botón debe estar vinculado a un método, de la siguiente manera:

<Button name="myButton" Command="{Binding myMethod, Mode=OneWay}">
...
</Button>

Obtuve el enlace para que funcionara bien y creé los dibujos y las formas en C #, pero no entiendo cómo puedo poner las formas en el lienzo que se creó en XAML. ¿Cómo puedo abordar el lienzo precompuesto en XAML desde mi método? ¿Cómo hago esto?

Editar:

El objetivo de esto es que quiero generar formas basadas en datos para visualizarlas. Entonces, si mi entrada tiene, digamos, 3 elementos de tipo A, quiero crear 3 rectángulos y mostrarlos en el lienzo. Más tarde quiero hacer que se puedan hacer clic y mostrar cierta información sobre ellos al hacer clic. MVVM es un requisito establecido para mí.

Answer 1

En su modelo de vista, debe tener una representación de las formas que no utiliza ningún elemento de la interfaz de usuario:

public class ShapeItem
{
    public Geometry Geometry { get; set; }
    public Brush Fill { get; set; }
    public Brush Stroke { get; set; }
}

public class ViewModel
{
    public ObservableCollection<ShapeItem> ShapeItems { get; set; }
}

A continuación, utilizaría un ItemsControl con un ItemsPanel y ItemTemplate apropiados para visualizar los elementos de forma:

<ItemsControl ItemsSource="{Binding ShapeItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Geometry}"
                  Fill="{Binding Fill}"
                  Stroke="{Binding Stroke}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

El modelo de vista se puede inicializar como se muestra a continuación, y los elementos se pueden agregar de manera similar cuando se ejecuta un método de comando apropiado:

var vm = new ViewModel();
vm.ShapeItems = new ObservableCollection<ShapeItem>();
vm.ShapeItems.Add(
    new ShapeItem
    {
        Geometry = new EllipseGeometry(new Point(100, 100), 100, 50),
        Fill = Brushes.LightBlue
    });
vm.ShapeItems.Add(
    new ShapeItem
    {
        Geometry = new RectangleGeometry(new Rect(150, 100, 200, 100)),
        Fill = Brushes.Azure,
        Stroke = Brushes.Black
    });

DataContext = vm;