Sombra

A classe de interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) Shadow pinta uma sombra em torno de um layout ou exibição. A classe VisualElement tem uma propriedade Shadow vinculável, do tipo Shadow, que permite que uma sombra seja adicionada a qualquer layout ou visualização.

A classe Shadow 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 dessa propriedade é 1.
• Brush, do tipo Brush, representa o pincel usado para colorir a sombra.
• Offset, do tipo Point, especifica o deslocamento da sombra, que representa a posição da fonte de luz que cria a sombra.

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

Importante

Atualmente, a propriedade Brush suporta um SolidColorBrush.

Criar uma sombra

Para adicionar uma sombra a um controle, defina a propriedade Shadow do controle como uma cadeia de caracteres formatada que define a sombra. Há três formatos de cadeia de caracteres com suporte:

• 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" />
  

As cores podem ser especificadas usando os seguintes formatos:

Formato	Exemplo	Comentários
MALDIÇÃO	#rgb, #argb, #rrggbb, #aarrggbb
RGB	rgb(255,0,0), rgb(100%,0%,0%)	Os valores válidos estão no intervalo de 0 a 255 ou 0%-100%.
RGBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	Os valores de opacidade válidos são 0.0-1.0.
HSL	hsl(120, 100%, 50%)	Os valores válidos para h são de 0 a 360 e para s e l são 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	Os valores de opacidade válidos são 0.0-1.0.
HSV	hsv(120, 100%, 50%)	Os valores válidos para h são de 0 a 360 e para s e v são 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	Os valores de opacidade válidos são 0.0-1.0.
Cor predefinida	fuchsia, AquaMarine, limegreen	Cadeias de caracteres de cor não diferenciam maiúsculas de minúsculas.

Como alternativa, a propriedade Shadow do controle pode ser definida como um objeto Shadow, usando a sintaxe do elemento de propriedade, cujas propriedades definem sua aparência.

O exemplo XAML a seguir mostra como adicionar uma sombra a uma Image usando a sintaxe do elemento de propriedade:

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

Sombras também podem ser adicionadas a objetos recortados, 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 do EllipseGeometry que recorta a imagem.

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