Draw a line and move it programmatically

Question

I want to draw a string in 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; } 

Drawn without problems. But now I want to add four buttons to the grid (up, down, left, right). Therefore, when I press one of the buttons, the line should move in the direction that I choose.

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

It was a function that I want to use for this, but it does not work. So how can you move this line?

In the end, I have a gui, like the old 3270 terminal, and these gui have a carriage. the lines should look like a crosshair (and help see where the carriages actually are)

Answer 1

Firstly, I will not manipulate the coordinates, since they are intended primarily to determine the shape of the line. Secondly, I would not use Canvas, but Render Transformation instead, since it potentially runs on the GPU instead of the CPU, which makes the 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 for:

  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 an Affine transformation matrix in XAML and animate it, at some point WPF will replace an instance of that matrix, and if you reference this matrix in your code, you may not be able to manipulate the object.

Side note. I would prefer to create all the user interface elements in XAML (Blend is a great tool for this), and then will use the links to them from the code.

Answer 2

I did this very basic thing only in the maze, and this is what I would do

 private void Move_Up Click(object sender, RoutedEventArgs e) { Point testlinelocation; testlinelocation = testline.Y1; testlinelocation.Offset(someX, someY); testlinelocation = testline.Y1; } 

It should work, it worked for me, good luck good luck. This is in winforms