How can i add more than 1 polyline in canvas? - c#

I am using C# WPF to draw 10 polylines on touch screen. Yet, it got an error
"Argument expception was unhandled An unhandled exception of type
'System.ArgumentException' occurred in PresentationCore.dll
Additional information: Specified Visual is already a child of another
Visual or the root of a CompositionTarget."
for the line
canvas.Children.Add(freeline); in private void canvas_TouchDown
when I drew the second line. I could successfully drew one line, but
when I started to draw the second line, it got the mentioned error
public partial class MainWindow : Window
{
//List<Point> list = new List<Point>();
Polyline freeline = new Polyline();
bool isMouseDown = false; //mouse
Color[] colours = new Color[10] {Colors.White, Colors.Yellow,
Colors.Green,Colors.LightBlue, Colors.LightGreen,
Colors.LightCyan, Colors.LightGray, Colors.LightPink,
Colors.Purple, Colors.Red};
// Store the active lines, each of which corresponds to a place
// the user is currently touching down.
Dictionary<int, Line> movingLines = new Dictionary<int, Line>();
Line line = new Line();
int counter = 0;
public MainWindow()
{
InitializeComponent();
}
private void canvas_TouchDown(object sender, TouchEventArgs e)
{
counter = (counter + 1) % 10;
Line line = new Line();
// line.StrokeThickness = e.GetTouchPoint().Size;
// line.Stroke = new SolidColorBrush(colours[counter]);
// Position the line at the touch-down point.
TouchPoint touchPoint = e.GetTouchPoint(canvas);
line.X1 = touchPoint.Position.X;
line.Y1 = touchPoint.Position.Y;
line.X2 = line.X1;
line.Y2 = line.Y1;
movingLines[e.TouchDevice.Id] = line;
// Add the line to the Canvas.
//canvas.Children.Add(line);
// list_store_point_touch(touchPoint.Position.X, touchPoint.Position.Y);
canvas.Children.Add(freeline);
freeline.StrokeThickness = 4;
freeline.Stroke = new SolidColorBrush(colours[counter]);
//e.GetTouchPoint()
//for (int counter = 0; counter < touchPoint.Position.X ; counter++)
//{
// canvas.Children.Add(freeline);
// freeline.StrokeThickness = 4;
// freeline.Stroke = new SolidColorBrush(colours[counter]);
//}
/* for (int i = 0; i < handwritings.Points.Count - 1; i++)
{
drawingContext.DrawLine(new Pen(Brushes.Yellow, 3),
handwritings.Points[i], handwritings.Points[i + 1]);
} */
}
private void canvas_TouchMove(object sender, TouchEventArgs e)
{
// Get the line that corresponds to the current touch-down.
line = movingLines[e.TouchDevice.Id];
// Move it to the new touch-down point.
TouchPoint touchPoint = e.GetTouchPoint(canvas);
line.X2 = touchPoint.Position.X;
line.Y2 = touchPoint.Position.Y;
list_store_point_touch(touchPoint.Position.X, touchPoint.Position.Y);
}
private void canvas_TouchUp(object sender, TouchEventArgs e)
{
movingLines.Remove(e.TouchDevice.Id);
}
private void list_store_point_touch(double X, double Y)
{
Point point = new Point(X,Y);
freeline.Points.Add(point);
}
private void canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
isMouseDown = true;
counter = (counter + 1) % 10;
line = new Line();
line.StrokeThickness = 4;
line.Stroke = new SolidColorBrush(colours[counter]);
// Position the line at the mouse down point.
Point mousePoint = e.GetPosition(canvas);
line.X1 = mousePoint.X;
line.Y1 = mousePoint.Y;
line.X2 = line.X1;
line.Y2 = line.Y1;
//Add the line to the Canvas.
canvas.Children.Add(freeline);
freeline.StrokeThickness = 4;
freeline.Stroke = new SolidColorBrush(colours[counter]);
//canvas.Children.Add(line);
}

