The Mosaic class Views::Shadow implements a primitive graphical object specialized to display a blurred rectangle. This so-called Shadow view can be used to compose the appearance of a GUI component, in particular to display shadow or glow effects. The following screenshot demonstrates few examples of how Shadow views appear in the canvas area of Composer (and accordingly on the screen in your target device):

The following sections are intended to provide you an introduction and useful tips of how to work with the Shadow view. For the complete reference please see the documentation of the Views::Shadow class.

To add a new Shadow view just at the design time of a GUI component do following:

As long as the Shadow view is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Bounds in the screenshot below:

Once added, you can freely move the Shadow view, or you simply grab one of its corners and resize it in this way. You can control the position and the size of the view also by directly modifying its property Bounds. If you want the Shadow view to appear behind other views you can reorder it explicitly.

To specify the color of the Shadow view you change its property Color. Using color values with alpha < 255 causes the shadow to appear semi- or even transparent. For example:

From technical point of view, the shadow (or glow) effect is achieved by applying a blur filter on the image of the rectangle. The intensity of this filter is controlled by the property BlurRadius. This value is expressed in pixel and determines the area around a pixel to take in account when calculating the blur effect at the respective position. The larger the specified blur radius, the more intensive the resulting blur effect. Configuring the property with the value 0 (zero) disables the blur effect again:

Per default, the shadow (or glow) effect spreads equally around the area of the rectangle. By using the property Offset a displacement for the effect can applied resulting in the shadow being moved. The following figure demonstrates the effect. The thin blue borders indicate the areas of the respective Shadow views. Please note, unlike other views, the shadows are not clipped at the edges of the Shadow view:

Per default the shadow view appears as rectangle with sharp corners. By using the property Radius a rounding for all four rectangle corners can be specified. The value is expressed in pixel. With the properties RadiusTL, RadiusTR, RadiusBL, RadiusBR the rounding of each corner can be specified individually. For example:

The visibility of the Shadow view is controlled primarily by the property Visible and the specified color values. Per default the views appear alpha-blended over the contents lying behind them unless you explicitly disable this mode by setting the property AlphaBlended to the value false. In such case, the shadow will overwrite the contents in the background. For example: