In Windows Presentation Foundation, I can't seem to find a way of how to cut an image based on the shape of another image.
E.g. I'd like to display someone's photo in the shape of a heart.
There are answers like this one which crop an image into a rectangle or like this one which draw a radius to clip the image into a circle.
But is cropping really the only way?
Can WPF overlay the image on top of a shape and have the image be cut based on the shape dimensions?
The code that I have so far does the inverse of what I'm trying to do. What I have so far uses an overlay layer as a mask to cover the image:
<Image
Name="HeartOverlay"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Panel.ZIndex="2"
/>
<Canvas
Name="Canvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Image
Name="Image"
Stretch="Uniform"
Panel.ZIndex="1"
/>
/>
HeartOverlay.Source = new Bitmap(#"C:\heart.png");
Image.Source = new Bitmap(#"C:\image.png");
The problem here is that overlay is merged together with the image and saving/printing the image also shows the overlay.
See image below as an example. Note the white borders, which are especially evident when viewing the image in something like the Mac Preview app. I'm looking to save/print the image without the white borders.
Appreciate any pointers!
You could simply fill a Path with a heart-shaped Geometry with an ImageBrush:
<Path Width="100" Height="150" Stretch="Uniform"
Data="M1,2 L0,1 A0.5,0.5 1 1 1 1,0 A0.5,0.5 1 1 1 2,1 Z">
<Path.Fill>
<ImageBrush ImageSource="C:\image.png"/>
</Path.Fill>
</Path>
Related
I placed a PNG Image with some transparent areas on my window. It's over a Button control, now when i want to click on My Button, it has some UnClickable points because transparent space of image is over it.
Now, i want mask my image with another control like polygon or use a good way to solve my problem.
I tested following way, but it didn't fill all of the polygon area by image. It is like a rectangle image inside a polygon:
<Polygon
Points="0 50,50 60,58 50,60 50,85 50,95 65,112 65,130,40135,40135 90,0 90"
Stroke="Purple"
StrokeThickness="2" Margin="0,0,146,99" HorizontalAlignment="Right" Width="139" VerticalAlignment="Bottom" Height="99">
<Polygon.Fill>
<ImageBrush ImageSource="/Resources/myImage.png" AlignmentY="Top" Stretch="None" />
</Polygon.Fill>
</Polygon>
Result is like this:
.............................................................
But I want something like this:
......................................
Make the fill image of your polygon rectangular and use Stretch=None or Fill or....
How can I wrap an image around the canvas like this? The obvious way I can think of is to duplicate the image, and offset by the width/height of the image in the opposite direction. Is there another way to achieve this?
You could fill a Rectangle with an ImageBrush with this image, and set its TileMode and Viewport properties as needed.
For example:
<Rectangle Width="128" Height="128">
<Rectangle.Fill>
<ImageBrush ImageSource="Images\Tile.png" TileMode="Tile"
ViewportUnits="Absolute" Viewport="64,64,128,128"/>
</Rectangle.Fill>
</Rectangle>
The above XAML creates the following output:
from this source image:
No. There is no other way around. You will have to draw all images. Because a control doesn't split up.
You can calculate and then generate Image boxes to show no. of images based on offset.
I'm new to WPF and would like to know what to use to get a shape like the image below:
I also wonder if it is possible that this design may follow the form's dimensions, ie, if the form is resized, the design is too.
In advance, thank you!
Windows 8.1, Visual Studio 2013, C#, WPF Application
To draw the shape you can use a Path. A path can draw any type of shape specified by its Data property. The Fill and Stroke defines the colors of the shape.
To "follow the form's dimensions" you can set the Stretch property to "Uniform". The shape will then scale accordingly to the window.
Here is an example:
<Window x:Class="WpfApplication57.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="800">
<Grid>
<Path Data="F1 M 0 0 800 0 800 30 200 30 150 60 0 60 0 0"
Fill="Yellow"
Stretch="Uniform"
Stroke="Black"
StrokeThickness="4"
VerticalAlignment="Top" />
</Grid>
</Window>
Happy coding :-)
Best regards,
Casper Korshøj
You can use a Path to get that shape and you can even use Blend to draw any shape, if you want just shapes.
<Path Data="M200.125,197.375 L200.125,190.25 277.375,190.25 277.375,191.5 277.375,192.375 220,192.375 217.25,195.125 214.5625,197.8125 z" HorizontalAlignment="Left" Height="8.562" Margin="200.125,190.25,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="78.25" Fill="#FFF0F00C"/>
That should give you the Shape you wanted and in the comment mention above use that link
http://msdn.microsoft.com/en-us/library/ms747393%28v=vs.110%29.aspx
I have an image that its size is relatively big (say 10K by 10K).
To show this image, I use an image control and set its stretch mode to StretchToFill.
Now I want to draw a line on this image and I have the line position (start and end point) based on original image size (say from (2000,1000) to (8000,6000).
How can I convert these values to screen coordinates so I can draw on image?
If I had the actual size of image, I can do this, but it seems that I can not bind to actual height and actual width of image in viewModel.
You could put the Image and the Line in a Viewbox:
<Viewbox Stretch="UniformToFill">
<Grid>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"/>
<Line Stroke="White" StrokeThickness="5" X1="100" Y1="100" X2="1000" Y2="500"/>
</Grid>
</Viewbox>
In my Windows Phone 7 application, I have a large image and i want to draw another small image (from an image folder) in specific position (x, y) on top of the large image. How can I do that?
You can put the images in a canvas and position them
<Canvas>
<Image Source="BigImage.jpg"/>
<Image Source="SmallImage.jpg" Canvas.Left="100" Canvas.Top="50" />
</Canvas>
Depending on your requirements/setup you could also nest them in a Grid and use the Margin properties of the images.