Edit

Share via

Shadow

  • Article

The .NET Multi-platform App UI (.NET MAUI) Shadow class paints a shadow around a layout or view. The VisualElement class has a Shadow bindable property, of type Shadow, that enables a shadow to be added to any layout or view.

The Shadow class defines the following properties:

  • Radius, of type float, defines the radius of the blur used to generate the shadow. The default value of this property is 10.
  • Opacity, of type float, indicates the opacity of the shadow. The default value of this property is 1.
  • Brush, of type Brush, represents the brush used to colorize the shadow.
  • OffSet, of type Point, specifies the offset for the shadow, which represents the position of the light source that creates the shadow.

These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Important

The Brush property only currently supports a SolidColorBrush.

Create a Shadow

To add a shadow to a control, set the control's Shadow property to a Shadow object whose properties define its appearance.

The following XAML example shows how to add a shadow to an Image:

<Image Source="dotnet_bot.png"
       WidthRequest="250"
       HeightRequest="310">
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

In this example, a black shadow is painted around the outline of the image, with its offset specifying that it appears at the right and bottom of the image:

Screenshot of an image with a shadow applied.

Shadows can also be added to clipped objects, as shown in the following example:

<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFill"
       HeightRequest="220"
       WidthRequest="220"
       HorizontalOptions="Center">
    <Image.Clip>
        <EllipseGeometry Center="220,250"
                         RadiusX="220"
                         RadiusY="220" />
    </Image.Clip>
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="10,10"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

In this example, a black shadow is painted around the outline of the EllipseGeometry that clips the image:

Screenshot of a clipped image with a shadow applied.

For more information about clipping an element, see Clip with a Geometry.