Draw line and move it programmatically

Question

I want to draw a line on a WPF Grid.

private void InitializeTestline()
{
    testline = new Line();
    grid.Children.Add(testline);
    testline.X1 = 0;
    testline.X2 = 1;
    testline.Y1 = 0;
    testline.Y2 = 1;
    testline.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
    testline.VerticalAlignment = System.Windows.VerticalAlignment.Top;
    testline.Stroke = Brushes.Red;
    testline.Stretch = Stretch.Fill;
    testline.StrokeThickness = 2;
    testline.Visibility = System.Windows.Visibility.Visible;
}

It is drawn without problems. But now i want to add four buttons to the grid (up, down, left, right). So when i press one of the buttons the line should move in the direction i choose.

private void MoveUp_Click(object sender, RoutedEventArgs e)
{
    this.testline.Y1 += move;
    this.testline.Y2 += move;
}

This was the function i want to use for this, but it doesn't work. So how it is possible to move this line?

In end I have a gui like an old terminal3270 and these gui has a caret. the lines should be like a crosshair (and help to see where the caret actually is)

Answer 1

Firstly, I would not manipulate coordinates as their are primarily for defining shape of the line. Secondly, I wouldn't use Canvas, but Render Transformation instead, as it potentially runs on GPU instead of CPU which makes animation smoother.

So I would do something like this:

XAML:

<Grid x:Name="LayoutRoot">

    <Line x:Name="crosshair"
          HorizontalAlignment="Left"
          VerticalAlignment="Top"
          Stroke="Red"
          X1="0"
          X2="0"
          Y1="10"
          Y2="0" />

    <Button Width="50"
            Height="50"
            HorizontalAlignment="Right"
            Click="MoveRight"
            Content="&gt;" />
</Grid>

Code Behind:

   public partial class MainWindow : Window
    {
        private int moveRightDist = 0;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void MoveRight(object sender, RoutedEventArgs e)
        {
            this.moveRightDist++;
            crosshair.RenderTransform = new TranslateTransform(this.moveRightDist, 0);
        }
    }

<Grid x:Name="LayoutRoot">

    <Line x:Name="crosshair"
          HorizontalAlignment="Left"
          VerticalAlignment="Top"
          Stroke="Red"
          X1="0"
          X2="0"
          Y1="10"
          Y2="0" />

    <Button Width="50"
            Height="50"
            HorizontalAlignment="Right"
            Click="MoveRight"
            Content="&gt;" />
</Grid>

Important! If you define Affine transformation matrix in XAML and animate it, at some point WPF will substitute the instance of that matrix and if you are refering to that matrix in your code you might not be able to manipulate an object.

Side Note: I would rather create all UI elements in XAML (Blend is a great tool for that) and then would use refer to them from code behind.