WPF FAQ - Image

How do I access / edit the metadata associated with an 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:

  • ExchangableImageFile (Exif).

  • PNG Textual Data.

  • ImageFileDirectory (IFD).

  • InternationalPressTelecommunicationsCouncil (IPTC).

  • ExtensibleMarkupLanguage (XMP).

[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();
Permalink
How to rotate an image ?

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>
Permalink
How can I convert an Image to grayscale ?

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>
Permalink
How can I stamp some text on an 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);
            }
Permalink
Why does adding images to an ImageList in the Designer cause them to lose their alpha channel ?

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.

Permalink