Search code examples
wpfvisual-studioxamlimageresource-editor

wpf Image resources and visual studio 2010 resource editor

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?
Solution

  • 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));