Published
Wednesday, September 20, 2006 9:57 AM
by
martin
You can quite easily provide your own images to be used inside controls when you extend the Ribbon, see this earlier post about transforming them into IPictureDisp format. I created my own image, using the latest CTP of Expression Graphic Designer, which you can download here. It's easy enough to draw your design, rasterize it, then resize it to fit inside a 32x32 square (so you can see what it'll look like inside a large Ribbon button). The trouble is, if you use that image it appears on a white background. Take a look at the illustration (good to see all those years at art school didn't go to waste - ahem).
We want that white background to appear transparent, so the image looks much more a part of the button. As you can see, it is possible to put transparency into the image, but how...?
Firstly, I chose to export my image from Expression Graphic Designer in BMP format. I think this is important because in a high-quality GIF or JPEG image, the background is not uniformly white - the compression can do odd things to it that aren't immediately obvious to the eye.
Next, I load my bitmap into Paint, and I modify the palette to include a new custom colour. I define a colour using RGB values (you'll see why later) and I choose a colour that's definitely not used in any part of the image that I want to remain visible.
In this image, I choose a bright orange colour, RGB(255,128,0). I used the fill tool in Paint to block out the background of the image in this new colour.
In an earlier post, I showed the options for loading images into the Ribbon. In this case I'm using the getImage callback, as follows...
Public Function GetOrigImage(ByVal control As Office.IRibbonControl) As stdole.IPictureDisp
Return RibbonImageConverter.Convert(My.Resources.Images.strike)
End Function
(See here for the RibbonImageConverter class implementation).
But if I use that code, I'll actually see my bright orange background on the Ribbon. I need to do something else to make that orange in my image turn transparent. Here's the code I used...
Public Function GetTransImage(ByVal control As Office.IRibbonControl) As stdole.IPictureDisp
Dim demoImage As Bitmap = My.Resources.Images.strikeTrans
demoImage.MakeTransparent(Color.FromArgb(255, 255, 128, 0))
Return RibbonImageConverter.Convert(demoImage)
End Function
As you can see, I create an instance of System.Drawing.Bitmap from my embedded resource. I then call its MakeTransparent method, passing in a new colour whose RGB values match those I chose inside Paint. I convert the resulting image to an IPictureDisp and give it back to the Ribbon.