Freigeben über

Shadow

  • Artikel

Die .NET Multi-Platform App UI-Shadow-Klasse (.NET MAUI) zeichnet einen Schatten um ein Layout oder eine Ansicht. Die Klasse VisualElement verfügt über eine bindungsfähige Shadow-Eigenschaft vom Typ Shadow, mit der einem beliebigen Layout oder einer Ansicht ein Schatten hinzugefügt werden kann.

Die Shadow-Klasse definiert die folgenden Eigenschaften:

  • Radius, vom Typ float, definiert den Radius des Weichzeichners, der zum Generieren des Schattens 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, steht für den Pinsel, 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 erzeugt.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Wichtig

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

Erstellen eines Schattens

Wenn Sie einen Schatten zu einem Steuerelement hinzufügen möchten, legen Sie die Eigenschaft des Steuerelements Shadow auf ein Shadow-Objekt fest, dessen Eigenschaften die Darstellung definieren.

Im folgenden XAML-Beispiel wird gezeigt, wie ein Schatten zu einem Image hinzugefügt wird:

<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 Bildes gezeichnet, wobei der Offset angibt, dass er rechts und unten im Bild angezeigt wird:

Screenshot of an image with a shadow applied.

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

<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 der EllipseGeometry gezeichnet, die den Bildausschnitt enthält:

Screenshot of a clipped image with a shadow applied.

Weitere Informationen finden Sie unter Beschneiden mit einer Geometrie.