I have problem with rotate transform in my analog clock.
for (int i = 0; i <= 12; i++)
{
Ellipse teckaa = new Ellipse();
teckaa.Height = 30;
teckaa.Width = 30;
teckaa.Stroke = Brushes.Black;
teckaa.Fill = Brushes.Black;
canvas.Children.Add(teckaa);
Canvas.SetTop(teckaa, 25);
Canvas.SetLeft(teckaa, 215);
RotateTransform otoceni = new RotateTransform(i*30, 230, 230);
canvas.RenderTransform = otoceni;
}
I have this code for hour points, but this is moving only with one point. Is there any way how to change name of the ellipse in cycle for()?
Apply the Transform to the individual hour markers and not the the entire Canvas:
for (int i = 0; i <= 12; i++)
{
Ellipse teckaa = new Ellipse();
teckaa.Height = 30;
teckaa.Width = 30;
teckaa.Stroke = Brushes.Black;
teckaa.Fill = Brushes.Black;
canvas.Children.Add(teckaa);
Canvas.SetTop(teckaa, 25);
Canvas.SetLeft(teckaa, 215);
RotateTransform otoceni = new RotateTransform(i*30, 230, 230);
//canvas.RenderTransform = otoceni;
teckaa.RenderTransform = otoceni;
}
And see Petzold for a really cool all XAML clock.
Related
I have a code that adds new elements to a grid:
for (int i = 1; i < 20; i++)
{
Ellipse el = new Ellipse();
el.Height = 200;
el.Width = 200;
el.StrokeThickness = 5;
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
el.Fill = mySolidColorBrush;
ViewGrid.ColumnDefinitions.Add(new ColumnDefinition());
ViewGrid.RowDefinitions.Add(new RowDefinition());
Grid.SetColumn(el, i);
ViewGrid.Children.Add(el);
}
My problem is that I want to start a new Row as soon as my current Column is full. As the window can be resized, I never know how many Elements can fit into one Column, so I also can't just assign a new Row when adding them.
Is there any way to make the Grid (or any other type of "table") handle this?
Change Your Grid into GridView
<GridView Name="ViewGrid"/>
Use the following code to put items in it.
for (int i = 1; i < 20; i++)
{
Ellipse el = new Ellipse();
el.Height = 200;
el.Width = 200;
el.StrokeThickness = 5;
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
el.Fill = mySolidColorBrush;
ViewGrid.Items.Add(el);
}
I have a robot that outputs x,y,z position in space. My problem is that I can only find 2D plot in windows forms using chart.
I want to plot my robot in 3D space. Any tools I can use??
Something similar to this:
I need a free software solution for this
EDIT:
My 2D graph atm:
chart1.ChartAreas[0].AxisX.Minimum = 0;
chart1.ChartAreas[0].AxisX.Maximum = 12;
chart1.ChartAreas[0].AxisX.Interval = 1;
chart1.ChartAreas[0].AxisY.Minimum = 0;
chart1.ChartAreas[0].AxisY.Maximum = 7;
chart1.ChartAreas[0].AxisY.Interval = 1;
//example
posicao_atual_master.X = 10;
posicao_atual_master.Y = 5;
chart1.Series[0].Points.Clear();
chart1.Series[0].Points.AddXY(posicao_atual_master.X, posicao_atual_master.Y);
DESIGNER:
// chart1
//
chartArea1.AxisX.MajorGrid.Enabled = false;
chartArea1.AxisX.MajorTickMark.Enabled = false;
chartArea1.AxisY.MajorGrid.Enabled = false;
chartArea1.AxisY.MajorTickMark.Enabled = false;
chartArea1.Name = "ChartArea1";
chartArea1.Position.Auto = false;
chartArea1.Position.Height = 100F;
chartArea1.Position.Width = 90F;
this.chart1.ChartAreas.Add(chartArea1);
legend1.BackColor = System.Drawing.Color.Transparent;
legend1.BorderColor = System.Drawing.Color.Transparent;
legend1.Font = new System.Drawing.Font("Microsoft Sans Serif", 4F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Millimeter, ((byte)(1)), true);
legend1.IsTextAutoFit = false;
legend1.Name = "legen";
legend1.TableStyle = System.Windows.Forms.DataVisualization.Charting.LegendTableStyle.Tall;
this.chart1.Legends.Add(legend1);
this.chart1.Location = new System.Drawing.Point(543, 49);
this.chart1.Name = "chart1";
series1.ChartArea = "ChartArea1";
series1.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Point;
series1.Color = System.Drawing.Color.Transparent;
series1.Legend = "legen";
series1.MarkerBorderColor = System.Drawing.Color.Black;
series1.MarkerImage = "C:\\Users\\Tiago\\Desktop\\CODIGO_TESE_FINAL_BACKUP1408_BOM\\C# - AR.Drone SDK\\AR.Dron" +
"e\\icone_drone_verde.png";
series1.MarkerImageTransparentColor = System.Drawing.Color.Red;
series1.Name = "Master";
series2.ChartArea = "ChartArea1";
series2.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Point;
series2.Legend = "legen";
series2.MarkerImage = "C:\\Users\\Tiago\\Desktop\\CODIGO_TESE_FINAL_BACKUP1408_BOM\\Fotos dos Relatórios\\icon" +
"e_drone_vermelho.png";
series2.Name = "Slave";
this.chart1.Series.Add(series1);
this.chart1.Series.Add(series2);
this.chart1.Size = new System.Drawing.Size(1159, 359);
this.chart1.TabIndex = 7;
this.chart1.Text = "chart1";
this.chart1.MouseDown += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseDown);
this.chart1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseMove);
this.chart1.MouseUp += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseUp);
EDIT: IMAGE
You are correct, there is no proper way to use a real z-axis in the Chart control.
It does have a 3D style though, which can be used for a reasonably nice ChartArea.
You will have to do the painting of the graph in code though, as the built-in z-axis only support as many, or rather as few discret values as you have Series in the chart.
This is ok for some things, like a color cube, but when you need arbitryry data values it just won't do.
Instead you can do this:
Store the z-value of each DataPoint along with the Y-value in the YValues array.
For this you need a ChartType that supports several YValues
Code one of the xxxPaint events to draw the graphics
For this you need a conversion from values to pixels
First we prepare the chart. Many details are up to your needs;
void prepare3dChart(Chart chart, ChartArea ca)
{
ca.Area3DStyle.Enable3D = true; // set the chartarea to 3D!
ca.AxisX.Minimum = -250;
ca.AxisY.Minimum = -250;
ca.AxisX.Maximum = 250;
ca.AxisY.Maximum = 250;
ca.AxisX.Interval = 50;
ca.AxisY.Interval = 50;
ca.AxisX.Title = "X-Achse";
ca.AxisY.Title = "Y-Achse";
ca.AxisX.MajorGrid.Interval = 250;
ca.AxisY.MajorGrid.Interval = 250;
ca.AxisX.MinorGrid.Enabled = true;
ca.AxisY.MinorGrid.Enabled = true;
ca.AxisX.MinorGrid.Interval = 50;
ca.AxisY.MinorGrid.Interval = 50;
ca.AxisX.MinorGrid.LineColor = Color.LightSlateGray;
ca.AxisY.MinorGrid.LineColor = Color.LightSlateGray;
// we add two series:
chart.Series.Clear();
for (int i = 0; i < 2; i++)
{
Series s = chart.Series.Add("S" + i.ToString("00"));
s.ChartType = SeriesChartType.Bubble; // this ChartType has a YValue array
s.MarkerStyle = MarkerStyle.Circle;
s["PixelPointWidth"] = "100";
s["PixelPointGapDepth"] = "1";
}
chart.ApplyPaletteColors();
addTestData(chart);
}
Here we add some test data:
void addTestData(Chart chart)
{
Random rnd = new Random(9);
for (int i = 0; i < 100; i++)
{
double x = Math.Cos(i/10f )*88 + rnd.Next(5);
double y = Math.Sin(i/11f)*88 + rnd.Next(5);
double z = Math.Sqrt(i*2f)*88 + rnd.Next(5);
AddXY3d( chart.Series[0], x, y, z);
AddXY3d( chart.Series[1], x-111, y-222, z);
}
}
The DataPoints are added with this routine:
int AddXY3d(Series s, double xVal, double yVal, double zVal)
{
int p = s.Points.AddXY(xVal, yVal, zVal);
// the DataPoint are transparent to the regular chart drawing:
s.Points[p].Color = Color.Transparent;
return p;
}
If this Paint event we draw the data as we like it. Here are either Lines or Points:
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
Chart chart = sender as Chart;
if (chart .Series.Count < 1) return;
if (chart .Series[0].Points.Count < 1) return;
ChartArea ca = chart .ChartAreas[0];
e.ChartGraphics.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
List<List<PointF>> data = new List<List<PointF>>();
foreach (Series s in chart .Series)
data.Add(GetPointsFrom3D(ca, s, s.Points.ToList(), e.ChartGraphics));
renderLines(data, e.ChartGraphics.Graphics, chart , true); // pick one!
renderPoints(data, e.ChartGraphics.Graphics, chart , 6); // pick one!
}
The coodinates are calculated using axis methods:
List<PointF> GetPointsFrom3D(ChartArea ca, Series s,
List<DataPoint> dPoints, ChartGraphics cg)
{
var p3t = dPoints.Select(x => new Point3D((float)ca.AxisX.ValueToPosition(x.XValue),
(float)ca.AxisY.ValueToPosition(x.YValues[0]),
(float)ca.AxisY.ValueToPosition(x.YValues[1]))).ToArray();
ca.TransformPoints(p3t.ToArray());
return p3t.Select(x => cg.GetAbsolutePoint(new PointF(x.X, x.Y))).ToList();
}
The actual drawing happens in these routines; one draws lines the other dots:
void renderLines(List<List<PointF>> data, Graphics graphics, Chart chart, bool curves)
{
for (int i = 0; i < chart.Series.Count; i++)
{
if (data[i].Count > 1)
using (Pen pen = new Pen(Color.FromArgb(64, chart.Series[i].Color), 2.5f))
if (curves) graphics.DrawCurve(pen, data[i].ToArray());
else graphics.DrawLines(pen, data[i].ToArray());
}
}
void renderPoints(List<List<PointF>> data, Graphics graphics, Chart chart, float width)
{
for (int s = 0; s < chart.Series.Count; s++)
{
Series S = chart.Series[s];
for (int p = 0; p < S.Points.Count; p++)
using (SolidBrush brush = new SolidBrush(Color.FromArgb(64, S.Color)))
graphics.FillEllipse(brush, data[s][p].X-width/2,
data[s][p].Y-width/2,width, width);
}
}
Other drawing routines like meshes or areas can be coded just as well.. Simply add new routines using user GDI+ methods like DrawCurve or FillPolygon or maybe even DrawImage..
You can set the ChartArea.Area3DStyle.Rotation and the ChartArea.Area3DStyle.Inclination for different views, as can be seen in the animation.
Edit I have update the PostPaint method to minimze dependencies.
I want to draw a signal image as shown below at runtime on canvas.
sample code which I used to draw this signal is as below.
Ellipse Ellipse1 = new Ellipse();
Ellipse Ellipse2 = new Ellipse();
Ellipse Ellipse3 = new Ellipse();
Line lineV = new Line();
Line lineH = new Line();
lineV.Stroke = SystemColors.WindowFrameBrush;
lineV.X1 = EndPosition.X;
lineV.Y1 = EndPosition.Y;
lineV.X2 = StartPosition.X;
lineV.Y2 = EndPosition.Y;
SolidColorBrush redBrush = new SolidColorBrush();
redBrush.Color = Colors.Black;
lineV.StrokeThickness = 2;
lineV.Stroke = redBrush;
canvas1.Children.Add(lineV);
lineH.Stroke = SystemColors.WindowFrameBrush;
lineH.X1 = StartPosition.X;
lineH.Y1 = EndPosition.Y;
lineH.X2 = StartPosition.X;
lineH.Y2 = StartPosition.Y;
redBrush.Color = Colors.Black;
lineH.StrokeThickness = 2;
lineH.Stroke = redBrush;
canvas1.Children.Add(lineH);
SolidColorBrush mySolidColorBrush1 = new SolidColorBrush();
mySolidColorBrush1.Color = Colors.Red; //FromArgb(255, 255, 255, 0);
Ellipse1.Fill = mySolidColorBrush1;
Ellipse1.StrokeThickness = 2;
Ellipse1.Stroke = Brushes.Black;
Ellipse1.Width = 30;
Ellipse1.Height = 30;
Ellipse1.Margin = new Thickness(EndPosition.X, EndPosition.Y - 15, EndPosition.X + 50, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse1);
SolidColorBrush mySolidColorBrush2 = new SolidColorBrush();
mySolidColorBrush2.Color = Colors.Green; //FromArgb(255, 255, 255, 0);
Ellipse2.Fill = mySolidColorBrush2;
Ellipse2.StrokeThickness = 2;
Ellipse2.Stroke = Brushes.Black;
Ellipse2.Width = 30;
Ellipse2.Height = 30;
Ellipse2.Margin = new Thickness(EndPosition.X + 30, EndPosition.Y - 15, EndPosition.X + 60, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse2);
SolidColorBrush mySolidColorBrush3 = new SolidColorBrush();
mySolidColorBrush3.Color = Colors.Yellow; // FromArgb(255, 255, 255, 0);
Ellipse3.Fill = mySolidColorBrush3;
Ellipse3.StrokeThickness = 2;
Ellipse3.Stroke = Brushes.Black;
Ellipse3.Width = 30;
Ellipse3.Height = 30;
Ellipse3.Margin = new Thickness(EndPosition.X + 60, EndPosition.Y - 15, EndPosition.X + 150, EndPosition.Y + 50);
canvas1.Children.Add(Ellipse3);
**Now I want the user to be able to interactively move this signal on the canvas on mouse move events.
How can I able to do this ?**
Iam using C# WPF.
If want to implement a canvas to drag elements, a DragCanvas is your choice.
Dragging Elements in a Canvas from Josh Smith and after Dragging Elements in a Canvas from igkutikov that adapt Josh Smith code. There are articles with #mustread category.
With the dragCanvas you can implement a full functionality Dragging Element Canvas, and better adapt to your code. Happy coding!
I make group of rectangles with different opacity value and add these rectangles to Grid in WindowsPhone:
var grid=new Grid();
grid.Width = grid.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = grid.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = grid.Height;
var opacity = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.VerticalAlignment = VerticalAlignment.Center;
rect.HorizontalAlignment = HorizontalAlignment.Center;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
grid.Children.Add(rect);
}
I can see in grid following picture:
After I try to save this group of rectangles to WriteableBitmap and show as Image:
var img=new Image();
var wrBit = new WriteableBitmap(grid, null);
img.Source=wrBit;
And I see picture:
What happend with opacity on top and left edges?
How to correctly save group of Rectangles?
Need to use Canvas instead Grid control for group of rectangles:
var canvas=new Canvas();
canvas.Width = canvas.Height = 200;
var rectanglesCount=55;
var rectangleSizeStep = canvas.Height / rectanglesCount;
var opacityStep = 1.0 / rectanglesCount
var rectangleSize = canvas.Height;
var opacity = 0.0;
var rectMargin = 0.0;
for (int i = 0; i <= rectanglesCount; i++)
{
Rectangle rect = new Rectangle();
rect.Height = rect.Width = rectangleSize;
rect.Margin=new Thickness(rectMargin,rectMargin,0,0);
rectMargin += rectangleSizeStep/2;
rect.Fill = new SolidColorBrush(Colors.Yellow);
rect.Opacity = opacity;
opacity += opacityStep;
rectangleSize -= rectangleSizeStep;
canvas.Children.Add(rect);
}
and save Canvas as WriteableBitmap:
var img=new Image();
var wrBit = new WriteableBitmap(canvas, null);
img.Source=wrBit;
Problem was solved!
So, Basically I'm trying to draw a line between the center of 2 ellipses
And I think this should do it:
Path myPath = new Path();
myPath.Stroke = System.Windows.Media.Brushes.Black;
myPath.StrokeThickness = 4;
myPath.HorizontalAlignment = HorizontalAlignment.Left;
myPath.VerticalAlignment = VerticalAlignment.Center;
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new System.Windows.Point((xQuard * 10) + 100, yQuard * 10);
myEllipseGeometry.RadiusX = 2;
myEllipseGeometry.RadiusY = 2;
myPath.Data = myEllipseGeometry;
GraphPanel.Children.Add(myPath);
//if it's not the first point...
if (prevA != 0.0)
{
Path iLine = new Path();
iLine.Stroke = Brushes.Black;
iLine.StrokeThickness = 4;
iLine.HorizontalAlignment = HorizontalAlignment.Left;
myPath.VerticalAlignment = VerticalAlignment.Center;
LineGeometry iLineGeometry = new LineGeometry();
iLineGeometry.StartPoint = myEllipseGeometry.Center;
iLineGeometry.EndPoint = new System.Windows.Point(prevA, prevB);
iLine.Data = iLineGeometry;
GraphPanel.Children.Add(iLine);
}
//Set the previous point(s)
prevA = (xQuard * 10) + 100;
prevB = yQuard * 10;
Now as you can see, I've set the Line's StartPoint = to the first ellipse start point
And Yet....
Why is the Line's start point in the picture not the center of the point on the left?
I think you mean iLine.VerticalAlignment instead of myPath.VerticalAlignment the second time, right?