WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

This is a part of the WPF image viewer tutorial: Introduction, Part 1.

This part of the tutorial has very little to do with Wpf, we just have to define and fill the data structure used to hold the image information.

First let's define a class to hold an image and it's file name, I've defined this class as a nested class of Window1 because it doesn't matter where we put it.

public class MyImage
{
   private ImageSource _image;
   private string _name;

   public MyImage(ImageSource image, string name)
   {
      _image = image;
      _name = name;
   }

   public override string ToString()
   {
      return _name;
   }

   public ImageSource Image
   {
      get { return _image; }
   }

   public string Name
   {
      get { return _name; }
   }
}

Now let's write a property that will scan the "My Pictures" folder and load all the images it finds.

public List<MyImage> AllImages
{
   get
   {
      List<MyImage> result = new List<MyImage>();
      foreach (string filename in
         System.IO.Directory.GetFiles(
         Environment.GetFolderPath(
         Environment.SpecialFolder.MyPictures)))
      {
         try
         {
           result.Add(
            new MyImage(
            new BitmapImage(
            new Uri(filename)),
            System.IO.Path.GetFileNameWithoutExtension(filename)));
         }
         catch { }
      }
      return result;
   }
}

BitmapImage is the WPF class that represents any type of bitmap, it inherits from ImageSource that represents any type of image.

The try..catch with an empty catch block is there to skip over any file that isn't an image (or an image that can't be loaded).

One last thing, just to make it easier for us later we'll add a line to Window1 contractor:

public Window1()
{
   InitializeComponent();
   DataContext = this;
}

This line will make the code in the next part more elegant.

That was all the C# we'll need for a while, in the next post we'll see the magic of data binding.

posted @ Thursday, August 16, 2007 4:03 PM

Comments on this entry:

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by David at 8/1/2008 6:48 PM

Code error
Page - The C# code to load images..

public List<myimage%gt; AllImages
{

Why did nobody point this out before ???

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by jam at 12/1/2008 7:59 AM

I can't get this compiling either. any advice?

Errors on:

public List AllImages

Error 1 Expected class, delegate, enum, interface, or struct

(and then a bunch more)

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by Nir Dobovizki at 12/2/2008 10:51 AM

jam, there are two things I can think of that cause that error message.

first option is that maybe you tried to compile the AllImages on it's own, it should be compiled as part of your window class.

second option is a copy-paste problem, I have a lot of those with code in HTML.

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by StCroixSkipper at 12/9/2008 9:15 PM

Works fine for me. Just like it is described.

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by StCroixSkipper at 12/9/2008 9:40 PM

Just a thought. It may not have been clear whether the AllImages property was part of the MyImage class or the Window1 class.

It is part of the Window1 class.

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by Maj3d at 3/18/2009 1:31 PM

Thanks , i ve been try all day to create an observable collection of Image to bind to a listview.
Any help?

# A good example of loading images in WPF, but a poor example of object oriented programming.

Left by Robert Goerss at 5/1/2009 6:04 PM

All told, this is a good example and rather straightforward.

Some of the code, however, sets a bad example for beginning developers.

For example, your AllImages property is misleading in its behavior in that it performs a function each time its accessor is called rather than doing the typical duties of a property; namely, returning a field that is either initialized in a constructor, set by a consumer or internal function, or is a lazily initialized singleton implementation.

The AllImages property should be refactored to a method, such as IEnumerable GetImageFileInfos(string directory) which would then be called with a given directory to search.

This new method could perform the exact same task that your AllImages property does for the sake of your example, but using this sort of method signature makes the method reusable and testable -- two key concepts of object oriented programming.

# re: WPF Image Viewer Tutorial Part 2, The C# Code To Load Images

Left by Tim at 7/31/2009 5:27 AM

had the same problem as the 'jam' user above, with error with that AllImages property.

The solution is to make sure you put the property in the CLASS definition, not in the namespace definition. Having a job where I'm in Java a lot, I'm not used to going two levels deep in braces before I get to my class object :)

Your comment:



 (will not be displayed)


 
 
 
Please add 4 and 3 and type the answer here: