Schatten

Die .NET Mehrplattform App-Benutzeroberfläche (.NET MAUI) Shadow Class malt einen Schatten um ein Layout oder eine Ansicht. Die VisualElement Klasse verfügt über eine Shadow bindungsfähige Eigenschaft vom Typ Shadow, die es ermöglicht, einem beliebigen Layout oder einer Ansicht einen Schatten hinzuzufügen.

Die Shadow Klasse definiert die folgenden Eigenschaften:

• Radiusvom Typ floatdefiniert den Radius der Unschärfe, die zur Schattenbildung verwendet wird. Der Standardwert dieser Eigenschaft ist 10.
• Opacity, vom Typ float, gibt die Deckkraft des Schattens an. Der Standardwert dieser Eigenschaft ist 1.
• Brush, vom Typ Brush, stellt den Pinsel dar, der zum Färben des Schattens verwendet wird.
• Offset, vom Typ Point, gibt den Offset für den Schatten an, der die Position der Lichtquelle darstellt, die den Schatten erstellt.

Diese Eigenschaften werden durch BindableProperty Objekte gesichert, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Wichtig

Die Brush-Eigenschaft unterstützt derzeit nur eine SolidColorBrush.

Erstellen eines Schattens

Wenn Sie einem Steuerelement einen Schatten hinzufügen möchten, legen Sie die Shadow-Eigenschaft des Steuerelements auf eine formatierte Zeichenfolge fest, die den Schatten definiert. Es gibt drei unterstützte Zeichenfolgenformate:

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

Farben können mit den folgenden Formaten angegeben werden:

Format	Beispiel	Kommentare
HEXENFLUCH	#rgb, #argb, #rrggbb, #aarrggbb
RGB (Rot, Grün, Blau)	rgb(255,0,0), rgb(100%,0%,0%)	Gültige Werte befinden sich im Bereich 0-255 oder 0%-100%.
RGBA	rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8)	Gültige Deckkraftwerte sind 0,0-1,0.
HSL	hsl(120, 100%, 50%)	Gültige Werte für h sind 0-360, und für s und l sind 0%-100%.
HSLA	hsla(120, 100%, 50%, .8)	Gültige Deckkraftwerte liegen im Bereich von 0,0 bis 1,0.
HSV	hsv(120, 100%, 50%)	Gültige Werte für h sind 0-360, und für s und v sind 0%-100%.
HSVA	hsva(120, 100%, 50%, .8)	Gültige Werte für die Deckkraft sind 0.0-1.0.
Vordefinierte Farbe	fuchsia, AquaMarine, limegreen	Bei Farbzeichenfolgen wird die Groß-/Kleinschreibung nicht beachtet.

Alternativ kann die Shadow-Eigenschaft des Steuerelements auf ein Shadow-Objekt festgelegt werden, wobei die Eigenschaftselementsyntax verwendet wird, deren Eigenschaften die Darstellung definieren.

Das folgende XAML-Beispiel zeigt, wie Sie einem Image mithilfe der Eigenschaftenelementsyntax einen Schatten hinzufügen:

<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 diesem Beispiel wird ein schwarzer Schatten um die Kontur des Bilds gezeichnet, wobei der Offset angibt, dass er rechts und unten im Bild angezeigt wird:

Schatten können auch zu beschnittenen Objekten hinzugefügt werden, wie im folgenden Beispiel gezeigt:

<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 diesem Beispiel wird ein schwarzer Schatten um die Kontur des EllipseGeometry gezeichnet, der das Bild abschneidet.

Weitere Informationen zum Ausschneiden eines Elements finden Sie unter Ausschneiden mit einer Geometrie.