Don't reuse the same Polyline instance.
Remove the line:
Polyline freeline = new Polyline();
When you need to draw yet another Polyline, create new one and draw it.

The error is self explanatory you are adding the same freeline more than once to the VisualTree. You need to use a factory method of some kind in order to always get new instances of Polyline before adding to the canvas.Children collection

Related

How to access to a specific PictureBox.EventHandler that was created programmatically?

I am making a Scorebar from 1-10 where every number is one picture of a small grey cube.
Like this:
🟩🟩🟩🟩🟩⬛⬛⬛⬛⬛ (This would be a score of 5)
Now I want to change the cube images to green ones, when the MouseDown Event is triggered, but I don't know who to tell the program.
Pic of Scorebar
private void BtnDebug_Click(object sender, EventArgs e)
{
int xPos = 200;
int yPos = 100;
PictureBox[] ScoreGameplay = new PictureBox[100];
for (int i = 0; i < 10; i++)
{
ScoreGameplay[i] = new PictureBox();
ScoreGameplay[i].Name = "ScoreGameplay" + i;
ScoreGameplay[i].Size = new Size(18, 18);
ScoreGameplay[i].Location = new Point(xPos, yPos);
ScoreGameplay[i].Image = Image.FromFile(#"img\icons\score_empty.png");
ScoreGameplay[i].MouseEnter += new EventHandler(Score_MouseEnter);
ScoreGameplay[i].MouseLeave += new EventHandler(Score_MouseLeave);
ScoreGameplay[i].MouseDown += new MouseEventHandler(Score_MouseDown);
this.Controls.Add(ScoreGameplay[i]);
xPos += 18;
}
This part works without an issue, but here we go:
private void Score_MouseDown(object sender, EventArgs e)
{
if (sender is PictureBox pBox)
{
// ???
}
}
How do I tell know which Index of the Array in BtnDebug_Click has triggered the MouseDown?
For example:
The 7th PictureBox has been clicked; now I want to change the images from PictureBoxes 1-7 to the green ones.
Anyone has a smart solution for this?
Simply you can do that
private void BtnDebug_Click(object sender, EventArgs e)
{
int xPos = 200;
int yPos = 100;
PictureBox[] ScoreGameplay = new PictureBox[100];
for (int i = 0; i < 10; i++)
{
ScoreGameplay[i] = new PictureBox();
ScoreGameplay[i].Name = $"ScoreGameplay{i}";
ScoreGameplay[i].Size = new Size(18, 18);
ScoreGameplay[i].Location = new Point(xPos, yPos);
ScoreGameplay[i].Image = Image.FromFile(#"img\icons\score_empty.png");
ScoreGameplay[i].MouseEnter += new EventHandler(Score_MouseEnter);
ScoreGameplay[i].MouseLeave += new EventHandler(Score_MouseLeave);
ScoreGameplay[i].MouseDown += new MouseEventHandler(Score_MouseDown);
this.Controls.Add(ScoreGameplay[i]);
xPos += 18;
}
}
and in Score_MouseDown
private void Score_MouseDown(object sender, EventArgs e)
{
string imageName = ((PictureBox)sender).Name; // get the name of the clicked image
string imageIndex = imageName.Substring(13); // get the text after 13 chars
}

Line (Crosshair) in WPF not updating when coordinates are updated with mouse move event - C#

I'm trying to create a cross-hair out of two lines on a WPF canvas.
I'm finding that when I initialize the lines they draw correctly.
But when I update the coordinates of the lines using the mouse move event, the lines are not updating.
Why are the lines not updating when the coordinates of the point `currentMousePoint are updated?
public CADControl()
{
InitializeComponent();
}
//(500, 500) added just to test the lines appear which they do.
private Point currentMousePoint = new Point(500,500);
private void CadCanvas_MouseMove(object sender, MouseEventArgs e)
{
currentMousePoint = e.GetPosition(this);
//coordinates appear to update correctly in the console
Console.WriteLine("x: " + currentMousePoint.X + " y: " + currentMousePoint.Y);
InvalidateVisual();
UpdateLayout();
}
private double screenWidth;
private double screenHeight;
private void DrawCursorCrosshair()
{
screenWidth = CadCanvas.ActualWidth;
screenHeight = CadCanvas.ActualHeight;
Line horizontalLine = new Line();
horizontalLine.Stroke = Brushes.White;
horizontalLine.X1 = 0;
horizontalLine.X2 = screenWidth;
horizontalLine.Y1 = currentMousePoint.X;
horizontalLine.Y2 = currentMousePoint.X;
CadCanvas.Children.Add(horizontalLine);
Line verticalLine = new Line();
verticalLine.Stroke = Brushes.White;
verticalLine.X1 = currentMousePoint.X;
verticalLine.X2 = currentMousePoint.X;
verticalLine.Y1 = 0;
verticalLine.Y2 = screenHeight;
CadCanvas.Children.Add(verticalLine);
}
private void CadCanvas_Loaded(object sender, RoutedEventArgs e)
{
DrawCursorCrosshair();
}
You need to store the reference to your lines and update them in the MouseMove event handler:
private Line _v;
private Line _h;
add in DrawCursorCrosshair:
_h = horizontalLine;
_v = verticalLine;
and in CadCanvas_MouseMove (after currentMousePoint is updated):
Canvas.SetLeft(_v, currentMousePoint.X);
Canvas.SetTop(_h, currentMousePoint.Y);
and set a static position to the lines in DrawCursorCrosshair:
verticalLine.X1 = 0;
verticalLine.X2 = 0;
horizontalLine.Y1 = 0;
horizontalLine.Y2 = 0;

How to draw moving axis table

I'm trying to draw an axis table (x-y) in WPF from code-behind; and I want to give it drag and drop option which can see more of the axis table.
I had created static axis but I don't know how to create a dynamic one?
Can anybody help me with this stuff ?
Thanks.
for (int i = 10; i < 400; i+=10)
{
Line a = new Line();
a.X1 = 0;
a.Y1 = i;
a.X2 = canGraph.Width;
a.Y2 = a.Y1;
a.Stroke = System.Windows.Media.Brushes.Black;
a.StrokeThickness = 0.5;
canGraph.Children.Add(a);
Line b = new Line();
b.X1 = i;
b.Y1 = 0;
b.X2 = i;
b.Y2 = canGraph.Height;
b.Stroke = System.Windows.Media.Brushes.Black;
b.StrokeThickness = 0.5;
canGraph.Children.Add(b);
if (i % 50 == 0)
{
a.StrokeThickness = 1;
b.StrokeThickness = 1;
}
if (i == 200)
{
a.StrokeThickness = 2;
b.StrokeThickness = 2;
}
}
This should get you started. Add event handler(s) to your main axis and canGraph -
...
if (i == 200)
{
a.StrokeThickness = 2;
b.StrokeThickness = 2;
a.MouseLeftButtonDown += A_MouseLeftButtonDown;
}
}
canGraph.MouseLeftButtonUp += CanGraph_MouseLeftButtonUp;
canGraph.MouseMove += CanGraph_MouseMove;
Add following methods -
Line _selectedAxis = null;
private void CanGraph_MouseMove(object sender, MouseEventArgs e)
{
if (_selectedAxis != null)
{
var line = _selectedAxis;
var pos = e.GetPosition(line);
textBlock.Text = $"({pos.X}, {pos.Y})";
line.Y1 = pos.Y;
line.Y2 = pos.Y;
}
}
private void CanGraph_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_selectedAxis = null;
}
private void A_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var line = sender as Line;
_selectedAxis = line;
}
Now hold you main horizontal axis and drag it.
You can do the same for vertical axis as well.
For Zooming
Initialize canGraph.RenderTransform with ScaleTransform and subscribe to MouseWheel event. Note RenderTransformOrigin is set to (0.5, 0.5) to zoom from center instead of top left (default) -
canGraph.RenderTransformOrigin = new Point(0.5, 0.5);
canGraph.RenderTransform = new ScaleTransform();
canGraph.MouseWheel += CanGraph_MouseWheel;
And the function -
private void CanGraph_MouseWheel(object sender, MouseWheelEventArgs e)
{
var transform = canGraph.RenderTransform as ScaleTransform;
var factor = transform.ScaleX;
factor += (e.Delta > 0 ? 1 : (factor == 1 ? 0 : -1));
transform.ScaleX = factor;
transform.ScaleY = factor;
}
I'm guessing you have added Line type object to draw axes, then gave it to window content.
Then just add events, like MouseLeftButtonDown event, or MouseMove event.Add appropriate methods.
Change your object positions on MouseMove event, like:
(For a certain line)
private void MouseMoveMethod(object sender, MouseEventArgs e)
{
var obj = sender as Line;
obj.X1 = e.GetPosition(this).X; //Line start x coordinate
obj.Y1 = e.GetPosition(this).Y; //Line start y coordinate
...
}

MS Chart - updating X axis tick values at run time in line chart

My requirement is in my line graph( which is developed with c# MS Chart), I
always need to display 10 points(samples) at a time. The xaxis has interval value 1.
Initially the Xaxis tick values are (1,2,3,4,5,6,7,8,9,10), After 1 second of time interval, I
have to plot 10 points(samples) starts from 2nd point(i.e. I have to skip 1st
point).Now I need to update the xaxis tick values also , it should be starts from
2,now the xaxis tick values should be like 2,3,4,5,6,7,8,9,10,11). Likewise
After every second the starting value of x axis
tick needs to be increased by 1.
How to update Xaxis tick value in the chart dynamically ?
I am using below code
private void Form1_Load(object sender, EventArgs e)
{
loadCsvFile("C:\\mydata.csv");
this.components = new System.ComponentModel.Container();
System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));
this.timer1 = new System.Windows.Forms.Timer(this.components);
chart = new System.Windows.Forms.DataVisualization.Charting.Chart();
chart.Location = new System.Drawing.Point(1, 1);
chart.Size = new System.Drawing.Size(700, 700);
// Add a chartarea called "draw", add axes to it and color the area black
chart.ChartAreas.Add("draw");
numofSamples = 10;
chart.ChartAreas["draw"].AxisX.Minimum = 1;
chart.ChartAreas["draw"].AxisX.Maximum = 10;
chart.ChartAreas["draw"].AxisX.Interval = 1;
chart.ChartAreas["draw"].AxisX.Title = "X Axis";
chart.ChartAreas["draw"].AxisX.MajorGrid.LineColor = System.Drawing.Color.Black;
chart.ChartAreas["draw"].AxisX.MajorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Dash;
chart.ChartAreas["draw"].AxisY.Minimum = 0;
chart.ChartAreas["draw"].AxisY.Maximum = 1000;
chart.ChartAreas["draw"].AxisY.Interval = 250;
chart.ChartAreas["draw"].AxisY.Title = "Y Axis";
chart.ChartAreas["draw"].AxisY.MajorGrid.LineColor = Color.Black;
chart.ChartAreas["draw"].AxisY.MajorGrid.LineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Dash;
chart.ChartAreas["draw"].BackColor = Color.White;
// Create a new function series
chart.Series.Add("Tags");
// Set the type to line
chart.Series["Tags"].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
// Color the line of the graph light green and give it a thickness of 3
chart.Series["Tags"].Color = Color.LightGreen;
chart.Series["Tags"].BorderWidth = 3;
chart.Series["Tags"].MarkerStyle = MarkerStyle.Circle;
chart.Series["Tags"].MarkerSize = 10;
chart.Legends.Add("MyLegend");
chart.Legends["MyLegend"].BorderColor = Color.Tomato; // I like tomato juice!
Controls.Add(this.chart);
// hook up timer event
this.timer1.Interval = 1000;
this.timer1.Tick += new System.EventHandler(this.timer1_Tick);
timer1.Start();
}
public void loadCsvFile(string filePath)
{
var reader = new StreamReader(File.OpenRead(filePath));
while (!reader.EndOfStream)
{
List<string> listA = new List<string>();
string line = reader.ReadLine();
mList.Add(line );
}
}
int i = 0;
int n = 0;
private void timer1_Tick(object sender, EventArgs e)
{
if (n > 20)
n = 0;
int j=0;
chart.Series["Tags"].Points.Clear();
for (i=n; i < mList.Count; i++)
{
string l =mList[i];
chart.Series["Tags"].Points.AddY(l);
j++;
if (j == 10)
break;
}
n++;
chart.Update();
}
List<List<string>> mList = new List<List<string>>();

Drawing lines in code using C# and WPF

I'm trying to create a digital clock display using 7 segment displays. I can draw lines in XAML by using code like this:
<Line Name="line7" Stroke="Black" StrokeThickness="4" X1="10" X2="40" Y1="70" Y2="70" Margin="101,-11,362,250" />
But when I try to do it in code(from MainWindow()), it doesn't work:
Line line = new Line();
Thickness thickness = new Thickness(101,-11,362,250);
line.Margin = thickness;
line.Visibility = System.Windows.Visibility.Visible;
line.StrokeThickness = 4;
line.Stroke = System.Windows.Media.Brushes.Black;
line.X1 = 10;
line.X2 = 40;
line.Y1 = 70;
line.Y2 = 70;
The idea is I can draw 7 lines, then toggle their visibility as required for different numbers. I'm sure this can be done many ways, but why can't I draw lines in code like this?
Is that your entire drawing code? If so, you need to add the line object to your surface. If you're using a Canvas for example:
myCanvas.Children.Add(line);
This will add your line to your canvas. At the moment, you're just creating the line but not putting it anywhere.
You can find more information on drawing in WPF on this MSDN page.
public class Cls_Barriere
{
// animazione periferica
public static void LineAnimation(Line _line,String _colore)
{
Storyboard result = new Storyboard();
Duration duration = new Duration(TimeSpan.FromSeconds(2));
ColorAnimation animation = new ColorAnimation();
animation.RepeatBehavior = RepeatBehavior.Forever;
animation.Duration = duration;
switch (_colore.ToUpper())
{
case "RED":
animation.From = Colors.Red;
break;
case "ORANGE":
animation.From = Colors.Orange;
break;
case "YELLOW":
animation.From = Colors.Yellow;
break;
case "GRAY":
animation.From = Colors.DarkGray;
break;
default:
animation.From = Colors.Green;
break;
}
animation.To = Colors.Gray;
Storyboard.SetTarget(animation, _line);
Storyboard.SetTargetProperty(animation, new PropertyPath("(Line.Stroke).(SolidColorBrush.Color)"));
result.Children.Add(animation);
result.Begin();
}
}
//***************************************************************************
public partial class MainPage : UserControl
{
public Line _line;
public MainPage()
{
InitializeComponent();
Canvas.MouseLeftButtonDown += Canvas_MouseLeftButtonDown;
Canvas.MouseLeftButtonUp += Canvas_MouseLeftButtonUp;
}
void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_line.X2 = e.GetPosition(this.Canvas).X;
_line.Y2 = e.GetPosition(this.Canvas).Y;
_line.Loaded += _line_Loaded;
Canvas.Children.Add(_line);
}
void _line_Loaded(object sender, RoutedEventArgs e)
{
Cls_Barriere.LineAnimation(sender as Line, "RED");
}
void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_line = new Line();
_line.Stroke = new SolidColorBrush(Colors.White);
_line.StrokeThickness = 5;
_line.StrokeStartLineCap = PenLineCap.Round;
_line.StrokeEndLineCap = PenLineCap.Round;
_line.StrokeDashCap = PenLineCap.Round;
_line.X1 = e.GetPosition(this.Canvas).X;
_line.Y1= e.GetPosition(this.Canvas).Y;
}

Categories