I want to add some text on a canvas and decided to use textBlock for that (to set Font etc.)
But I cannot figure out how to rotate it.
I use the following function to add myText on myCanvas:
void text(double x_pos, double y_pos, string myText, double angle, Point rot_cen, Color color1)
{
TextBlock textBlock = new TextBlock()
{
Text = myText,
FontFamily = new FontFamily("Verdana"),
FontSize = 16,
TextAlignment = TextAlignment.Center
};
textBlock.Foreground = new SolidColorBrush(color1);
Canvas.SetLeft(textBlock, x_pos);
Canvas.SetTop(textBlock, y_pos);
textBlock.RenderTransform = new RotateTransform(angle, rot_cen.X, rot_cen.Y);
myCanvas.Children.Add(textBlock);
}
From what I've read rot_cen is a point from (0,0) - which is top left corner to (1,1) - which is bottom right corner. But when i set it to be (0.5,0.5) it still rotates around top left corner. Do I need to update it somehow?
The CenterX and CenterY properties of a RotateTransform use absolute coordinates.
You may want to set RenderTransformOrigin, which uses relative coordinates:
textBlock.RenderTransformOrigin = rot_cen;
textBlock.RenderTransform = new RotateTransform(angle);
Related
I have a canvas with a background image:
var bi = new BitmapImage(new Uri(imgLocFull));
var ib = new ImageBrush(bi) {Stretch = Stretch.UniformToFill};
MyCanvas.Background = ib;
I am overlaying various shapes on the image, and want the position of the shapes relative to the background image to be fixed.
If my application window is resized, the amount of the image that is cropped, horizontally and vertically, changes, and when my shapes are redrawn, they do not appear in the same position on the background image.
How can I determine how much of the image has been cropped (to apply an adjustment factor to the overlaid objects' positions?) Or is there a better way of fixing the location of a shape relative to the background image?
Here is my present drawing code:
var l = new Ellipse();
var scb = new SolidColorBrush();
scb.Color = Color.FromRgb(rCol, gCol, bCol);
l.Fill = scb;
l.StrokeThickness = 0;
l.Width = 3;
l.Height = 3;
Canvas.SetBottom(l, point.Y); // * clipping factor here?
Canvas.SetLeft(l, point.X); // * clipping factor here?
MyCanvas.Children.Add(l);
EDIT: Further Clarification
Here's a concrete example of what I am trying to achieve. My image is an aerial photograph, and I want to mark a particular geographical feature (with, say, an ellipse.)
When the window is resized, the ellipse doesn't stay on the feature, it stays relative to the left and top of the canvas.
I can get it closer to the right place by moving it using a factor (newx = newheight/oldheight * oldx) but this doesn't quite work because of the UniformToFill stretch mode, which sees some of the image clipped off the canvas.
The Top and Left of the Canvas are 'anchored', while the Bottom and Right move when resizing... try setting the Canvas.Top Attached Property instead, along with the Canvas.Left Attached Property as you are:
var l = new Ellipse();
var scb = new SolidColorBrush();
scb.Color = Color.FromRgb(rCol, gCol, bCol);
l.Fill = scb;
l.StrokeThickness = 0;
l.Width = 3;
l.Height = 3;
Canvas.SetTop(l, point.Y); // * clipping factor here?
Canvas.SetLeft(l, point.X); // * clipping factor here?
MyCanvas.Children.Add(l);
UPDATE >>>
You asked Or is there a better way of fixing the location of a shape relative to the background image?
I answered this question, so I don't understand why you would need to do anything else... your objects will not move when the screen in resized *if you only set the Grid.Top and Grid.Left properties.
Im working on flowchart kind of application in asp.net using silverlight.. Im a beginner in Silvelight, Creating the elements (Rectangle,Ellipse,Line.. ) dynamically using SHAPE and LINE Objects in codebehind (c#)
These shapes will be generated dynamically, meaning I'll be calling a Web service on the backend to determine how many objects/shapes need to be created. Once this is determined, I'll need to have the objects/shapes connected together.
how to connect dynamically created shapes with a line in Silverlight like a flowchart.
I read the below article, but its not working for me, actualHeight & actualWidth of shapes values are 0.
Connecting two shapes together, Silverlight 2
here is my MainPage.xaml
<UserControl x:Class="LightTest1.MainPage">
<Canvas x:Name="LayoutRoot" Background="White">
<Canvas x:Name="MyCanvas" Background="Red"></Canvas>
<Button x:Name="btnPush" Content="AddRectangle" Height="20" Width="80" Margin="12,268,348,12" Click="btnPush_Click"></Button>
</Canvas>
code behind MainPage.xaml.cs
StackPanel sp1 = new StackPanel();
public MainPage()
{
InitializeComponent();
sp1.Orientation = Orientation.Vertical;
MyCanvas.Children.Add(sp1);
}
Rectangle rect1;
Rectangle rect2;
Line line1;
private void btnPush_Click(object sender, RoutedEventArgs e)
{
rect1 = new Rectangle()
{
Height = 30,
Width = 30,
StrokeThickness = 3,
Stroke = new SolidColorBrush(Colors.Red),
};
sp1.Children.Add(rect1);
rect2 = new Rectangle()
{
Height = 30,
Width = 30,
StrokeThickness = 3,
Stroke = new SolidColorBrush(Colors.Red),
};
sp1.Children.Add(rect2);
connectShapes(rect1, rect2);
}
private void connectShapes(Shape s1, Shape s2)
{
var transform1 = s1.TransformToVisual(s1.Parent as UIElement);
var transform2 = s2.TransformToVisual(s2.Parent as UIElement);
var lineGeometry = new LineGeometry()
{
StartPoint = transform1.Transform(new Point(1, s1.ActualHeight / 2.0)),
EndPoint = transform2.Transform(new Point(s2.ActualWidth, s2.ActualHeight / 2.0))
};
var path = new Path()
{
Data = lineGeometry,
Stroke = new SolidColorBrush(Colors.Green),
};
sp1.Children.Add(path);
}
what I am doing in button click event is just adding two rectangle shapes and tring to connect them with a line (like flowchart).
Please suggest what is wrong in my code..
Try replacing the line
connectShapes(rect1, rect2);
with
Dispatcher.BeginInvoke(() => connectShapes(rect1, rect2));
I'm not sure of the exact reason why this works, but I believe the shapes are only rendered once control passes out of your code, and only once they are rendered do the ActualWidth and ActualHeight properties have a useful value. Calling Dispatcher.BeginInvoke calls your code a short time later; in fact, you may notice the lines being drawn slightly after the rectangles.
The TransformToVisual method behaves in much the same way as the ActualWidth and ActualHeight properties. It will return an identity transformation if the shape hasn't been rendered. Even if your lines were being drawn with a definite width and height, they would end up being drawn all on top of one another at the top-left.
I also found that I needed to add the lines to the Canvas, not the StackPanel, in order for them to be drawn over the rectangles. Otherwise the StackPanel quickly filled up with lines with a lot of space above them.
margin is of type thickness so It seems I cannot do:
Double myMargin = 10.2;
ellipse1.margin = Math.Round(myMargin / 2,0);
So what's the syntax ?
Update: I need same margin for top left right
Margin is defined as a Thickness structure. You need to set the value to a new Thickness structure instead of a single value.
You can do:
double myMargin = 10.2;
myMargin = Math.Round(myMargin/2, 0);
ellipse1.Margin = new Thickness(myMargin);
Edit: If you want to have the thickness be different on the bottom (ie: this margin only on top, left, right), use this constructor instead:
double myMargin = 10.2;
myMargin = Math.Round(myMargin/2, 0);
ellipse1.Margin = new Thickness(myMargin, myMargin, myMargin, 0.0);
ellipse1.margin = new Thickness(Math.Round(myMargin / 2, 0));
I have the need for drawing in the same drawing with lines of different color, thickness etc.
I can create two instances of PathGeometry, but I can't set color on them.
I can create two instances of Path, but can't get them displayed in my control.
What am I doing wrong?
Thanks for any comments!
Anders, Denmark.
Code below only displays "collection" in my control, but I thought it could be a starting point for answers...
var pathFigure1 = new PathFigure(new Point(0, 0),
new List<PathSegment> {new LineSegment(new Point(10, 10), true)}, false);
var pathFigure2 = new PathFigure(new Point(20, 20),
new List<PathSegment> {new LineSegment(new Point(30, 30), true)}, false);
var g1 = new PathGeometry(new List<PathFigure> {pathFigure1});
var g2 = new PathGeometry(new List<PathFigure> {pathFigure2});
var p1 = new System.Windows.Shapes.Path
{
Data = g1,
Stroke = new SolidColorBrush(Color.FromRgb(0, 0, 0))
};
var p2 = new System.Windows.Shapes.Path
{
Data = g2,
Stroke = new SolidColorBrush(Color.FromRgb(170, 87, 170))
};
var content = new Canvas();
content.Children.Add(p1);
content.Children.Add(p2);
Content = content;
You have started on the right approach, a geometry defines a 'shape', so don;t worry that you cannot set its colour. A Path turns the geometry into a visual representation on the screen, so here you can set the color and stroke thickness.
Your problem is at the very last step, you are setting the content property of your control. Typically this property is used to associate some data object with a control, you then supply a template which is its visual representation.
What you need to do is add your paths as children of a panel.
For example, add a Canvas, or a Grid to your control. Then add your two paths to the Grid / Canvas via their Children collection property.
So Here is the Problem, I am trying to get that circle to align on the number. When I do that in blend it shows me I have a Left (23), I try to do that programmaticly Canvas.SetLeft(thePanel,23) it overshoots. Better yet, if anyone knows of a control like this in silverlight let me know. What this does is when the user clicks on a number the green circle is suppose to go to that number so it looks like the user has selected it.
On your Circle object you have to set the Radius of the circle and the TranslateTransform attribute. Lets say your Circle has a radius of 15:
private const double Radious = 15.0;
private double _x = Radious;
private double _y = Radious;
private TranslateTransform _translation = new TranslateTransform();
and properties to handle the Circle's X and Y coordinates,
public double X
{
get { return this._x; }
set
{
this._x = value;
_translation.X = this._x - Radious;
}
}
public double Y
{
get { return this._y; }
set
{
this._y = value;
_translation.Y = this._y - Radious;
}
}
and in Silverlight you can get where the user has clicked on a Canvas, setting this code on the Click Event of the panel, and set the center of the circle to where the user has clicked:
//Get the points where it was clicked
Point clickPoint = e.GetPosition(Canvas);
MyCircle.X = clickPoint.X;
MyCircle.Y = clickPoint.Y;
Now, if you want them to always fall in fixed positions, you can set conditions that, if a user clicks around a number, then set the center of the circle to the center of the number, or just change the X value of your circle to move to the desired position.