Click here to Skip to main content
15,867,849 members
Articles / Desktop Programming / WPF

Displaying Raw Images Using WPF

,
Rate me:
Please Sign up or sign in to vote.
4.65/5 (13 votes)
27 Apr 2010CPOL3 min read 94.3K   8.7K   37   16
An article describing how to display 8-bit and 16-bit rectangular raw images using WPF.

DisplayRawImage.PNG

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.

C#
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.
    try
    {
        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;
            }
            br.Close();

            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;
        }
        else
        {
            br.Close();
        }
    }
    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:

ImageDimension.PNG

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

Closure

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

Acknowledgements

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

History

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

License

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


Written By
Architect
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. I love watching Kannada movies, and listening to Kannada songs. Currently studying and understanding the Bhagavad Geetha and teaching Sanskrit on YouTube.



Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to display an image in the form TIFF (uncompressed) or as raw data using c # Pin
ignasius fajar22-Feb-13 16:58
ignasius fajar22-Feb-13 16:58 
AnswerRe: How to display an image in the form TIFF (uncompressed) or as raw data using c # Pin
rinkurathor2-Apr-14 3:58
rinkurathor2-Apr-14 3:58 
GeneralRe: How to display an image in the form TIFF (uncompressed) or as raw data using c # Pin
Amarnath S2-Apr-14 18:19
professionalAmarnath S2-Apr-14 18:19 
GeneralMy vote of 1 Pin
gomoku@sina.com25-Oct-10 14:08
gomoku@sina.com25-Oct-10 14:08 
GeneralRe: My vote of 1 Pin
Amarnath S12-Nov-10 6:09
professionalAmarnath S12-Nov-10 6:09 
GeneralDostorted Output Pin
Member 36831155-Jul-10 23:47
Member 36831155-Jul-10 23:47 
GeneralRe: Dostorted Output Pin
Amarnath S6-Jul-10 7:24
professionalAmarnath S6-Jul-10 7:24 
GeneralRe: Dostorted Output Pin
rinkurathor2-Apr-14 3:59
rinkurathor2-Apr-14 3:59 
GeneralRe: Dostorted Output Pin
Amarnath S2-Apr-14 5:01
professionalAmarnath S2-Apr-14 5:01 
GeneralRe: Dostorted Output Pin
chukotkin6-Oct-21 4:58
chukotkin6-Oct-21 4:58 
GeneralOposite drirection Pin
bdubas4-May-10 5:54
professionalbdubas4-May-10 5:54 
GeneralRe: Oposite drirection Pin
Harsha T4-May-10 23:51
Harsha T4-May-10 23:51 
GeneralRe: Oposite drirection Pin
bdubas5-May-10 1:52
professionalbdubas5-May-10 1:52 
GeneralRe: Oposite drirection Pin
Amarnath S5-May-10 6:46
professionalAmarnath S5-May-10 6:46 
Generalwhy +7 Pin
supermanns23-Apr-10 0:22
supermanns23-Apr-10 0:22 
GeneralRe: why +7 Pin
Amarnath S23-Apr-10 2:05
professionalAmarnath S23-Apr-10 2:05 

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

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