Replace image in imagelist in visual studio without changing the index

Question

I'm using an imagelist with about 100 different icons to be used in a listview in a C# project using Winforms

The images are referred to by the listview by their index.

Now there has been a graphical overhaul, and all of the icons need to be replaced. What I did so far was open up the imagelist in the Visual Studio editor, delete image x with index 5, and then add a new version of image x.

The problem with approach is that when deleting image x, all other images with an index higher than 5 are shifted. And after adding the new version of the icon, I have to click the UP arrow about 95 times to get my new version at index 5 again.

Does anyone know a less painful, and less error prone method to achieve the same result?

Editing the .designer.cs file doesn't really help as it only lists the names of the icons and their index

    // 
    // NavigatorImageList
    // 
    this.NavigatorImageList.ImageStream = ((System.Windows.Forms.ImageListStreamer)(resources.GetObject("NavigatorImageList.ImageStream")));
    this.NavigatorImageList.TransparentColor = System.Drawing.Color.Transparent;
    this.NavigatorImageList.Images.SetKeyName(0, "dummy.png");
    this.NavigatorImageList.Images.SetKeyName(1, "Attribute.png");
    this.NavigatorImageList.Images.SetKeyName(2, "Operation.png");
    this.NavigatorImageList.Images.SetKeyName(3, "Element.png");
    this.NavigatorImageList.Images.SetKeyName(4, "Diagram.png");
    this.NavigatorImageList.Images.SetKeyName(5, "Package_element.png");
    // ...continues like this for all items ....

The actual images are stored in the .resx file, but they are in a binary format, so also not really an option to edit them there

  <data name="NavigatorImageList.ImageStream" mimetype="application/x-microsoft.net.object.binary.base64">
    <value>
        AAEAAAD/////AQAAAAAAAAAMAgAAAFdTeXN0ZW0uV2luZG93cy5Gb3JtcywgVmVyc2lvbj00LjAuMC4w
        LCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPWI3N2E1YzU2MTkzNGUwODkFAQAAACZTeXN0
        ZW0uV2luZG93cy5Gb3Jtcy5JbWFnZUxpc3RTdHJlYW1lcgEAAAAERGF0YQcCAgAAAAkDAAAADwMAAAB2
        1gAAAk1TRnQBSQFMAgEBYwEAAYgBAgGIAQIBEAEAARABAAT/AREBAAj/AUIBTQE2BwABNgMAASgDAAFA
        AwABkAEBAgABAQEAARAGAAHIJgABeAEtAfABHAHwARwB8AEcAfABHAHwARwWAAG4ATUBMAElATABJQEw
... and many many more lines like this...

I know referring to the images by their index might have been a mistake, but it's a bit late in the game to change that now

TL;DR

I'm looking for an easy way to replace the images in my imagelist without having to change my existing working code that relies on the image indexes.

Answer 1

The Image List Editor has an Image property as well which is not browsable by default. As an option you can make that property visible and then you can easily replace the image at design time without any problem.

Look at the following picture and see Image property:

Here is My Image Collection Editor. It's basically the code of the original Image Collection editor with a small change, finding the collection editor's PropertyGrid and resetting its BrowsableAttributes property.

public class MyImageListEditor : CollectionEditor
{
    Type ImageListImageType;
    public MyImageListEditor(Type type) : base(type)
    {
        ImageListImageType = typeof(ControlDesigner).Assembly
            .GetType("System.Windows.Forms.Design.ImageListImage");
    }
    protected override string GetDisplayText(object value)
    {
        if (value == null)
            return string.Empty;
        PropertyDescriptor property = TypeDescriptor.GetProperties(value)["Name"];
        if (property != null)
        {
            string str = (string)property.GetValue(value);
            if (str != null && str.Length > 0)
                return str;
        }
        if (value.GetType() == ImageListImageType)
            value = (object)((dynamic)value).Image;
        string name = TypeDescriptor.GetConverter(value).ConvertToString(value);
        if (name == null || name.Length == 0)
            name = value.GetType().Name;
        return name;
    }
    protected override object CreateInstance(Type type)
    {
        return ((UITypeEditor)TypeDescriptor.GetEditor(ImageListImageType,
            typeof(UITypeEditor))).EditValue(Context, null);
    }
    protected override CollectionEditor.CollectionForm CreateCollectionForm()
    {
        CollectionEditor.CollectionForm collectionForm = base.CreateCollectionForm();
        collectionForm.Text = "My Image Collection Editor";
        var overArchingTableLayoutPanel =  
            (TableLayoutPanel)collectionForm.Controls["overArchingTableLayoutPanel"];
        var propertyBrowser =  
            (PropertyGrid)overArchingTableLayoutPanel.Controls["propertyBrowser"];
        propertyBrowser.BrowsableAttributes = new AttributeCollection();

        return collectionForm;
    }
    protected override IList GetObjectsFromInstance(object instance)
    {
        return (IList)(instance as ArrayList) ?? (IList)null;
    }
}

To register this editor for image list, the easiest solution is registering it inside the constructor of the base class:

public partial class Form1 : MyBaseForm
{
    public Form1()
    {
        InitializeComponent();
    }
}

public class MyBaseForm : Form
{
    public MyBaseForm()
    {
        TypeDescriptor.AddAttributes(typeof(ImageList.ImageCollection),
            new Attribute[] { 
                new EditorAttribute(typeof(MyImageListEditor), typeof(UITypeEditor)) });
    }
}

Then just close all designers, rebuild solution, close and reopen VS.

That's all!