Compartir vía

Shadow

  • Artículo

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 propiedades siguientes:

  • 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 los enlaces de datos, y con estilo.

Importante

Actualmente, la propiedad Brush solo admite SolidColorBrush.

Crear una sombra

Para agregar una sombra a un control, establece la propiedad Shadow del control en un objeto Shadow objeto cuyas propiedades definen su apariencia.

En el ejemplo de XAML siguiente se muestra cómo agregar una sombra a 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>

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:

Screenshot of an image with a shadow applied.

Las sombras se pueden agregar a objetos recortados, tal 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 de EllipseGeometry que recorta la imagen:

Screenshot of a clipped image with a shadow applied.

Para obtener más información, consulta Recortar con una geometría.