Click here to Skip to main content
Click here to Skip to main content

Displaying Raw Images Using WPF

, , 27 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
An article describing how to display 8-bit and 16-bit rectangular raw images using WPF.


Introduction and Background

Displaying images on the screen is like writing the Hello World program for image processing amateurs. Here is an attempt to use WPF to display a rectangular grayscale raw image. This program enables the user to view a raw image file after specifying:

  • Whether it is 8-bit or 16-bit, and
  • Dimensions (width and height) of the image.

A raw image file is one which has just the pixel data arranged in a top down, left-to-right manner; it does not have any header. In the absence of a header, the above two pieces of information are needed to view the file. Since the dimensions of the image may be such that the corresponding image may not fit on the screen, we also provide scrollbars (if necessary) to scroll through the image. It is possible to display images using C# and .NET. Viewing images in WPF is inherently different from that in the C# world.

This small application is an extension to Displaying 16-bit Images Using C#. In that article, the C# language was used to display a raw image. Here, the same thing is achieved through WPF.

Description of the Image Display Code

The raw image file format is perhaps the simplest gray scale image file format. As we know, it doesn't contain any header, but directly contains the pixel values. So the user has to enter the width and height of the image.

The user interface is fairly simple and straightforward, with some Buttons and an Image control. DockPanel and StackPanel are used to arrange them neatly.

Since this is a raw image, the usual WPF methods for loading images cannot be used here. We need to read in the pixel values using a BinaryReader. Once the file is read, the number of pixels is computed based on the file size (and also whether it is an 8-bit image or 16-bit image). After this, an ImageDimensions dialog is invoked, prompting the user to enter the width and height of the image. This ImageDimensions dialog gives an initial guess for the width and height (for which it computes the factors), and allows the user to change them. Based on this, the image is created and then displayed. All of the above are enclosed in the code snippet given below.

private void DisplayImage16(string fileName)
    // Open a binary reader to read in the pixel data. 
    // We cannot use the usual image loading mechanisms since this is raw 
    // image data.
        BinaryReader br = new BinaryReader(File.Open(fileName, FileMode.Open));
        ushort pixShort;
        int i;
        long iTotalSize = br.BaseStream.Length;
        int iNumberOfPixels = (int)(iTotalSize / 2);

        // Get the dimensions of the image from the user
        ID = new ImageDimensions(iNumberOfPixels);
        if (ID.ShowDialog() == true)
            width = Convert.ToInt32(ID.tbWidth.Text);
            height = Convert.ToInt32(ID.tbHeight.Text);
            canvas.Width = width;
            canvas.Height = height;
            img.Width = width;
            img.Height = height;
            pix16 = new ushort[iNumberOfPixels];

            for (i = 0; i < iNumberOfPixels; ++i)
                pixShort = (ushort)(br.ReadUInt16());
                pix16[i] = pixShort;

            int bitsPerPixel = 16;
            stride = (width * bitsPerPixel + 7) / 8;

            // Single step creation of the image
            bmps = BitmapSource.Create(width, height, 96, 96, 
                                PixelFormats.Gray16, null, pix16, stride);
            img.Source = bmps;
            bnSaveJPG.IsEnabled = true;
            bnSavePNG.IsEnabled = true;
    catch (Exception e)
        MessageBox.Show(e.Message, "Error", 
               MessageBoxButton.OK, MessageBoxImage.Error);

A similar method is used for displaying 8-bit images. Saving these images as PNG or JPEG is a breeze with WPF - using PngBitmapEncoder and JpegBitmapEncoder, respectively.

The dialog for entering image dimensions is shown below:


In the attachments, there are two rectangular raw images of dimension 800 x 600, one each of 8-bit and 16-bit depth.


This completes the simple WPF application to display rectangular raw images. This can be extend to display other file formats like DICOM.


The authors would like to thank Nagesh Rao for testing the application.


  • Version 1: 12 April 2010.
  • Version 2: 27 April 2010.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Authors

Harsha T
Software Developer
India India
No Biography provided

India India
Programming computers since about 1987, my first computer language was Fortran 77. Later I learnt C, C++ and C#. Also programmed a little in VB .Net. Worked with Enterprise Java for a short while. Currently, interested in image processing. I love watching Kannada movies, and listening to Kannada songs.
Currently studying and understanding the Bhagavad Geetha.

Comments and Discussions

QuestionHow to display an image in the form TIFF (uncompressed) or as raw data using c # Pinmemberignasius fajar22-Feb-13 17:58 
AnswerRe: How to display an image in the form TIFF (uncompressed) or as raw data using c # Pinmemberrinkurathor2-Apr-14 4:58 
GeneralRe: How to display an image in the form TIFF (uncompressed) or as raw data using c # PinmemberAmarnath S2-Apr-14 19:19 
GeneralMy vote of 1 Pinmembergomoku@sina.com25-Oct-10 15:08 
GeneralRe: My vote of 1 PingroupAmarnath S12-Nov-10 7:09 
GeneralDostorted Output PinmemberMember 36831156-Jul-10 0:47 
GeneralRe: Dostorted Output PingroupAmarnath S6-Jul-10 8:24 
GeneralRe: Dostorted Output Pinmemberrinkurathor2-Apr-14 4:59 
GeneralRe: Dostorted Output PinmemberAmarnath S2-Apr-14 6:01 
GeneralOposite drirection Pinmemberbdubas4-May-10 6:54 
GeneralRe: Oposite drirection PinmemberHarsha T5-May-10 0:51 
GeneralRe: Oposite drirection Pinmemberbdubas5-May-10 2:52 
GeneralRe: Oposite drirection PingroupAmarnath S5-May-10 7:46 
Generalwhy +7 Pinmembersupermanns23-Apr-10 1:22 
GeneralRe: why +7 PingroupAmarnath S23-Apr-10 3:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 27 Apr 2010
Article Copyright 2010 by Harsha T, Avijnata
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid