locked
How can I give user controls in my asset library an icon? RRS feed

  • Question

  • Hello,
    I am working on a large project and I already have 29 user controls at this point. The total number of user controls I might have after the project is complete may be close to 70 items. I am looking for a way to add an icon to these controls when I view them in the asset library, so that selecting the right control for the right situation is a little easier. Is there a way to replace the default gear and wrench icon with one I create myself?

    If anyone can link me to any tutorials or anything like that it would be very helpful.

    Thanks,
    Brian
    Friday, October 2, 2009 1:50 PM

Answers

  • Hi Brian,

    Here is a sample that shows the way to do this for a WPF project (a Silverlight project would look the same). Note that I am not adding the icon to the run-time assembly. Instead, I am creating a design-time assembly for the icon specification - that keeps the size of the assembly smaller and does not increase it just to provide a better design time experience. Of course, you don't need to do this if you don't care about the file size of your run-time assembly and just directly add it to the runtime assembly.

    Build the attached project, launch Blend, and add a reference to the library to your application. The two key things to note in this sample: The build action of the Icon file is EmbeddedResource, and the Icon file is a PNG file. If the PNG file was of the right size as specified in the blog, we would pick up the right icons if there were multiple of them for the Asset tool, object tree, etc.

    http://cid-99b45ff02d12b84d.skydrive.live.com/self.aspx/Public/Scratch/IconControlLibrary.zip

    Thanks,
    Unni
    This posting is provided "AS IS" with no warranties, and confers no rights.
    • Marked as answer by Brian Rod Monday, October 5, 2009 4:52 PM
    Sunday, October 4, 2009 9:25 PM

All replies

  • Hi Brian,

    This post should help:
    http://blogs.msdn.com/unnir/archive/2009/05/22/the-blend-3-asset-library.aspx

    Thanks,
    Unni
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Friday, October 2, 2009 7:39 PM
  • Hello Unni thanks for the response and thanks for your great blog. I was able to add my custom library so that it loads with every blend project by adding the registry key, but I still don't understand what you mean with the icon. I find the blog posting to be really vague and it doesn't really tell me where to add my Png file.

    Here is the Icon paragraph from your blog posting.

    The Icon: For supplying a custom icon, all you need to do is to add an image to the control library (preferrably its design-time library that helps keep the size of the library small) that uses the namespace qualified name of the control for its name. For example, say you had a custom control Foo. The icon would be then called FoosNamespace.Foo.png. Few things to keep in mind: Use EmbeddedResource as the build item for the Image. Blend's asset library only supports PNGs. If you wanted a 24x24 and 12x12 version of icons (since we use these two standard sizes in various places of our UI), all you have to do is to name the PNGs as follows: FoosNamespace.Foo.SmallIcon.PNG, and FoosNamespace.Foo.LargeIcon.PNG. The SmallIcon/LargeIcon part don't actually matter - you can pick a string of your choice, and we will dynamically determine and pick up the appropriate icon for display.

    When you say add an image to the control library do you mean in the project to go to Add existing item and just add the Png file to the project?

    I have a control in my library called ZoneBox for example in the namespace MMSystems.EquipmentLibrary. So I am adding a png to my project called MMSystems.EquipmentLibrary.ZoneBox.LargeIcon.png and MMSystems.EquipmentLibrary.ZoneBox.SmallIcon.png whenever I do this it doesn't update my icon for my ZoneBox control. Am I supposed to add the images as a reference and not as part of the project? Am I supposed to add something to my C# Code behind? I am really lost.

    Thanks,
    Brian

    Sunday, October 4, 2009 8:05 PM
  • Hi Brian,

    Here is a sample that shows the way to do this for a WPF project (a Silverlight project would look the same). Note that I am not adding the icon to the run-time assembly. Instead, I am creating a design-time assembly for the icon specification - that keeps the size of the assembly smaller and does not increase it just to provide a better design time experience. Of course, you don't need to do this if you don't care about the file size of your run-time assembly and just directly add it to the runtime assembly.

    Build the attached project, launch Blend, and add a reference to the library to your application. The two key things to note in this sample: The build action of the Icon file is EmbeddedResource, and the Icon file is a PNG file. If the PNG file was of the right size as specified in the blog, we would pick up the right icons if there were multiple of them for the Asset tool, object tree, etc.

    http://cid-99b45ff02d12b84d.skydrive.live.com/self.aspx/Public/Scratch/IconControlLibrary.zip

    Thanks,
    Unni
    This posting is provided "AS IS" with no warranties, and confers no rights.
    • Marked as answer by Brian Rod Monday, October 5, 2009 4:52 PM
    Sunday, October 4, 2009 9:25 PM
  • Hello Unni,
    Thank you so much for your help. I was able to get it working. The crucial step that I was missing is that I didn't change the build action of the PNG file to an EmbeddedResource.  I am not too familiar with Visual Studio because I am mainly a designer so it took me a little bit to put it all together. Is there a way to modify the build action within Blend or does this always need to be done in Visual Studio? If it needs to be done in Visual Studio that is okay, I just mainly work in Blend.

    Thanks for supporting the community,
    Brian
    Monday, October 5, 2009 4:52 PM