Sombra

La clase .NET Multi-platform App UI (.NET MAUI) Shadow pinta una sombra alrededor de un diseño o vista. La clase VisualElement tiene una propiedad enlazable Shadow, de tipo Shadow, que permite agregar una sombra a cualquier diseño o vista.

La clase Shadow define las siguientes propiedades:

• Radius, de tipo float, define el radio del desenfoque usado para generar la sombra. El valor predeterminado de esta propiedad es 10.
• Opacity, de tipo float, indica la opacidad de la sombra. El valor predeterminado de esta propiedad es 1.
• Brush, de tipo Brush, representa el pincel usado para colorear la sombra.
• Offset, de tipo Point, especifica el desplazamiento de la sombra, que representa la posición de la fuente de luz que crea la sombra.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de enlaces de datos y también se pueden estilizar.

Importante

La propiedad Brush actualmente solo admite un SolidColorBrush.

Crear una sombra

Para agregar una sombra a un control, establezca la propiedad Shadow del control en una cadena con formato que defina la sombra. Hay tres formatos de cadena admitidos:

• color, offset X, offset Y:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="#000000 4 4" />
  

• offset X, offset Y, radius, color:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="5 8 8 rgb(6, 201, 198)" />    
  

• offset X, offset Y, radius, color, opacity:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="4 4 16 AliceBlue 0.5" />
  

Los colores se pueden especificar con los siguientes formatos:

Formato	Ejemplo	Comentarios
HECHIZO	#rgb, #argb, #rrggbb, #aarrggbb
RGB	rgb(255,0,0), rgb(100%,0%,0%)	Los valores válidos están en el intervalo entre 0 y 255 o 0%-100%.
RGBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	Los valores de opacidad válidos son 0.0-1.0.
HSL	hsl(120, 100%, 50%)	Los valores válidos para h son 0-360, y para s y l son 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	Los valores de opacidad válidos son 0.0-1.0.
HSV	hsv(120, 100%, 50%)	Los valores válidos para h son 0-360, y para s y v son 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	Los valores de opacidad válidos son 0.0-1.0.
Color predefinido	fuchsia, AquaMarine, limegreen	Las cadenas de color no distinguen mayúsculas de minúsculas.

Como alternativa, la propiedad Shadow del control se puede establecer en un objeto Shadow, mediante la sintaxis del elemento de propiedad, cuyas propiedades definen su apariencia.

En el ejemplo XAML siguiente se muestra cómo agregar una sombra a un Image mediante la sintaxis del elemento de propiedad:

<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>

En este ejemplo, se pinta una sombra negra alrededor del contorno de la imagen, con su desplazamiento especificando que aparece en la parte derecha e inferior de la imagen:

Las sombras también se pueden agregar a objetos recortados, como se muestra en el ejemplo siguiente:

<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>

En este ejemplo, se pinta una sombra negra alrededor del contorno del EllipseGeometry que recorta la imagen:

Para obtener más información sobre cómo recortar un elemento, vea Clip con una geometría.