Develop Reference

Possible to cut an image based on the shape of another image?

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>

C# WPF Images not displaying

In my code, I have 3 images that are empty and then I set the source in the code behind. The relative path I'm giving them is the right one but the images are not displaying anyway. I got no clue how to fix this.
Xaml
<Border BorderThickness="1" Margin="44,135,433,248" BorderBrush="#FF000000">
<Image x:Name="imageHelmet" HorizontalAlignment="Left" Height="116" Margin="-1" VerticalAlignment="Top" Width="127" MouseEnter="helmet_MouseEnter"/>
</Border>
Behind
string source = #"..\..\..\Images\" + piece.Link;
BitmapImage bmp = new BitmapImage();
bmp.BeginInit();
bmp.UriSource = new Uri(source, UriKind.Relative);
bmp.EndInit();
imageChestplate.Source = bmp;
This is just one of them, but the rest are the same.

The image is likely hidden due to the margin of the border, at least that's what I saw when I attempted to recreate your problem.
Here, the Margin Property of the Border is set to 44,135,433,248. This means that there is a margin of 433 on the right side, and 248 on the bottom.
<Border BorderThickness="1" Margin="44,135,433,248" BorderBrush="#FF000000">
The edge of the window counts as something getting within the margin, so if the window is too small, it will not leave enough space for the margin, and as such the margin will be pushed over the image, hiding it.
To remedy this situation, change the right and bottom values in the margin to 0, and set the Border's HorizontalAlignment to Left, and VerticalAlignment to Top.
<Border BorderThickness="1" Margin="44,135,0,0" BorderBrush="#FF000000" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image x:Name="imageHelmet" HorizontalAlignment="Left" Height="116" Margin="-1" VerticalAlignment="Top" Width="127" MouseEnter="helmet_MouseEnter"/>
</Border>
This way, there's no margin on the right and bottom sides to get pushed over the image, and the alignment makes it so the left and top alignments are used correctly.

WPF Image control masked with a container same as polygon

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....

Wrap image around canvas in WPF C#

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.

Image in WPF getting Blurry

I am developing an application in WPF using C#. I am putting Images in a WrapPanel and showing inside a Grid with one more Border and using images in Buttons also. Problem is my Image control loosing its quality. I am not able to post my image here so I am simply describing here.
I used SnapsToDevicePixels="True" for the images but still it looks blurry.
Updated:
Here I shared the Image below:

I think what Markus told is the one way to resolve your issue and try by adding one more property in it RenderOptions.EdgeMode="Aliased" for each image I mean :
<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"/>
if you still not able to fix your problem then you can refer this http://blogs.msdn.com/b/dwayneneed/archive/2007/10/05/blurry-bitmaps.aspx to create a custom Bitmap class and apply on all Images which are creating trouble for you.
You can also see this Stack Overflow Question

SnapsToDevicePixels seems not working for bitmaps.
The NearestNeighbor options actually converts the bitmap and will end up with different one to the original bitmap.
In WPF 4, a property "UseLayoutRounding" on the FrameworkElement is introduced to solve this problem.
By setting this property to True on your root element, such as Window will align children elements on the edges of pixels.
<Window UseLayoutRounding="True">...</Window>

This works for me
<Image Source="/LoginPanel;component/Icons/icoLogin.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor"</Image>
Set RenderOptions.BitmapScalingMode="NearestNeighbor" for each image. Alternatively see this question here on StackOverflow.
Edit:
Here is my sample code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="661">
<WrapPanel>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/icoChip32x32.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/icoChip32x32.ico"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/Presentation-Edit.png"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
<Button VerticalAlignment="Center">
<Image Source="/WpfApplication1;component/Presentation-Edit.png"
RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="None"></Image>
</Button>
</WrapPanel>
</Window>
And this is my result:

Use UseLayoutRounding="True" property on the parent element if image is used as a content. In your case it is the Button.

I ran into a blurriness issue with image backgrounds caused by scaling and the solution was much simpler than you may think. While at first I wondered if it was being scaled up to a power-of-two texture size, the scaling actually matched the ratio of System DPI (96) : Image DPI (72, which is the default for many editors). If you adjust the image to 96 DPI it should display pixel-perfect with the default Windows settings.
EDIT: Tried an image with high detail contrast and it is slightly softened.

WPF doesn't use concrete pixel values for sizes and positioning, so that it can scale well with DPI.
This can lead to a problem where it tries to use a position that doesn't correspond to a discrete on-screen pixel; some of the image pixels are rendered over multiple on-screen pixels which we see as blurring.
UseLayoutRendering=true with SnapToDevicePixels=false should solve this issue. You also need to set it at the main window level too, so that the calculations cascade down to the image level.
You can try this out by creating a simple WPF application with one window, and your images. Setting the image margin to be something silly like (10.452, 0.736, 0, 0) will lead to blurring. This goes away with UseLayoutRendering=true on the image.
If you then set the margin again in your window's constructor after InitializeComponent(), it is blurry regardless of whether you set UseLayoutRendering=true on the image, since the calculations to line up with on-screen pixels were made before you then moved the image to a location which doesn't match up with these.
I'm not entirely sure what the difference is between UseLayoutRendering and SnapToDevicePixels - I think it is just the time that the calculations are made. UseLayoutRendering seems to be preferable for images.
Stretching/squashing an image from its original size can also lead to blurring problems.

I had the same Problem, but in my case I've downloaded Icons and found out, that they all had wrong DPI too... 110,56 and 116,xx and 95,99 etc...
When i changed the DPI to 96 for all, everything was fine!