Ombre

La classe Shadow de .NET MAUI dessine une ombre autour d’un agencement ou d’une vue. La classe VisualElement a une propriété Shadow pouvant être liée, de type Shadow, qui permet d’ajouter une ombre à n’importe quelle disposition ou vue.

La classe Shadow définit les propriétés suivantes :

• Radius, de type float, définit le rayon du flou utilisé pour générer l’ombre. La valeur par défaut de cette propriété est 10.
• Opacity, de type float, indique l’opacité de l’ombre. La valeur par défaut de cette propriété est 1.
• Brush, de type Brush, représente le pinceau utilisé pour coloriser l’ombre.
• Offset, de type Point, spécifie le décalage de l’ombre, qui représente la position de la source de lumière qui crée l’ombre.

Ces propriétés sont sauvegardées par des objets BindableProperty, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

Important

Actuellement, la propriété Brush ne prend en charge qu'un SolidColorBrush.

Créer une ombre

Pour ajouter une ombre à un contrôle, définissez la propriété Shadow du contrôle sur une chaîne mise en forme qui définit l’ombre. Il existe trois formats de chaîne pris en charge :

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

Les couleurs peuvent être spécifiées à l’aide des formats suivants :

Format	Exemple	Commentaires
SORTILÈGE	#rgb, #argb, #rrggbb, #aarrggbb
RVB	rgb(255,0,0), rgb(100%,0%,0%)	Les valeurs valides se trouvent dans la plage 0-255 ou 0%-100%.
RVBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	Les valeurs d’opacité valides sont 0.0-1.0.
HSL	hsl(120, 100%, 50%)	Les valeurs valides pour h sont 0-360, et pour les s et les l sont 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	Les valeurs d’opacité valides sont 0.0-1.0.
HSV	hsv(120, 100%, 50%)	Les valeurs valides pour h sont 0-360, et pour les s et les v sont 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	Les valeurs d’opacité valides sont 0.0-1.0.
Couleur prédéfinie	fuchsia, AquaMarine, limegreen	Les chaînes de couleur sont insensibles à la casse.

Vous pouvez également définir la propriété Shadow du contrôle sur un objet Shadow, à l’aide de la syntaxe de l’élément de propriété, dont les propriétés définissent son apparence.

L’exemple XAML suivant montre comment ajouter une ombre à un Image à l’aide de la syntaxe de l’élément de propriété :

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

Dans cet exemple, une ombre noire est peinte autour du contour de l’image, avec son décalage spécifiant qu’il apparaît à droite et en bas de l’image :

Les ombres peuvent également être ajoutées aux objets clippés, comme illustré dans l’exemple suivant :

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

Dans cet exemple, une ombre noire est appliquée autour du contour du EllipseGeometry qui délimite l’image :

Pour plus d’informations sur le découpage d’un élément, consultez Clip avec uneGéométrie.