lördag, oktober 13, 2007
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.
AlphaImageExample.zip
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.
AlphaImageExample.zip
Etiketter: netcf, programming, windows forms, windows mobile
Kommentarer:
Länkar till det här inlägget:
<< Startsida
Hi, I found this functionality worked really well but I cant get the on click functionality to work ? Any ideas why ?
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
Regards,
Johan
hi,
I have tried a number of things to get the occlick functionality working includign the attached examples
http://blogs.msdn.com/davidklinems/archive/2005/11/23/496552.aspx
Neither of which work.
Can you see any reason why this wouldnt work ?
I can post code if this makes it easier?
Many thanks
Ian
I have tried a number of things to get the occlick functionality working includign the attached examples
http://blogs.msdn.com/davidklinems/archive/2005/11/23/496552.aspx
Neither of which work.
Can you see any reason why this wouldnt work ?
I can post code if this makes it easier?
Many thanks
Ian
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
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
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);
}
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);
}
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, Edward
mailto:dasisgut@gmail.com
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, Edward
mailto:dasisgut@gmail.com
Hi Andersson
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.
Thanks and regards
Subasish
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.
Thanks and regards
Subasish
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.
Thanks
psspl
Skicka en kommentar
{"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
psspl
Länkar till det här inlägget:
<< Startsida
Prenumerera på Inlägg [Atom]




