Title: Load an image at runtime in WPF and C#

This example shows how to load an image at runtime in a WPF program. As is often the case with WPF, it's easy once you know what to do. It's figuring out what to do that's hard.

In short, you need to set an Image control's Source property to an image. Unfortunately you can't use a bitmap in WPF, so you need to use a BitmapImage instead. A BitmapImage is a bit like a Bitmap except less useful for drawing.

To create a BitmapImage, you pass it's constructor the location of the file that you want to load, sort of the way you create a Bitmap. Of course this is WPF so you can't just pass the constructor the file's actual location. Instead you need to pass it a Uri. A Uri represents a Uniform Resource Identifier, an object that can represent file locations as well as internet locations. That way you could load the BitmapImage from a file on the internet, a local network, or somewhere else.

(This is the whole reason WPF makes you go to these lengths. It's so you can load the image from the internet. One of WPF's underlying assumptions is that you're building a network application. That makes this sort of thing easier, but makes building desktop applications a lot harder. This is kind of useful, however. Try setting an Image control's Source property to banner.png at runtime and see what happens.)

So those are the steps for loading the image. You still need to find the image. You could just wire it into the program, but this example lets the user pick an image file to load. To do that, it uses the Microsoft.Win32.OpenFileDialog class. It's fairly similar to the OpenFileDialog class used by desktop applications except it returns true or false to indicate whether the user picked a file.

Now that you know the steps, here's the code the program uses to load a picture at runtime.

using Microsoft.Win32; ... private void btnBrowse_Click(object sender, RoutedEventArgs e) { OpenFileDialog ofdPicture = new OpenFileDialog(); ofdPicture.Filter = "Image files|*.bmp;*.jpg;*.gif;*.png;*.tif|All files|*.*"; ofdPicture.FilterIndex = 1; if (ofdPicture.ShowDialog() == true) imgPicture.Source = new BitmapImage(new Uri(ofdPicture.FileName)); }

The code creates an OpenFileDialog, sets its Filter and FilterIndex properties, and displays it. If the user selects a file, the program creates a Uri to represent the file's location, uses that in a BitmapImage constructor, and sets the Image control's Source property equal to the resulting BitmapImage.

I told you this was easy once you knew what you needed to do.

Download the example to experiment with it and to see additional details.