WPF FAQ - Image

The ‘BitmapMetaData’ class provides metadata information contained by the image. This metadata can be one metadata schema or a combination of different schemes.

WPF inherently supports the following image schemas:

[C#]

            Stream pngStream = new System.IO.FileStream('winter.png', FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite);
            PngBitmapDecoder pngDecoder = new PngBitmapDecoder(pngStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
            BitmapFrame pngFrame = pngDecoder.Frames[0];
            InPlaceBitmapMetadataWriter pngInplace = pngFrame.CreateInPlaceBitmapMetadataWriter();
            if (pngInplace.TrySave() == true)
            { 
	pngInplace.SetQuery('/Text/Author', 'Me'); 
            }
            pngStream.Close();

Use the TransformedBitmap element to rotate an image.

[XAML]

<Image Width='200' Height='200'>
	<Image.Source>
		<TransformedBitmap Source='C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg'>
			<TransformedBitmap.Transform>
				<RotateTransform Angle='270' />
			</TransformedBitmap.Transform>
		</TransformedBitmap>
	</Image.Source>
</Image> 

This can be done by using the ‘FormatConvertedBitmap’ class. The image is converted to the spcified PixedFormat type.

The following code snippet shows the conversion of an image to grayscale.

[XAML]
<Image Width='200' Height='200' >
	<Image.Source>
		<FormatConvertedBitmap Source='C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg' DestinationFormat='Gray4' />
	</Image.Source>
</Image>

The DrawingVisual can be used with a ‘BitmapImage’ instance and then rendered using ‘RenderBitmap’ class for creating custom rendered images. If text needs to be added, then use the ‘FomattedText’ instance.

The following code snippet shows how to render an image with a text.

[C#]

            BitmapImage bitImage = new BitmapImage()
            {
                UriSource = new Uri(@'C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg', UriKind.Relative),
                DecodePixelWidth = 200,
                DecodePixelHeight = 200
            };

            FormattedText text = new FormattedText('Winter', new CultureInfo('en-us'), FlowDirection.RightToLeft, new Typeface('Calibri', FontStyles.Normal,             FontWeights.Normal, new FontStretch()), this.FontSize, Brushes.White);

            DrawingVisual drawingVisual = new DrawingVisual();
            DrawingContext drawingContext = drawingVisual.RenderOpen();
            drawingContext.DrawImage(bitImage, new Rect(0, 0, bitImagebi.Width, bitImagebi.Height));
            drawingContext.DrawText(text, new Point(bitImage.Height / 2, 0));
            drawingContext.Close();

            RenderTargetBitmap renderBmap = new RenderTargetBitmap(bitImage.PixelWidth, bitImage.PixelHeight, 96, 96, PixelFormats.Pbgra32);
            renderBmap.Render(drawingVisual);

            // Encoding the RenderBitmapTarget as a PNG file.
            PngBitmapEncoder png = new PngBitmapEncoder();
            png.Frames.Add(BitmapFrame.Create(rtb));
            using (Stream stm = File.Create('new.png'))
            {
                png.Save(stm);
            }

Cropping images is done with the Image.Clip property. For this, use the following code snippets.

[XAML]

<Image Source="Test.png">
    <Image.Clip>
        <EllipseGeometry Center="120,140" RadiusX="150" RadiusY="150" />
    </Image.Clip>
<Image>

Reference link: https://www.c-sharpcorner.com/uploadfile/mahesh/clipping-or-cropping-images-in-wpf/

It looks like the ImageList editor loses the transparency when it does some internal copy or clone of the images. However, it seems that it does work when you add the images in code to the ImageList. One workaround (not so tidy) is to add the images to the ImageList at design-time (so that your design-time will be closer to the run-time) and then clear that ImageList and refill it with the images in code.