I'm creating a map in Silverlight that contains a bunch of rooms. All of the rooms are polygons, most of them are rectangles.
So what I'm doing is creating a Polygon using the x y point coordinates for the room. Something like
Polygon p = new Polygon
p.points = pointCollection;
MainCanvas.Chilren.Add(p);
This works great. Next, I want to put the name of each room inside these on the map. I figured I'd just add a textblock child to the polygon. Unfortunately, it seems that UIElements cannot contain child UIElements. I think this is dumb, but whatever.
Next plan: Create a new Silverlight user control containing the polygon and a text field. Center text field in polygon within user control. So I just create one of these UserControls "Room" set the property "RoomShape" to the polygon and add it to the canvas. The problem here is that The Usercontrol is always added at position (0,0) and the room shape is in the bottom right position. What I really wanted was for the control to take on the size and shape of the polygon I add to it so I can find the center and add the text in. Is this possible?
Also, let's say I add a polygon to my layout in a control:
LayoutRoot.Children.Add(poly);
Why do
poly.ActualHeight
poly.ActualWidth
poly.height
poly.width
all return 0 or NaN when I can clearly see them on the Canvas?
And why do
Canvas.GetTop(poly);
Canvas.GetLeft(poly);
both return 0 when I can clearly see they are not located at (0,0)?
Any other suggestions for centering text in a polygon is appreciated.
First of all, for sure you cannot add UIElements to Polygon. The Polygon is not a container so you can't add elements in it.
Second, if you want to set text in the middle of your polygon, why don't you wrap your polygon in a Grid. Then in the Grid, add your polygon, and your textblock like that :
<Grid x:Name="room1" Background="LightBlue" HorizontalAlignment="Center" VerticalAlignment="Center">
<Polygon Stroke="Black" Fill="Beige">
<Polygon.Points >
<Point X="0" Y="0" />
<Point X="20" Y="100" />
<Point X="100" Y="50" />
<Point X="0" Y="0" />
</Polygon.Points>
</Polygon>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Room Name</TextBlock>
</Grid>
Third, for the size always at 0, this is probably because you create/add the usercontrol at Load time. I know its sad but you will have to do the work in the UserControl_SizeChanged event of the container.
Related
My application detects a foreign object (blob, cluster etc) in the live webcam image and displays object's outline on top of the image. To achieve that I employ Image and Canvas elements as follows:
<Border x:Name="ViewportBorder" Grid.Column="0" Grid.Row="1" BorderThickness="3" Background="AliceBlue" BorderBrush="Red">
<Grid>
<Image x:Name="videoPlayer" Stretch="Uniform" MouseDown="videoPlayer_MouseDown"></Image>
<Canvas x:Name="ObjectsCanvas"></Canvas>
</Grid>
</Border>
Border element in the above XAML is used just to draw a thick red line border around the Grid containing videoPlayer and ObjectsCanvas. Stretch="Uniform" is set to preserve image aspect ratio while being able it to stretch when application window gets maximized.
Every time the new frame arrives from the camera videoPlayer.Source gets updated with frame's bitmap whereas blob detection method yields a list of coordinates used for drawing a Polyline. The Polyline object is then added to ObjectsCanvas to be shown on top of the actual image frame.
Here's a part which draws the blob and adds it to the ObjectsCanvas.Children:
private void DrawBlob(List<Point> corners)
{
this.Dispatcher.Invoke(() =>
{
var myPolyline = new Polyline();
myPolyline.Stroke = System.Windows.Media.Brushes.Yellow;
myPolyline.StrokeThickness = 4;
myPolyline.FillRule = FillRule.EvenOdd;
myPolyline.Points = corners;
Canvas.SetLeft(myPolyline, 0);
Canvas.SetTop(myPolyline, 0);
ObjectsCanvas.Children.Clear(); // remove any old blob polyline
ObjectsCanvas.Children.Add(myPolyline); // add new polyline
});
}
When running the application I observe imperfect overlap of the blob object (thick yellow polyline), it gets somewhat right-shifted as shown in the image below.
Observed imperfection is not due to blob detection algorithm! I verified that by drawing the polylines of very same coordinates using old-fashion GDI methods on the actual bitmap.
It gets worse when I maximize the application window, an action causing videoPlayer to stretch:
I tried setting HorizontalAlignment and VerticalAlignment properties of ObjectsCanvas to Stretch but that does not help. Is there any method to align canvas exactly with the actual displayed image region?
I could get back to drawing the polylines using GDI, but I think it's a shame doing so in WPF...
I think I found a solution.
So, in order to stretch your canvas up to your image size you could wrap your canvas in ViewvBox control and bind your Canvas.Height and Canvas.Width to the image source's Height and Width like so:
<Grid>
<Image x:Name="MyFrame" Stretch="Uniform" />
<Viewbox Stretch="Uniform">
<Canvas
x:Name="MyCanvas"
Width="{Binding ElementName=MyFrame, Path=Source.Width}"
Height="{Binding ElementName=MyFrame, Path=Source.Height}">
<Canvas.Background>
<SolidColorBrush Opacity="0" Color="White" />
</Canvas.Background>
</Canvas>
</Viewbox>
</Grid>
However you need to set your Canvas.Background (you can make it transparent like in the example above), or ViewvBox will hide all of the canvas children otherwise.
Here are some screenshots of it working with a yellow polyline:
One more thing to note here - the coordinates of your polyline should be relative to image resolution.
Hope that helps!
<StackPanel x:Name="rootStackPanel" Background="{ThemeResource SystemControlAcrylicWindowBrush}" Padding="0,48">
<Rectangle x:Name="sampleRectangle" Width="200" Height="300" Fill="DeepPink" DoubleTapped="Rectangle_DoubleTapped" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform TranslateY="-100"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="otherRectangle" Width="200" Height="200" Fill="Cyan"/>
</StackPanel>
I want to achieve a dynamic look, where, when the pink rectangle is moved upward, the blue rectangle takes up the left over space. Such that it is always touching the pink rectangle.
I have tried manipulating offsets and scale properties provided by visual layer but the actual height is not affected by any of the property, as a result the other rectangle just stays in the original position. Now I am trying to achieve that effect using storyboards animation. But as you can see, the translation property (and the scale property as well) doesn't effect the actual container of the control somehow but rather makes the content in it move to whatever translation.
So, what properties do I need to manipulate to achieve the effect where the other rectangle inside the stackpanel moves dynamically with the changes to the first rectangle?
I know adjusting width or height property would result in what I am trying to achieve but for more complex scenarios where there might be a textbox rather than simple rectangle that is being animated, there is sort of a weird animation of the placeholder text(shrinking of text), which is something I don't want!
So, what properties do I need to manipulate to achieve the effect where the other rectangle inside the stackpanel moves dynamically with the changes to the first rectangle?
You could use Microsoft.Toolkit.Uwp.UI.Animations.Behaviors to realize this feature directly. Before animate your rectangle, you need to get the absolute position of the each rectangle like the follow.
var scgt = sampleRectangle.TransformToVisual(Window.Current.Content);
Point screenCoords = scgt.TransformPoint(new Point(0, 0));
var ddv = otherRectangle.TransformToVisual(Window.Current.Content);
Point Res = ddv.TransformPoint(new Point(0, 0));
If you want pink rectangle to move upward, you could Offset offsetY value
sampleRectangle.Offset(offsetX: 0, offsetY: -(float)screenCoords.Y - (float)sampleRectangle.Height, duration: 2500).Start();
And then animate otherRectangle like the follow
otherRectangle.Offset(offsetX: -(float)Res.X, offsetY: -(float)Res.Y).Scale(scaleX: 2, scaleY: 2).Start();
You need keep scaleX equal with scaleY when you scale TextBox.Otherwise, the TextBox will be deformed.
I have a Canvas with 2 "dots" drawn on it. See this (simplified) code:
<Canvas>
<Ellipse />
<Ellipse />
<Canvas.RenderTransform>
<RotateTransform x:Name="rotateEllipse" />
</Canvas.RenderTransform>
</Canvas>
As you can see, I want to rotate the canvas using the given RotateTransform.
Next, I want to put a TextBlock near to each Ellipse (a label). However, I don't want to include this TextBlock into the Canvas because it will then rotate also. I want the text to remain horizontal.
Any idea how to solve this in an elegant way?
Something like this, should work for you
<TextBlock RenderTransform="{Binding RelativeSource={RelativeSource AncestorType=Canvas},
Path=RenderTransform.Inverse}"/>
Assign to text box transformation matrix an inverse of the transformation matrix of the Canvas.
Good question! And I'm going to guess, so please take this answer with a pinch of salt.
I believe you are trying to place text annotations next to ellipses on a rotated canvas, but these annotations need to remain horizontal. Two things you could try:
Firstly, given the XY point that you know of each ellipse from Canvas.GetTop/GetLeft, you could find its new rotated XY location by applying the RotateTransform to the ellipse location, using the formula U = M*V, where U is the output point, V is the input point (XY location of ellipse) and M is the Rotation Matrix.
Secondly, you could place a second canvas over the first (assuming they are both in a grid, the second canvas is at higher Z-index and is the same size as the underlying canvas). Call it an annotation layer. Your annotations (text labels) can appear at the new transformed locations and unrotated using this approach.
You'd have to do this in code of course, not Xaml, although you might find a binding friendly approach by creating a value converter on the TextBlock that bound to the source RotateTransform/Ellipse and did this operation for you.
Another approach would be to take the .Inverse of the RotateTransform and apply that to the textblocks, however you may still need to translate to get to the new location. Either way I think it demands some experimentation.
Best regards,
I'm trying to rotate this canvas
<Canvas Canvas.Left="203" Canvas.Top="274" Name="canvas1" Height="0" Width="0" >
<Rectangle.LayoutTransform>
<RotateTransform Angle="-45"/>
</Rectangle.LayoutTransform>
I want to rotate this canvas but in the same position.. check this image
The left image I dont want to do that.. I need to create the second one.. but always I need to set X, Y values? Or is there another way?
In WPF, has two properties to support display transformations, LayoutTransform and RenderTransform.Any Transform assigned to LayoutTransform is applied when layout is performed. RenderTransform is applied after layout when rendering is performed.
You need to change the Transformation to RenderTransform
<Rectangle.RenderTransform>
<RotateTransform Angle="-45"/>
</Rectangle.RenderTransform>
You can see the difference between LayoutTransform and RenderTransform.
I am arranging quite freely a lot of elements on a Canvas layout, in fact the elements represent an interactive flow-chart. As transformations are applied, I need relative transformations on some of the elements.
Especially I require some elements being anchored or docked to their parent elements. I found different solutions, however I don't know if they solve my problem in the most elegant way.
Here is an example:
<Line X1="80" X2="800" Y1="730" Y2="730"/>
<Polygon Points="0,30 40,0 40,60" Canvas.Left="48" Canvas.Top="700"/>
The Polygon draws a triangle and I would like to let it dock on the left side of line. Which means, when translating the line to a new position or when scaling it down, the Polygon should move with it.
Is this possible?
put them in a canvas of their own, that way you can position the outer canvas absolutely and keep the inner stuff together.
like this:
<Canvas>
<Line X1="60" X2="820" Y1="60" Y2="760"> <!--some other line--> </Line>
<Canvas Canvas.Left="48" Canvas.Top="700">
<Polygon Points="0,30 40,0 40,60"/>
<Line X1="32" X2="752" Y1="30" Y2="30"/>
</Canvas>
</Canvas>