Compartilhar via

Shadow

  • Artigo

A classe .NET Multi-platform App UI (.NET MAUI) Shadow pinta uma sombra ao redor de um layout ou exibição. A VisualElement classe tem uma propriedade vinculável, do tipo Shadow, que permite que uma Shadow sombra seja adicionada a qualquer layout ou exibição.

A Shadow classe define as seguintes propriedades:

  • Radius, do tipo float, define o raio do desfoque usado para gerar a sombra. O valor padrão dessa propriedade é 10.
  • Opacity, do tipo float, indica a opacidade da sombra. O valor padrão desta propriedade é 1.
  • Brush, do tipo Brush, representa o pincel usado para colorir a sombra.
  • OffSet, do tipo Point, especifica o deslocamento para a sombra, que representa a posição da fonte de luz que cria a sombra.

Essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser alvos de associações de dados e estilizadas.

Importante

No momento, Brush a propriedade oferece suporte apenas a um SolidColorBrusharquivo .

Criar uma sombra

Para adicionar uma sombra a um controle, defina a propriedade do Shadow controle como um Shadow objeto cujas propriedades definem sua aparência.

O exemplo XAML a seguir mostra como adicionar uma sombra a um 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>

Neste exemplo, uma sombra preta é pintada ao redor do contorno da imagem, com seu deslocamento especificando que ela aparece à direita e na parte inferior da imagem:

Screenshot of an image with a shadow applied.

As sombras também podem ser adicionadas a objetos cortados, conforme mostrado no exemplo a seguir:

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

Neste exemplo, uma sombra preta é pintada ao redor do contorno EllipseGeometry do que recorta a imagem:

Screenshot of a clipped image with a shadow applied.

Para obter mais informações sobre como recortar um elemento, consulte Clipe com uma geometria.