It won't change the position, the position is fixed at runtime even though i change the value 50 below:
System.Windows.Shapes.Rectangle myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
here are the 2 solutions for your problem
1) with a canvas
var myRectangle = new System.Windows.Shapes.Rectangle();
var mainCanvas = new Canvas();
mainGrid.Children.Add(mainCanvas);
mainCanvas.Children.Add(myRectangle);
Canvas.SetLeft(myRectangle, 50);
Canvas.SetTop(myRectangle, 50);
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
2) only with your grid
var myRectangle = new System.Windows.Shapes.Rectangle();
mainGrid.Children.Add(myRectangle);
myRectangle.Margin = new Thickness(50, 50, 0, 0);
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.VerticalAlignment = VerticalAlignment.Top;
myRectangle.Height = 100;
myRectangle.Width = 100;
myRectangle.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
Related
I have an application that breaks the image when the screen size changes
Below is the screen
Where can the mistake be? What can cause this situation? I do not even know where to look because it is not a permanent error only once and once is gone
This is how I load items with a line and number per view:
<ItemsControl ItemsSource="{Binding ConnectorsGridsHorizontal, Mode=TwoWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Function drawing 1 element:
public Grid DrawConnector1(Thickness margin, int nr, bool rotate, bool rightSide)
{
Grid grid = new Grid();
grid.Margin = margin;
grid.HorizontalAlignment = HorizontalAlignment.Left;
grid.Width = S10;
grid.Height = 128;
grid.VerticalAlignment = System.Windows.VerticalAlignment.Center;
Line line = new Line();
line.X1 = S10HALF;
line.X2 = S10HALF;
line.Y1 = 0;
line.Y2 = 128;
line.StrokeDashArray = new System.Windows.Media.DoubleCollection() { 4, 2, 1, 2 };
line.Stroke = System.Windows.Media.Brushes.Green;
line.StrokeThickness = 4;
grid.Children.Add(line);
Grid inGrid = new Grid();
inGrid.Width = S10;
inGrid.Height = HF;
inGrid.Background = System.Windows.Media.Brushes.Black;
grid.Children.Add(inGrid);
Border br = new Border();
br.BorderThickness = new Thickness(0);
br.CornerRadius = new CornerRadius(10);
br.Background = System.Windows.Media.Brushes.White;
br.Margin = new Thickness(-10, -10, -10, -10);
br.Width = 20;
br.Height = 20;
br.VerticalAlignment = rightSide ? VerticalAlignment.Top : VerticalAlignment.Bottom;
br.RenderSize = new System.Windows.Size(br.ActualWidth + 1, br.ActualHeight + 1);
if (SelectedConnector + 1 == nr) br.Background = System.Windows.Media.Brushes.Green;
else br.Background = System.Windows.Media.Brushes.White;
if (DisableGreenMark) br.Background = System.Windows.Media.Brushes.White;
TextBlock txtBlock = new TextBlock();
txtBlock.FontSize = 16;
txtBlock.Text = nr.ToString();
txtBlock.Foreground = new SolidColorBrush(Colors.Black);
txtBlock.VerticalAlignment = VerticalAlignment.Center;
txtBlock.HorizontalAlignment = HorizontalAlignment.Center;
br.Child = txtBlock;
grid.Children.Add(br);
Binding b = new Binding("S60_20");
b.Mode = BindingMode.Default;
grid.SetBinding(Canvas.TopProperty, b);
return grid;
}
GIF:
I'm also using SnapsToDevicePixels="true"
To start with, try doing this:
br.HorizontalAlignment = HorizontalAlignment.Stretch;
br.Margin = new Thickness(0, 0, 0, 0);
Do not use margin with a negative value
Stretch will provide you with an element extension
Side cut is probably caused by too narrow a strip for the element:
You have:
grid.Width = S10;
line.X1 = S10HALF;
line.X2 = S10HALF;
This indicates that you have the width set to probably 10
and Here you have set to 20
br.Width = 20;
br.Height = 20;
I also suggest changing here:
grid.Width = S10 * 2;
line.X1 = S10HALF * 2;
line.X2 = S10HALF * 2;
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 want to animate retangle with using AnimationPoint.
How can i do it?
P.S.
I searhed in google, but did not find what i need.
I try this :
private void drawRect()
{
var d = new Grid();
var moveTranc = new TranslateTransform() { X = 1,Y = 1 };
var e2 = new Rectangle()
{
Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 200, 0)),
RenderTransform = moveTranc,
RadiusX = 100,
RadiusY = 100,
RenderTransformOrigin = new Point(0.5f,0.5f),
};
var pointAnimation = new PointAnimation()
{
Duration = new Duration(TimeSpan.FromSeconds(2)),
From = new Point(e2.RadiusX,e2.RadiusY),
To = new Point(450,450)
};
var storyBoard = new Storyboard();
storyBoard.RepeatBehavior = RepeatBehavior.Forever;
storyBoard.Children.Add(pointAnimation);
Storyboard.SetTarget(pointAnimation, e2);
Storyboard.SetTargetProperty(pointAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X).(TranslateTransform.Y)"));
d.Children.Add(e2);
ContentPanel.Children.Add(d);
storyBoard.Begin();
}
I found any variant of animating rectangle with using double animation
Rectangle myRectangle;
Storyboard sb;
//creating rectangle
myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// Create the transform
TranslateTransform moveTransform = new TranslateTransform();
moveTransform.X = 0;
moveTransform.Y = 0;
myRectangle.RenderTransform = moveTransform;
// Add the rectangle to the tree.
if (!LayoutRoot.Children.Contains(myRectangle)) LayoutRoot.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(1.0));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimationX);
Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
Storyboard.SetTargetProperty(myDoubleAnimationX, new PropertyPath("X"));
DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
sb.Children.Add(myDoubleAnimationY);
Storyboard.SetTarget(myDoubleAnimationY, moveTransform);
Storyboard.SetTargetProperty(myDoubleAnimationY, new PropertyPath("Y"));
myDoubleAnimationX.To = 0;
myDoubleAnimationX.From = 340;
myDoubleAnimationY.To = 0;
myDoubleAnimationY.From = 340;
// Make the Storyboard a resource.
if (!LayoutRoot.Resources.Contains("unique_id")) LayoutRoot.Resources.Add("unique_id", sb);
sb.Begin();
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!
I have two UIElements(i.e. rectangles) in Canvas and their coordinates. How can I connect them with arc in code behind?
No need to get an exact hit on the rectangles (or other objects): make sure the Z ordering is correct. arc.SetValue(Canvas.ZIndex, -1) will push it to the background. If you want a perpendicular hit, you'll need to break out the algebra :/
For the arc: (see http://msdn.microsoft.com/en-us/library/ms751808.aspx), it needs to be contained in a PathFigure.
Edit: this shows two connected rectangles. The line simple runs between the two centers. The arc starts on one center (the pathFigure startpoint), first argument is the center of the second object.
r1 = new Rectangle();
r1.Margin = new Thickness(50, 50, 0, 0);
r1.VerticalAlignment = System.Windows.VerticalAlignment.Top;
r1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
r1.Height = 50;
r1.Width= 50;
r1.Fill = new SolidColorBrush(Colors.Red);
r2 = new Rectangle();
r2.Width = 50;
r2.Height = 50;
r2.Fill = new SolidColorBrush(Colors.Blue);
r2.Margin = new Thickness(350, 450, 0, 0);
r2.VerticalAlignment = System.Windows.VerticalAlignment.Top;
r2.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
l = new Line();
l.X1 = 75;
l.Y1 = 75;
l.X2 = 375;
l.Y2 = 475;
l.Fill = new SolidColorBrush(Colors.Purple);
l.Stroke = new SolidColorBrush(Colors.Purple);
l.StrokeThickness = 2;
l.SetValue(Canvas.ZIndexProperty, -1);
PathGeometry myPathGeometry = new PathGeometry();
// Create a figure.
PathFigure pathFigure1 = new PathFigure();
pathFigure1.StartPoint = new Point(75, 75);
pathFigure1.Segments.Add(
new ArcSegment(
new Point(375, 475),
new Size(50, 50),
45,
true, /* IsLargeArc */
SweepDirection.Clockwise,
true /* IsStroked */ ));
myPathGeometry.Figures.Add(pathFigure1);
// Display the PathGeometry.
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;
myPath.SetValue(Canvas.ZIndexProperty, -1);
LayoutRoot.Children.Add(r1);
LayoutRoot.Children.Add(r2);
LayoutRoot.Children.Add(l);
LayoutRoot.Children.Add(myPath);