How do I insert a custom image into a Ribbon using Excel DNA in C#?

I am using Visual Studio Pro 2022 and Excel DNA v1.7.0 to build an XLL in C#, with a series of custom Ribbon buttons.

I have currently got all of the Ribbon XML inserted as a string, returned as part of the Ribbon controller method:

public override string GetCustomUI(string RibbonID)
{
    return @"
        <customUI xmlns='http://schemas.microsoft.com/office/2006/01/customui'>
            <ribbon>
                // XML here
            </ribbon>

        </customUI>";
}

I am currently just using existing msoImage icons for the buttons I need, as a temporary measure, but some of the buttons really need a custom image.

I know, from the Excel DNA documentation, that it is feasible to do this, but cannot find any specific examples/tutorials/guidance on how to do this. I also note that most of the existing Excel DNA guidance talks about putting this sort of customisation in the .dna file, but I do not have a .dna file on my project (I assume this is a change in Excel DNA behaviour in v1.7.0).

So I guess I have two subquestions that address the underlying issue of getting a custom image into a Ribbon:

How do I store the Ribbon XML code in a separate file (so that I can take advantage of XML linting when doing this development etc.)? (Excel DNA documentation indicates this is possible but I have never seen how)
How do I specify in the XML to load a custom image? (would I benefit from using Excel DNA for this, and if so, how do I do it?)

I do not need to load anything dynamically - this is all a static Ribbon that loads its buttons once on starting Excel, which should keep things relatively simple, I hope?

Solution

Here's a sample project that addresses both questions: https://github.com/govert/RibbonStart This writeup is also useful - https://github.com/Excel-DNA/Tutorials/tree/master/Fundamentals/RibbonBasics with some relevant links and the image story, though it uses VB.NET.

It is created from the "Excel-DNA Full Features Add-in" template in the ExcelDna.Templates NuGet package. I can't remember how to install this package so that the project templates appear in Visual Studio. But the example repository has the bits you're asking about.

To use the xml markup in a separate file, you set it up as a normal C# file resource, and add a helper that will extract and return from the ribbon class's GetCustomUI implementation. The resource management is standard C# stuff. The file then contains the ribbon markup as usual.
For images you need to add a loadImage callback to the <customUI> tag. The implementing method has this signature, and possible implementation:

        public override object LoadImage(string imageId)
        {
            // This will return the image resource with the name specified in the image='xxxx' tag
            return RibbonResources.ResourceManager.GetObject(imageId);
        }

You can return a .NET Bitmap from here, no need to bother with IPictureDisp as you might see in some examples. The image might also come from a resource in your C# assembly. The imageId is put into the individual ribbon components to identify which image to load.

Anyway, you should be able to see all of this from the sample and get started from there.