Share via

Alpha Blending in Window Compositor (Compact 7)

  • Article

3/12/2014

Window Compositor uses alpha blending to create a user experience in which overlapping windows appear partially transparent and content on the covered window is still visible. Alpha blending combines the graphical output from multiple applications to create this transparency effect. Window Compositor performs alpha blending by combining the color values for pixels in the overlapping and overlapped windows with a specified alpha value that determines the degree of transparency between the overlapping and overlapped windows.

The Alpha Blending Process

The process by which Window Compositor performs alpha blending is as follows:

  1. When Window Compositor starts, GWES creates one virtual display surface for Window Compositor to use as a canvas to perform window composition, which is the process of combining the visual outputs of the multiple applications onto a single output display. This virtual display surface is called the compositor back surface.
  2. As each application window is created, Window Compositor creates a virtual display surface for the window. This display surface is the window’s back surface.
  3. When the application calls GWES to draw the window, GWES updates the window’s back surface instead of the primary surface. Because this back surface is exclusive to the application window, GWES does not do any clipping, which leaves the window’s back surface as a complete representation of its output.
  4. Window Compositor combines all of the application back surfaces into its own back surface and then updates the primary surface with the resulting combination. To achieve opacity, use Window Compositor APIs to set opacity values either for an entire back surface or for individual pixels in the back surface.

The following figure shows the alpha blending of two windows (1 and 2), each with its own back surface, using the compositor back surface (3).

Alpha Blending

Methods for Alpha Blending

The Window Compositor APIs use several methods to configure the degree of opacity for application windows. A window can be configured to have a single global opacity value for the entire window, or it can be configured so that opacity can be set for individual pixels. The following table describes the Window Compositor methods for configuring the degree of opacity.

Compositor method Description

SetWindowCompositionFlags

Defines the ability of the back surface of an application to set a per-pixel opacity value, or alpha value. To configure the back surface for a 24-bit-per-pixel (bpp) color value and an 8-bit alpha value, call this method with the WCF_ALPHATRANSPARENCY and WCF_TRUECOLOR flags set in the dwFlags parameter. Then the hexadecimal value for each pixel is defined as the following:

0xaarrggbb

In this hexadecimal value:

  • aa represents the alpha value of the pixel.
  • rr represents the intensity of red in the pixel.
  • gg represents the intensity of green in the pixel.
  • bb represents the intensity of blue in the pixel.

To set the alpha value for each pixel, do the following:

  1. Call the CreateSolidBrush function to create a solid brush, and specify the 8-bit alpha value in the aa hexadecimal digits and 0 the for the hexadecimal digits rrggbb in the function’s crColor parameter.
  2. Use the brush you created in the call to CreateSolidBrush to paint the area that receives the back surface opacity.

SetWindowOpacity

Sets an opacity value that Window Compositor uses for the entire window when it composes its back surface.

GetWindowCompositionFlags

Retrieves the window composition flags.

GetWindowOpacity

Retrieves the window opacity value.

If you use XAML to create Microsoft Silverlight for Windows Embedded device applications, you cannot use XAML attributes to set the opacity levels. Instead, you must call the IXRVisualHost::GetContainerHWND method to obtain the window handle and then pass this handle to the SetWindowCompositionFlags or SetWindowOpacity function.

See Also

Concepts

Window Compositor Developer's Guide