Compartilhar via


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, use a sintaxe do elemento de propriedade para definir a propriedade Shadow do controle como um objeto Shadow cujas propriedades definem sua aparência.

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.

Captura de tela de uma imagem com uma sombra aplicada.

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.

Captura de tela de uma imagem recortada com uma sombra aplicada.

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