wpf Image resources and visual studio 2010 resource editor

Question

My motivation for this question is really just to specify an image to be used in a user control via a dependency property for ImageSource. I'm hitting some pain points involving the management, access, and unit testing for this.

• Is the resource editor a good tool to use to maintain images for the application?
• What is the best way to translate the Bitmap from the editor to an ImageSource?
• How can I grab the resource Filename from the editor?

Answer 1

No, the resource editor is not a good tool for this.

In a WPF application the best way is to put all of your images in an "Images" directory and mark each one as a "Resource". Then you can reference them directly in Image controls and elsewhere.

Here are the precise steps:

• Crop and otherwise adjust your images using your favorite bitmap editing program (Paint.NET, Photoshop, etc)
• Save them as .png files (or .jpg or .gif if you prefer)
• Create an "Images" folder inside your Visual Studio solution (or multiple folders, however you want to organize it)
• Drag the images from your hard disk into your "Images" folder (or right-click the project, select New -> Existing Item and select the images)

Now you can reference your images easily in XAML:

<Image Source="Images/MyImage.png" />

Or in code:

var source = (BitmapSource)Application.LoadComponent(
               new Uri("Images/MyImage.png", UriKind.Relative));

You can also reference images in external assemblies:

<Image Source="ReferencedAssembly;v1.0.0.1;component/Images/MyImage.png" />

Which in code would be:

var source = (BitmapSource)Application.LoadComponent(
               new Uri("ReferencedAssembly;v1.0.0.1;component/Images/MyImage.png",
                 UriKind.Relative));