Ombra

L'interfaccia utente multipiattaforma di .NET (.NET MAUI) della classe Shadow disegna un'ombra intorno a un layout o una vista. La classe VisualElement ha una proprietà associabile Shadow, di tipo Shadow, che consente di aggiungere un'ombreggiatura a qualsiasi layout o visualizzazione.

La classe Shadow 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'ombra. 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 oggetti BindableProperty, il che significa che possono essere destinazioni di associazioni di dati e stili.

Importante

La proprietà Brush supporta attualmente solo un SolidColorBrush.

Creare un'ombra

Per aggiungere un'ombreggiatura a un controllo, impostare la proprietà Shadow del controllo su una stringa formattata che definisce l'ombreggiatura. Esistono tre formati di stringa supportati:

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

I colori possono essere specificati usando i formati seguenti:

Formato	Esempio	Commenti
MALOCCHIO	#rgb, #argb, #rrggbb, #aarrggbb
RGB	rgb(255,0,0), rgb(100%,0%,0%)	I valori validi sono compresi nell'intervallo 0-255 o 0%-100%.
RGBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	I valori di opacità validi sono 0,0-1.0.
HSL	hsl(120, 100%, 50%)	I valori validi per h sono 0-360 e per s e l sono 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	I valori di opacità validi sono 0,0-1.0.
HSV	hsv(120, 100%, 50%)	I valori validi per h sono 0-360 e per s e v sono 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	I valori di opacità validi sono 0,0-1.0.
Colore predefinito	fuchsia, AquaMarine, limegreen	Le stringhe di colore non fanno distinzione tra maiuscole e minuscole.

In alternativa, la proprietà Shadow del controllo può essere impostata su un oggetto Shadow, utilizzando la sintassi dell'elemento proprietà, le cui proprietà ne definiscono l'aspetto.

L'esempio XAML seguente mostra come aggiungere un'ombreggiatura a un Image usando la sintassi dell'elemento proprietà:

<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 specifica la sua apparizione sul lato destro e in basso dell'immagine.

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 viene dipinta un'ombra nera intorno al contorno del EllipseGeometry che ritaglia l'immagine.

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