Resize polygon in to fill in Canvas - c#

How can i resize Polygon which is placed in Canvas so it fills that canvas?
I don't want to change values of polygon points, I just want it to be displayed inside of canvas in case polygon coordinates are too large, too small or out of screen.

Came across this problem recently and worked out a solid solution:
<Canvas x:Name="CanvasName">
<Polygon Points="{Binding Path=PointCollectionName}" Stretch="Fill" Fill="Black"
Width={Binding ElementName=CanvasName, Path=ActualWidth}"
Height={Binding ElementName=CanvasName, Path=AcutalHeight}"/>
</Canvas>

Do you have the chance to replace the Canvas with a Grid? If so just set the Stretch attribute of the polygon, e.g. Uniform keeps the aspect ratio:
<Grid Width="297" Height="159">
<Polygon Points="10,110 110,110 110,10" Fill="Blue" Stretch="Uniform" />
</Grid>

Related

C# WPF PolyLine that is 50% of my window width

this should be an easy answer for some of you maybe.
I wan to draw a line that is always 50% of my window width, how do i do that?
So if the user resizes the window, the line should be able to automatically adjust itself and grow/shrink to always keep 50% of my window width.
How to do that? Currently, i only have a very static line....such as....
<Polyline Points="0,0 1,0" HorizontalAlignment="Right" Width="500" Stretch="Fill" Stroke="Blue" StrokeThickness="10" />
where my window width is set to 1000.
You can create the same effect with a Path control. The Data property value uses a pair of Move elements to define the nominal size of the drawing surface.
<Path Stroke="Black" StrokeThickness="5" Data="M 100,0 M 0,0 L 50,0" Stretch="Uniform" />

Set padding of a Canvas in WPF

I have a Canvas with a Rectangle and a Circle inside it:
<Canvas x:Name="CanvasMain" Width="595" Height="842" Background="White" HorizontalAlignment="Center" >
<Rectangle Fill="Tomato" Height="335" Canvas.Left="40" Stroke="Black" Canvas.Top="60" Width="265"/>
<Ellipse Fill="Tomato" Height="175" Canvas.Left="370" Stroke="Black" Canvas.Top="465" Width="200"/>
</Canvas>
I want to set Padding of the Canvas programmatically. Should I set the margin of all the elements inside the Canvas to achieve this purpose or is there any alternative
I want to set Padding of the Canvas programmatically. Should I set the margin of all the elements inside the Canvas to achieve this purpose or is there any alternative
It is either that or adjusting the coordinates (the Canvas.Top and Canvas.Left properties) of the elements.
A Canvas has no concept of padding so you need to create the gap yourself somehow. There is no right or wrong really.
I think you can try to put the canvas in a border.
<Border x:Name="rootBorder">
<Canvas x:Name="CanvasMain" Width="595" Height="842" Background="White" HorizontalAlignment="Center" >
</Canvas>
</Border>
Then you can set border's padding.
rootBorder.Padding = new Thickness(25);

XAML image gets cut off

In XAML I'm trying to make a large image that's cut off as a background to slowly move across the screen until it reaches the images otherside. Problem is the image is always no bigger than the display even it was stretched out. So I'm left with a image that's the size of the screen moving off with a black background.
<Image x:Name="background" HorizontalAlignment="Left" Grid.Row="1" Width="1500" Stretch="Fill" MaxWidth="1500" MinWidth="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate" X="0"></TranslateTransform>
</Image.RenderTransform>
</Image>
The Grid control arranges the Image with the available cell size. Then the Image control cuts off the parts of the image that are outside the arrange rectangle (and hence not visible), before any RenderTransform is applied.
A simple workaround is to put the Image in a Canvas, which arranges its child elements with their desired size:
<Grid ...>
...
<Canvas Grid.Row="1">
<Image x:Name="background" Width="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate"/>
</Image.RenderTransform>
</Image>
</Canvas>
...
</Grid>

SurfaceInkCanvas scales strokes when painting out of bounds

I have a ScatterView that contains an image over which I should be able to draw.
<s:ScatterView HorizontalAlignment="Center" Margin="0,0,0,0" Name="desk" VerticalAlignment="Center">
<s:ScatterViewItem Width="200" Height="200">
<Grid>
<Image Name="img1" Source="/Resources/Desert.jpg"/>
<Viewbox>
<s:SurfaceInkCanvas Name="cvs1"/>
</Viewbox>
</Grid>
</s:ScatterViewItem>
</s:ScatterView>
I noticed that whenever I draw an ink trail towards the border of the image, the strokes on the ink canvas are scaled down to make room for more stuff. I do not want these strokes to be zoomed out. How can I change this behavior?
Here is a video that shows what's going on.
I figured it out. This behavior is caused by the fact that I hadn't defined a Width and Height on the SurfaceInkCanvas. This should do the trick:
<s:SurfaceInkCanvas Name="cvs1" Width="200" Height="200" />

How to set Canvas.ZIndex to paint a black panel between the controls?

With the following code I can demonstrate how a black panel with a opacity of 50% is on top of every rectangle:
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid>
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
It looks like this:
I would like to have the yellow rectangle above the black panel, but that seems to be impossible.
I can achieve something close by setting the ZIndex of the Grid containing both the Blue and Yellow rectangles to "1". But this would also raise the blue rectangle above the black, and this is a problem.
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid Canvas.ZIndex="1">
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
How do I get only the yellow rectangle above the black?
In my real application I have user controls instead of the rectangles. I like to make a particular control standing out by having everything else covered by the half-black shade.
Many Thanks,
I don't think you'll be able to achieve this with your current arrangement of controls.
There are two levels of controls here, the "Blue" and "Yellow" controls inside the inner grid and then the "Black" and "Red controls together with the inner grid.
The ZIndex works on controls at the same "level" - so you can ensure that the yellow control is on top of the blue, but then at the higher level these are grouped under the inner grid so are treated as a single unit.
The only way this would work is if all your controls were at the same level. If you included a second semi opaque rectangle in the inner grid you could get the yellow to be on top of that but that might end up making other controls too dark.
One approach might be to not use just a simple black rectangle.
Instead use a Path composed of two rectangles. The first rectangle will cover the whole area and the second would just cover the control to be available.
This creates a large rectangle with a hole in it where your target control can show through and accept input.
The down side is working out the rectangle geometry to add to create the hole but that's fairly straight forward.

Categories

Resources