A solution for transparent images on Compact Framework
Recently I worked on the problem of getting full 8-bit image transparency on Windows Forms using the .Net Compact Framework. I have tried to find a nice solution before, but at the time, I didn’t find a solution that gave me the results I wanted.
Yesterday I visited the local Microsoft sub-office here in Stockholm to attend to a Mobility Day event. After the event I sent an e-mail to David Goon (ADC at Microsoft Ltd., UK), the guy who held the talk during the second part of the day. He showed the audience a numerous of cool new things that you can do with the Microsoft Mobile Sample wrapper APIs for GPS integration, message interception using the Messaging API, and a few cool things with the Camera API (but that’s another blog entry 
).
I asked him if he was aware of a solution to my transparency problem what regards Windows Mobile 5+6, and he led me to my previous stop in an attempt to achieve this effect:
“With regards to alpha blending, the following blog might give you some clues: http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx.”
After re-reading Chris’ sample code, I modified it a bit to suite my needs. My example code can be downloaded here.
I created two new classes that uses the imaging features that Chris uses:
AlphaImage – A wrapper class for the IImage interface that can be used like the System.Drawing.Image class (but with alpha support of course).
AlphaImageControl - A form widget that works like the PictureBox that uses an AlphaImage instance. This widget can of course easily be accessed from the toolbox in the IDE.
The image I have used in my example is a 24-bit PNG with white text surrounded by a lot of transparent pixels. The form that the image control is placed on has a solid background color (SystemColors.Control).
Here is a capture from the emulator of the result:
And what you will see in the IDE designer is:
Thanks Chris for an excellent piece of code (this is your code, I just wrapped it all together).
Thanks David for pointing me back in the right direction!
According to my tests, this works just fine in the PocketPC emulator (see attached image) using Windows Mobile 5 as well as on a HTC TyTn II device, which operates on Windows Mobile 6 Professional Edition. However, I can not guarantee that this will work as expected on any Windows Mobile device.
This posting is provided “AS IS” with no warranties.
Ian; Good point, thanks for mentioning! I guess you have to attach to the Click event on the parent Control and do some hit testing. The trick with the Paint event is to attach to the parent control’s Paint and draw the image on the parent control’s surface. I hope you find a solution that meet your needs.Regards,Johan
Johan Andersson
October 20, 2007 at 13:16
hi,I have tried a number of things to get the occlick functionality working includign the attached exampleshttp://blogs.msdn.com/davidklinems/archive/2005/11/23/496552.aspxNeither of which work. Can you see any reason why this wouldnt work ?I can post code if this makes it easier?Many thanksIan
Ian
October 22, 2007 at 12:14
Hi Mr. Andersson,Thanks for the great control. but there’s something wrong with it Visible = false, click etc nothing works. Can you check it and tell us why? Especially the Visible attribute cause maybe u want to hide the picture and bring it back.thanks
mrabie
January 9, 2008 at 09:46
The control is hidden to allow the transparent background to work. So to get mouse events to work you need some fakery. Update AlphaImageControl as follows: int downX, downY, upX, upY; protected override void OnParentChanged(EventArgs e) { base.OnParentChanged(e); // Hook on the paint event on the parent container Parent.Paint += Parent_Paint; //Because this control is hidden when the Image property is set we need to catch the parents mouse events //and fake the ones for this control using translated coordinates. Parent.Click += Parent_Click; Parent.MouseUp += Parent_MouseUp; Parent.MouseDown += Parent_MouseDown; Parent.MouseMove += Parent_MouseMove; } void Parent_MouseDown(object sender, MouseEventArgs e) { downX = upX = e.X; downY = upY = e.Y; if (Bounds.Contains(e.X, e.Y)) OnMouseDown(new MouseEventArgs(e.Button,0,e.X – Bounds.X,e.Y -Bounds.Y,0)); } void Parent_MouseUp(object sender, MouseEventArgs e) { upX = e.X; upY = e.Y; //if the mouse went down and up in this control generate a mouse up event for this control if (Bounds.Contains(downX, downY) && Bounds.Contains(e.X, e.Y)) OnMouseUp(new MouseEventArgs(e.Button, 0, e.X – Bounds.X, e.Y – Bounds.Y,0)); } void Parent_MouseMove(object sender, MouseEventArgs e) { //need to track the move because the click fires before the MouseUp upX = e.X; upY = e.Y; //if the mouse went down in this control and the move is in it generate a mouse move event for this control if (Bounds.Contains(downX, downY) && Bounds.Contains(e.X,e.Y)) OnMouseMove(new MouseEventArgs(e.Button, 0, e.X – Bounds.X, e.Y – Bounds.Y,0)); } void Parent_Click(object sender, EventArgs e) { if (Bounds.Contains(downX, downY) && Bounds.Contains(upX, upY)) this.OnClick(e); }
indiekiduk
March 8, 2008 at 13:51
Thanks Indiekiduk for your solution on the problem with the click handler!- Johan
Johan Andersson
March 9, 2008 at 21:16
indiekiduk = http://www.malcolmhall.com/ and http://www.aspecto-software.com/ ?
Johan Andersson
March 10, 2008 at 17:42
yes all those are me. And http://imalc.com
indiekiduk
March 16, 2008 at 05:01
Hi, Mr Andersson.I have a “little” question: how can i resize an AlphaImage? Or paraphrase: how to draw IBitmapImage? Idea: I think to go that way: call CreateBitmapFromImage which resize source IImage and get resized IBitmapImage. But HOW to Draw it?Thanx for any solutions!Regards, Edwardmailto:dasisgut@gmail.com
Anonymous
May 29, 2008 at 13:18
Hi AnderssonI am getting an error that goes like this{“Unspecified error “},Error Code -2147467259, COM Exception was unhandled , when I am trying to draw certain images using the imaging resource.Can you please explain me where am I going wrong.Thanks and regardsSubasish
Anonymous
September 11, 2008 at 13:03
I am getting an error that goes like this{"Unspecified error "},Error Code-2147467259, COM Exception was unhandled , when I am trying to draw certain images using the imaging resource.Can you please explain me where am I going wrong.Thankspsspl
Anonymous
October 31, 2009 at 05:36
Hi,Good control, but it does not work when placed over a Panel. Any Idea ?
artcoding
February 8, 2010 at 14:32
Can you fix the link for AlphaImageExample.zip? I’d love to see the source.
Chublogga
July 22, 2010 at 07:02
Thank you for notifying me Chublogga!
All links should work now, please tell me if they aren’t.
Regards,
Johan
anderssonjohan
July 27, 2010 at 11:50