Using wpf to animate ellipses consequently - c#

I have to implement a road junction simple program. The junction's image is set as the Background Property of WPF Grid and I have ArrayLists inside a Queue to represent the color of each car, origin street and destination street.
Now, I need to animate the cars as moving ellipses and I need each car to start its movement after the privious car gets out of the screen.
I am using the following code but it only animates first car.
What is the solution?
private void button1_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < queue.Count; i++)
{
ArrayList car = (ArrayList)queue[i];
int id = Convert.ToInt32(car[0]);
int color = Convert.ToInt32(car[1]);
int from= Convert.ToInt32(car[2]);
int to = Convert.ToInt32(car[3]);
Ellipse myEllipse = new Ellipse();
if (color == 0)
{
myEllipse.Stroke = System.Windows.Media.Brushes.Green;
myEllipse.Fill = System.Windows.Media.Brushes.Green;
}
else {
myEllipse.Stroke = System.Windows.Media.Brushes.Blue;
myEllipse.Fill = System.Windows.Media.Brushes.Blue;
}
myEllipse.HorizontalAlignment = HorizontalAlignment.Left;
myEllipse.VerticalAlignment = VerticalAlignment.Center;
myEllipse.Width = 45;
myEllipse.Height = 45;
myGrid.Children.Add(myEllipse);
DoubleAnimation da = new DoubleAnimation();
da.From = from;
da.To = to;
da.Duration = new Duration(TimeSpan.FromSeconds(1));
TranslateTransform tt = new TranslateTransform();
myEllipse.RenderTransform = tt;
tt.BeginAnimation(TranslateTransform.XProperty, da);
}
}

In WPF animation is is organized in other way.
I would suggest you to look at Storyboard. Hope this will help you.

Related

How to create Mouse event on Rectangle[X] after create Rectangle[X]

my code for crate rectangle :
Rectangle[] myRectangle = new Rectangle[100];
for(int i=1;i<=100;i++)
{
myRectangle[i] = new Rectangle();
// another code for create myRectangle[i]
}
When MouseEnter Rectangle[X] and I want to do something.What will i do?
Thank you.
Putting this here;
Rectangle[] myRectangle = new Rectangle[100];
for(int i = 0; i < 100; i++)
{
myRectangle[i] = new Rectangle();
myRectangle[i].Tag = i;
myRectangle[i].MouseEnter += MouseEnter;
}
private void MouseEnter(object sender, MouseEventArgs e)
{
Rectangle rect = (Rectangle)sender;
int idx = (int)rect.Tag;
MessageBox.Show(idx.ToString());
}

How can i change my chart to look like column gradient fill style?

This is what I did in the constructor:
drawPoints.Clear();
paintToCalaculate = false;
chart1.Invalidate();
Series S0 = chart1.Series[0];
S0.ChartType = SeriesChartType.Column;
S0.IsValueShownAsLabel = true;
chart1.Series["Series1"]["PixelPointWidth"] = "0.6";
chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
S0.Color = Color.Transparent;
S0.LegendText = "";
area.BackColor = Color.White;
area.BackSecondaryColor = Color.LightSteelBlue;
area.BackGradientStyle = GradientStyle.DiagonalRight;
area = chart1.ChartAreas[0];
chart1.Series["Series1"].Points.AddXY(10, 10);
area.AxisX.Minimum = 1;
area.AxisX.Maximum = 30;
area.AxisY.Minimum = 1;
area.AxisY.Maximum = 120;
area.AxisX.MajorGrid.LineColor = Color.LightSlateGray;
area.AxisY.MajorGrid.LineColor = Color.LightSlateGray;
The problem is that I'm using the chart paint event to draw points and lines:
Pen pen = new Pen(Color.Blue, 2.5f);
SolidBrush myBrush = new SolidBrush(Color.Red);
private void chart1_Paint(object sender, PaintEventArgs e)
{
if (paintToCalaculate)
{
Series s = chart1.Series.FindByName("dummy");
if (s == null) s = chart1.Series.Add("dummy");
drawPoints.Clear();
s.Points.Clear();
foreach (PointF p in valuePoints)
{
s.Points.AddXY(p.X, p.Y);
DataPoint pt = s.Points[0];
double x = chart1.ChartAreas[0].AxisX.ValueToPixelPosition(pt.XValue);
double y = chart1.ChartAreas[0].AxisY.ValueToPixelPosition(pt.YValues[0]);
drawPoints.Add(new Point((int)x, (int)y));
s.Points.Clear();
}
paintToCalaculate = false;
chart1.Series.Remove(s);
}
foreach (Point p in drawPoints)
{
e.Graphics.FillEllipse(Brushes.Red, p.X - 2, p.Y - 2, 4, 4);
}
if (drawPoints.Count > 1)
{
e.Graphics.DrawLines(pen, drawPoints.ToArray());
}
}
I wanted it to look like this style:
It should look like in the example. But since I'm using the paint event maybe it's not possible this way.
Edit tried this solution i added a new chart control for the test in the form1 designer called chart2. Then in the constructor i did:
chart2.Titles.Add(("Introducing Chart Controls"));
ChartArea chartarea2 = new ChartArea("Main");
chart2.ChartAreas.Add(chartarea2);
Series seriesColumns = new Series("RandomColumns");
seriesColumns.Color = Color.Blue;
chart2.Series.Add(seriesColumns);
Random rnd = new Random(10);
for (int i = 0; i < 10; i++)
{
seriesColumns.Points.Add((rnd.Next(100)));
}
DataPoint dp = new DataPoint(seriesColumns);
dp.Color = Color.Red;
dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
seriesColumns.Points.Add(dp);
But no fade in/out color change. Nothing happen.
This is how chart2 look like:
To get the gradient effect you don't necessarily have to use the Paint event. The DataPoint has the BackGradientStyle property that will generate the gradient automatically for you. It will use the colour of the DataPoint. You set it like in the sample below:
var dp = new DataPoint(8D, 12D);
dp.Color = Color.Red;
dp.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.LeftRight;
var series = this.chart1.Series[0];
series.Points.Add(dp);
Here the gradient is fading out. If you want it to pass into another color set the BackSecondaryColor property.
dp.BackSecondaryColor = Color.Green;

