I have a WPF image, and I'm trying to draw something on it (Lets say a smiley, 2 blue circles for eyes and and a red ellipse for the mouth).
I've made a small Rectangle over the image, and made it stretched.
<Grid Name="mGrid">
<Rectangle Height="0" HorizontalAlignment="Stretch" Stretch="Fill" Name="mImageFrame" VerticalAlignment="Stretch" Width="0" />
</Grid >
I used a DrawingBrush to draw the circles in the rectangle.
Obviously this is wrong, because I have 2 problems:
1. The DrawingBrush seems to have a different scale. It will scale according to the largest item it's drawing.
2. I can only use one brush color.
So, how can I somehow draw over an image so it keeps the same proportions ?
And how can I use a different color for each shape ?
You can put Shapes on a Canvas that overlays the Image, and put the whole thing in a Viewbox. This requires that you define absolute coordinates by either setting the Image's Stretch property to None (and thus force the Image size to that of its Source bitmap) or explicitly set is Width or Height.
<Viewbox>
<Grid>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
Stretch="None"/>
<Canvas>
<Ellipse Canvas.Left="420" Canvas.Top="480"
Fill="Red" Width="100" Height="100"/>
... more shapes here ...
</Canvas>
</Grid>
</Viewbox>
One solution would be to put both the drawing and the Image into a ViewBox control. You can find out more about the Viewbox from the Viewbox Class page at MSDN. Basically, it provides the same stretching capabilities as the Image control.
You may also like to view the Shapes and Basic Drawing in WPF Overview page at MSDN.
Related
Given a canvas with black background and some white children on it:
How can I make all children transparent also through canvas background? Behind the canvas may be an image or other content. All solutions that I found are not satisfying:
Render the canvas to PNG image and turn all white color to transparency. In this case I would loose all benefits of a vector graphic when using the canvas in a viewbox.
Create one invers child of all children and render it in black on a transparent canvas. But I'm not shure if that's possible.
Note: The children of the canvas may be changed so I'm not searching for a static solution (e.g. a fixed path around all children).
Any ideas how to create such a mask?
Create a geometry with holes and use it with a Path element, e.g. like this:
<Grid Background="White">
<Path Fill="Black"
Data="M0,0 L1000,0 1000,1000 0,1000Z M100,100 L200,100 200,200 100,200Z"/>
</Grid>
I have my image displayed in a Canvas and I made the height and the width of it according to my Canvas, I can draw (select) rectangles on my image, what I want to do, is to clone the selected part (Rectangle) on my image and display it on my canvas instead of the original image.
is there any less complicated way to do it and clone the right selected part?
here's my XAML code:
<Canvas Name="Canvas">
<Image Name="ImgPreview" MouseDown="img_MouseDown" MouseMove="img_MouseMove" MouseUp="img_MouseUp" Width="{Binding Path=ActualWidth, ElementName=Canvas}" Height="{Binding Path=ActualHeight, ElementName=Canvas}" Stretch="Uniform"/>
</Canvas>
Please, tell me, how can I place the image inside in the middle?
Stretch: Uniform to fill.
I want to focus was on the middle of the picture
Why dont you Try setting your Image control set Stretch =Fill
<Image height="20" width="20" Stretch="Fill"/>
If the aspect ratio of the image you want to put inside an Image control is not 1:1 and you set the aspect ratio of your Image control to 1:1 (e.g. Width="20" and Height="20" you will have a deformed image.
So, the best approach is, set the Width="20" but don't set the Height, let it calculate that automatically. Then, set Stretch="Uniform" (not uniform to fill). It should display the image correctly.
Hope this helps.
You can wrap the image inside a Border and set the HorizontalAlignment and VerticalAlignment attributes of your image to 'Center'.
I want to place an Image on the top of a certain tile in a tile based game I am making. Problem is, when I generate the random map, when the Rectangle children of the Canvas is drawn, it draws over the Image. I solved this issue by placing making the Image part of the outer Grid of the Window. Problem is that when I want to place the Image on a certain Rectangle within the Canvas, the co-ordinates are off since the Grid is larger than the Canvas. How can I limit the Image Margins to only that of the Canvas (the canvas borders as the limit) as opposed to the Grid borders as the limits?
E.g. Giving the Image a value of Margin.Left = 50 will place it in the perfect spot in the canvas, but it would be placed on a different location in the grid since its scale is larger.
// Image displays, but does not display when I add child Rectangles to the Canvas
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" />
</Canvas>
<Grid>
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
// Removed the Image
</Canvas>
// Placed the Image outside the Canvas, but now it will draw according to the Grid's Margin limits and not the Canvas Margin limits
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" />
</Grid>
Image inside the Canvas, perfectly positioned
Image in the grid, wrongly placed since I used Canvas Margin co-ordinates
The first way you did it was good, your image should be a child of your Canvas to do Canvas.Left...
To solve you problem can you just put your image on top of all other rectangle, with ZIndex?
Canvas.ZIndex="3 or whatever"
The image with value 2 is drawn over the Rectangle with value 1. So you can pu a high number...
I think that you could use your image inside the Canvas and if you want the image over the Rectangle, the you need set the image's (Palen.ZIndex or Canvas.ZIndex) property greater than the Rectangles one.
For instance:
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" Canvas.ZIndex="1000" />
<Rectangle x:Name="Some Rectangle" Canvas.ZIndex="1"/>
</Canvas>
The image will be showed over the rectangle. I think this is the solution. Putting the image out the canvas cause will be very complex to set the exactly position you want.
I have simple canvas with items and i need to add for scroll view as parent for my canvas.
But i fased with problem that after set
canvas.RenderTransform=new ScaleTransform(){...}
Scroolbars not appears or working not correctly.
Will be glad for any information.
The render transform occurs much later in the UI rendering process. It ultimately performs a matrix transform on controls rendering. The scroll viewer will be completely unware of this transform, its scrollbars will be based on the un-transformed size of the original Canvas.
The silverlight toolkit contains a LayoutTransformer control. This control applies a transform to its content as part of the layout process and reports the post-transform size as its desired size.
Consider this:-
<ScrollViewer Width="200" Height="200" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:LayoutTransformer>
<toolkit:LayoutTransformer.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</toolkit:LayoutTransformer.LayoutTransform>
<Canvas Width="150" Height="150" Background="Aquamarine">
<Rectangle Fill="Blue" Canvas.Top="10" Canvas.Left="10" Width="30" Height="30" />
</Canvas>
</toolkit:LayoutTransformer>
</ScrollViewer>
Whilst the Canvas has a size (150) smaller than the containing scroll viewer (200), it is scaled so that it would be larger (300). The LayoutTransformer reports its desired size as 300, the post-transform size of the canvas. Hence the ScrollViewer displays scroll bars to accomodate it. Without the benefit of the LayoutTransformer the ScrollViewer would only see the Canvas as having a size 150 despite any applied RenderTransform.