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.

Two Image Layers and OpacityMask

I'm trying to crop a circle from one image, and put it on top another image in WPF.
The Circle's center changes according to the mouse movements, and needs to be bounded dynamically.
I tried to position two images on top of each other, and use a third image that I draw in real time as an opacity mask.
Could you please provide short code to solve this problem efficiently ?

The code below describes what you can do with an OpacityMask. It's a little counterintuitive, because we expect a XAML rendering to layer elements bottom-to-top.
However, in this case you want your "background" image to layer on top of the foreground, because the OpacityMask will serve to display only that portion of the foreground described by the position and size of the VisualBrush, rendering the rest transparent. It's given as follows:
<Grid x:Name="MainGrid" MouseMove="Grid_MouseMove">
<Rectangle Fill="Red" ></Rectangle>
<Rectangle Fill="Green">
<Rectangle.OpacityMask>
<VisualBrush Stretch="None" >
<VisualBrush.Visual>
<Ellipse Width="40" Height="40" StrokeThickness="1" Fill="Black" />
</VisualBrush.Visual>
<VisualBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform x:Name="OpacityFilterTransform" X="1" Y="1"/>
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
Then, this event handler code computes the position of the ellipse and applies it to the OpacityFilter's TranslateTransform object, giving you control over the position of the image.
private void Grid_MouseMove(object sender, MouseEventArgs e)
{
var position = e.GetPosition(this);
var height = MainGrid.ActualHeight;
var width = MainGrid.ActualWidth;
// with the position values, interpolate a TranslateTransform for the opacity mask
var transX = position.X / width;
var transY = position.Y / height;
OpacityFilterTransform.X = transX - 0.5;
OpacityFilterTransform.Y = transY - 0.5;
}
This solution should work for any descendant of Visual you care to layer.

How to set the background of Rectangle with a picture?

I create a Rectangle
public void Set(Rectangle maps, int y, int x) {
Map.Children.Add(maps);
maps.SetValue(Grid.RowProperty, x);
maps.SetValue(Grid.ColumnProperty, y);
}
But How to change the background with "Resources/1.jpg"?

Like this:
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="/YourAppName;component/Resources/1.jpg" />
</Rectangle.Fill>
</Rectangle>
EDITED AGAIN (Sorry)
Or in C#
maps.Fill = new ImageBrush {
ImageSource = new BitmapImage(new Uri(#"pack://application:,,,/YourAppName;component/Resources/1.jpg", UriKind.Absolute))
};

I was having trouble using the "/YourAppName;" portion of the address as suggested by #Jonny Piazzi. It probably works, I just couldn't get it to. Alternatively, I was able to make this method work.
1) I added the image to my project in a folder I created: Images > Backgrounds > JellyFishBackground.jpg
2) I right clicked the image in Solution Explorer > Properties > Set Build Action to Resource
3) Build project
4) Simply target the image as such: (in my case I targeted a row of my grid, and used a Stretch property, which are beyond the scope of this question, just fyi to avoid confusion)
<Rectangle Grid.Row ="0">
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/Backgrounds/JellyFishBackground.jpg" Stretch="UniformToFill"/>
</Rectangle.Fill>
</Rectangle>

How to create ImageBrush from System.Drawing.Image in WPF?

I have image in System.Drawing.Image object and I need to create an ImageBrush object (used for Fill property of Rectangle in WPF for example) from it. I guess there should be a way to do this, but I can't find one.

var image = System.Drawing.Image.FromFile("..."); // or wherever it comes from
var bitmap = new System.Drawing.Bitmap(image);
var bitmapSource = Imaging.CreateBitmapSourceFromHBitmap(bitmap.GetHbitmap(),
IntPtr.Zero,
Int32Rect.Empty,
BitmapSizeOptions.FromEmptyOptions()
);
bitmap.Dispose();
var brush = new ImageBrush(bitmapSource);
This solution, however, doesnt free the memory of the handle. For information on how to remove the memory leak see WPF CreateBitmapSourceFromHBitmap() memory leak

<Rectangle x:Name="RectangleName"
StrokeThickness="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="200"
Height="300"
Stroke="Black" >
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding SelectedComponentsImage}" x:Name="ComponentVisualBrush" ViewboxUnits="Absolute"
Viewbox="0,0,300,300" ViewportUnits="RelativeToBoundingBox" Stretch="UniformToFill" Viewport="0,0,1,1"
RenderOptions.EdgeMode="Aliased" />
</Rectangle.Fill>
</Rectangle>
This is with viewmodel Binding. You can replace the Binding with an image uri.