c# - Dibujar líneas en un lienzo en WPF MVVM no funciona

canvas caliburn.micro

Question

Tengo este xaml:

<Canvas cal:View.Context="DrawCanvas">
    <!--<Line  X1="1" Y1="1" X2="400" Y2="400" Stroke="Black" StrokeThickness="20" IsHitTestVisible="False"/>-->
</Canvas>

y en el modelo que tengo:

public Canvas DrawCanvas { get; set; }
public ImageSourceViewModel()
{
    this.PropertyChanged += this.ImageSourceViewModel_PropertyChanged;
    this.Scale = 1;
    this.TranslateX = 0;
    this.TranslateY = 0;
    DrawCanvas=new Canvas();
    var line = new Line();
    line.X1= 1;
    line.Y1 = 1;
    line.X2 = 100;
    line.Y2 = 10;
    line.Stroke=new SolidColorBrush(Colors.Green);
    line.StrokeThickness = 2;
    line.Visibility=Visibility.Visible;
    DrawCanvas.Children.Add(line);
}

Estoy usando Caliburn Micro.

No dibuja ninguna línea en la salida.

Puede haber dos razones para este problema:

1- El lienzo a la vista no se une a DrawCanvas en ViewModel.

2- El código de dibujo no es correcto.

¿Cómo puedo verificar que el lienzo de mi vista sea realmente vinculante para DrawCanvas en mi ViewModel? ¿Es correcta la sintaxis para el enlace? Estoy usando Caliburn Micro.

Si el enlace es correcto, ¿cuál es el problema con el código de dibujo que no está funcionando?

Answer 1

Esa es la forma en que puede hacerlo en MVVM (modifiqué la solución desde aquí: https://stackoverflow.com/a/1030191/3047078 ):

En la vista:

<ItemsControl ItemsSource="{Binding Path=Lines}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <Canvas Background="White" Width="500" Height="500"  />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" Stroke="Black" StrokeThickness="3"></Line>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

En ViewModel, necesitas algo como esto:

public ObservableCollection<MyLine> Lines {get;set;}

En el modelo:

public class MyLine
{
  public int X1 {get;set;}
  public int Y1 {get;set;}
  public int X2 {get;set;}
  public int Y2 {get;set;}
}