Monday, June 11, 2012

WPF image resources


I come from a mostly web and a little bit Windows Forms background. For a new project, we will be using WPF. The WPF application will need 10 - 20 small icons and images for illustrative purposes. I am thinking about storing these in the assembly as embedded resources. Is that the right way to go ?



How do I specify in XAML that an Image control should load the image from an embedded resource ?


Source: Tips4all

8 comments:

  1. If you will use the image in multiple places, then it's worth loading the image data only once into memory and then sharing it between all Image elements.

    To do this, create a BitmapSource as a resource somewhere:

    <BitmapImage x:Key="MyImageSource" UriSource="../Media/Image.png" />


    Then, in your code, use something like:

    <Image Source="{StaticResource MyImageSource}" />


    In my case, I found that I had to set the Image.png file to have a build action of Resource rather than just Content. This causes the image to be carried within your compiled assembly.

    ReplyDelete
  2. I found to be the best practice of using Images,Video,etc is:


    Change your files "Build action" to "Content"

    found on the "Right-Click" menu at the Solution Explorer window

    Image Source in the following format:

    "/«YourAssemblyName»;component/«YourPath»/«YourImage.png»"



    Example

    <Image Source="/WPFApplication;component/Images/Start.png" />


    Benefits:


    Files are not embedded into the assembly

    The Resource Manager will raise some Memory Overflow problems with too many Resources (at build time)

    Can be called between assemblies

    ReplyDelete
  3. yes it is the right way.
    You could use the image in the resource file just using the path:

    <Image Source="..\Media\Image.png" />


    You must set the build action of the image file to "Resource"

    ReplyDelete
  4. Full description how to use resources:
    http://msdn.microsoft.com/en-us/library/aa970494.aspx
    and how to reference them read "Pack URIs in WPF"

    In short, there is even means to reference resources from referenced/referencing assemblies

    ReplyDelete
  5. Some people are asking about doing this in code and not getting an answer.

    After spending many hours searching I found a very simple method, I found no example and so I share mine here
    which works with images. (mine was a .gif)

    Summary:

    It returns a BitmapFrame which ImageSource "destinations" seem to like.

    Use:

    doGetImageSourceFromResource ("[YourAssemblyNameHere]", "[YourResourceNameHere]");


    Method:

    static internal ImageSource doGetImageSourceFromResource(string psAssemblyName, string psResourceName)
    {
    Uri oUri = new Uri("pack://application:,,,/" +psAssemblyName +";component/" +psResourceName, UriKind.RelativeOrAbsolute);
    return BitmapFrame.Create(oUri);
    }


    Learnings:

    From my experiences the pack string is not the issue, check your streams and especially if reading it the first time has set the pointer
    to the end of the file and you need to re-set it to zero before reading again.

    I hope this saves you the many hours I wish this piece had for me!

    ReplyDelete
  6. In code to load resource in the executiong assembly where my image 'Freq.png' was in the folder "Icons" and defined as "Resource".

    this.Icon = new BitmapImage(new Uri(@"pack://application:,,,/"
    + Assembly.GetExecutingAssembly().GetName().Name
    + ";component/"
    + "Icons/Freq.png", UriKind.Absolute));


    I also made a fonction if anybody would like it...

    /// <summary>
    /// Load a resource WPF-BitmapImage (png, bmp, ...) from embedded resource defined as 'Resource' not as 'Embedded resource'.
    /// </summary>
    /// <param name="pathInApplication">Path without starting slash</param>
    /// <param name="assembly">Usually 'Assembly.GetExecutingAssembly()'. If not mentionned, I will use the calling assembly</param>
    /// <returns></returns>
    public static BitmapImage LoadBitmapFromResource(string pathInApplication, Assembly assembly = null)
    {
    if (assembly == null)
    {
    assembly = Assembly.GetCallingAssembly();
    }

    if (pathInApplication[0] == '/')
    {
    pathInApplication = pathInApplication.Substring(1);
    }
    return new BitmapImage(new Uri(@"pack://application:,,,/" + assembly.GetName().Name + ";component/" + pathInApplication, UriKind.Absolute));
    }


    Usage:

    this.Icon = ResourceHelper.LoadBitmapFromResource("Icons/Freq.png");

    ReplyDelete
  7. If you're using blend, to make it extra easy and not have any trouble getting the correct path for the Source attribute, just drag and drop the image from the Project panel onto the designer.

    ReplyDelete
  8. Visual Studio 2010 Professional SP1.
    .NET Framework 4 Client Profile.
    PNG image added as resource on project properties.
    New file in Resources folder automatically created.
    Build action set to resource.


    This worked for me:

    <BitmapImage x:Key="MyImageSource" UriSource="Resources/Image.png" />

    ReplyDelete