Partager via

Shadow

  • Article

La classe .NET Multiplateform App UI (.NET MAUI) Shadow peint une ombre autour d’une disposition ou d’une vue. La VisualElement classe a une Shadow propriété pouvant être liée, de type Shadow, qui permet à une ombre d’être ajoutée à n’importe quelle disposition ou vue.

La Shadow classe 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 BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

Important

La Brush propriété prend uniquement en charge un SolidColorBrush.

Créer une ombre

Pour ajouter une ombre à un contrôle, définissez la propriété du Shadow contrôle sur un Shadow objet dont les propriétés définissent son apparence.

L’exemple XAML suivant montre comment ajouter une ombre à un 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>

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 :

Screenshot of an image with a shadow applied.

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 peinte autour du contour de l’image EllipseGeometry :

Screenshot of a clipped image with a shadow applied.

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