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.
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.
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:
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:
For more information about clipping an element, see Clip with a Geometry.
Submit and view feedback for