Alpha Blending and Alpha Channel on Windows Mobile

Alpha Blending and Alpha Channel on Windows Mobile

      In 2007, in the article " Compelling UI's in NetCF anybody? " , Alex described how to use AlphaBlend to make a cool transparent picture interface on the windows mobile 5 platform . On the recent webcast " 24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications ", he described the current trend of windows mobile interface design, which also involved Alpha Blending and Alpha Channel technologies. The two concepts are explained below.

    On the encyclopedia wiki, we can find the explanation of this Alpha compositing . In computer graphics, alpha compositing is a technology that combines pictures and backgrounds to create partial transparency. Alpha Channel was first proposed by AR Smith in the 1970s, and finally matured in 1984 by Thomas Porter and Tom Duff . Simply put, the traditional color of a pixel is represented by RGB , and in Alpha Channel, a fourth parameter needs to be added, such as (0.0, 0.5, 0.0, 0.5), the first three parameters "0.0 , 0.5, 0.0" means RGB, and the fourth parameter 0.5 means Alpha value. Therefore, in Thomas Porter and Tom Duff ’s paper, they used the Alpha value to define 5 operations (over, in, out, atop, xor) for the synthesis of two pictures. The effect can be seen in Figure 1:

Figure 1: 5 kinds of calculation renderings (picture taken from Alpha compositing )

    Currently, operating systems/GUIs that support Alpha Blending include the following:

    Starting from windows mobile 5.0, the platform has already supported the local call of Alpha Blending. At http://code.msdn.microsoft.com/uiframework the course code of , we can see that in the project, he uses P/Invoke:

Code [DllImport("coredll.dll")] extern public static Int32 AlphaBlend(IntPtr hdcDest, Int32 xDest, Int32 yDest, Int32 cxDest, Int32 cyDest, IntPtr hdcSrc, Int32 xSrc, Int32 ySrc, Int32 cFunction, BlendFunction, Int32 ;

    Encapsulates the DrawAlpha method:

Code public static void DrawAlpha(this Graphics gx, Bitmap image, byte transparency, int x, int y) {using (Graphics gxSrc = Graphics.FromImage(image)) {IntPtr hdcDst = gx.GetHdc(); IntPtr hdcSrc = gxSrc. GetHdc(); BlendFunction blendFunction = new BlendFunction(); blendFunction.BlendOp = (byte)BlendOperation.AC_SRC_OVER;//Only supported blend operation blendFunction.BlendFlags = (byte)BlendFlags.Zero;//Documentation says put 0 here blendFunction.SourceConstantAlpha = transparency;//Constant alpha factor blendFunction.AlphaFormat = (byte)0;//Don't look for per pixel alpha PlatformAPIs.AlphaBlend(hdcDst, x, y,image.Width, image.Height, hdcSrc, 0, 0, image.Width, image.Height, blendFunction); gx.ReleaseHdc(hdcDst);//Required cleanup to GetHdc() gxSrc.ReleaseHdc(hdcSrc);//Required cleanup to GetHdc()}}

    Finally, the author gives the application of this method, a Slide Show that displays the weather UI and pictures on the desktop. At the same time, you can use the following code to hide the title bar and display the application in full screen.

Code//Don't show title bar and allocate the full screen this.FormBorderStyle = FormBorderStyle.None; this.WindowState = FormWindowState.Maximized; 

    In addition, the author also gives the color change processing of the button floating and pressed state, as well as the processing of text text embedding. If you need it, you can download it for reference.

    The final display effect is shown in Figure 2 below:

Figure 2: Program UI effect

    The following figure is the comparison between the normal status of Location and the time when it is pressed:

Figure 3: Different effects of buttons

Reference link:

Alex : Compelling UI's in NetCF anybody?

MSDN: AlphaBlend

Webcast: 24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications "

Wiki: Alpha compositing

Reference: https://cloud.tencent.com/developer/article/1018097 Alpha Blending and Alpha Channel on Windows Mobile-Cloud + Community-Tencent Cloud