How do I draw polygon?( in C# WPF project)

Click the points, I want to make from the polygon area on image.
myPolygon = new Polygon();
myPolygon.Stroke = Brushes.Black;
myPolygon.Fill = Brushes.LightYellow;
myPolygon.StrokeThickness = 2;
myPolygon.HorizontalAlignment = HorizontalAlignment.Left;
myPolygon.VerticalAlignment = VerticalAlignment.Center;
myPolygon.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(Polygon_MouseDown);
myPolygon.PreviewMouseLeftButtonUp += new MouseButtonEventHandler(Polygon_MouseUp);
private void Polygon_MouseDown(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(image);
myPolygon.Points = new PointCollection() { new Point(p.X,p.Y) };
RootCanvas.Children.Add(myPolygon);
} //MouseClick Event BUT, did not click behavior.. I want draw a line along the points.
How can I do...?
We can draw Polygon using WPF canvas which is a collection of children objects.
Polygon p = new Polygon();
p.Stroke = Brushes.Black;
p.Fill = Brushes.LightBlue;
p.StrokeThickness = 1;
p.HorizontalAlignment = HorizontalAlignment.Left;
p.VerticalAlignment = VerticalAlignment.Center;
p.Points = new PointCollection() { new Point(10, 10), new Point(100, 100), new Point(200, 200) };
freeCanvas.Children.Add(p);
For more information,. please refer the following urls
http://www.codeproject.com/Articles/128705/WPF-rounded-corners-polygon
http://classicalprogrammer.wikidot.com/draw-dynamic-polygons-in-wpf
http://msdn.microsoft.com/en-us/library/ms747393.aspx

Getting name for a WPF shape from variable

I want to initialize and show a ellipse (WPF shape) in a function.The name of the ellipse should be given to the function as a parameter.
Is there a possibility to do something like that ?
Edit:
The following is given:
private void A1_Click(object sender, RoutedEventArgs e)
{
textBox1.Text = "Feld A1 gedrückt";
//Spielstein setzen
//Rêgeln überprüfen
myEllipse = new Ellipse();
myEllipse.Fill = System.Windows.Media.Brushes.Black;
myEllipse.HorizontalAlignment = HorizontalAlignment.Left;
myEllipse.VerticalAlignment = VerticalAlignment.Top;
myEllipse.Margin = new Thickness(2, 2, 0, 0);
myEllipse.Width = 45;
myEllipse.Height = 45;
grid3.Children.Add(myEllipse);
A1.IsHitTestVisible = false;
}
What I want to do is to get the name("myEllipse") from a string variable. For example:
string name = 'myEllipse';
name = newEllipse();
myEllipse.Fill = System.Windows.Media.Brushes.Black;
I take it from your code you are you trying to create multiple instances of Ellipse which you can then recall and modify when needed? If so, one way to do this is to create a List or Dictionary and add the ellipses you create to them, which you can then recall when needed through the index (if it's a list) or key (if it's a dictionary).
List<Ellipse> myEllipses = new List<Ellipse>();
Private void A1_Click(object sender, RoutedEventArgs e)
{
var myEllipse = new Ellipse();
myEllipses.Add(myEllipse);
...
}

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