Condividi tramite


Shadow

La classe .NET Multipiattaforma App UI (.NET MAUI) Shadow disegna un'ombreggiatura intorno a un layout o a una visualizzazione. La VisualElement classe ha una Shadow proprietà associabile di tipo Shadow, che consente di aggiungere un'ombreggiatura a qualsiasi layout o visualizzazione.

La Shadow classe definisce le proprietà seguenti:

  • Radius, di tipo float, definisce il raggio della sfocatura usata per generare l'ombreggiatura. Il valore predefinito di questa proprietà è 10.
  • Opacity, di tipo float, indica l'opacità dell'ombreggiatura. Il valore predefinito di questa proprietà è 1.
  • Brush, di tipo Brush, rappresenta il pennello utilizzato per colorare l'ombreggiatura.
  • OffSet, di tipo Point, specifica l'offset per l'ombreggiatura, che rappresenta la posizione della sorgente di luce che crea l'ombreggiatura.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Importante

La Brush proprietà supporta attualmente solo un oggetto SolidColorBrush.

Creare un'ombreggiatura

Per aggiungere un'ombreggiatura a un controllo, impostare la proprietà del Shadow controllo su un Shadow oggetto le cui proprietà ne definiscono l'aspetto.

L'esempio XAML seguente illustra come aggiungere un'ombreggiatura a un Imageoggetto :

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

In questo esempio, un'ombreggiatura nera viene dipinta intorno al contorno dell'immagine, con l'offset che ne specifica l'aspetto a destra e in basso dell'immagine:

Screenshot of an image with a shadow applied.

Le ombreggiature possono essere aggiunte anche agli oggetti ritagliati, come illustrato nell'esempio seguente:

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

In questo esempio, un'ombreggiatura nera viene dipinta intorno al contorno dell'immagine EllipseGeometry che ritaglia l'immagine:

Screenshot of a clipped image with a shadow applied.

Per altre informazioni sul ritaglio di un elemento, vedere Ritagliare con una geometria.