Schaduw

De .NET Multi-Platform App UI (.NET TENANT) Shadow klasse schildert een schaduw rond een indeling of weergave. De klasse VisualElement heeft een Shadow bindbare eigenschap, van het type Shadow, waarmee een schaduw kan worden toegevoegd aan een indeling of weergave.

De klasse Shadow definieert de volgende eigenschappen:

  • Radius, van type float, bepaalt de straal van de vervaging die wordt gebruikt om de schaduw te creëren. De standaardwaarde van deze eigenschap is 10.
  • Opacity, van het type float, geeft de doorzichtigheid van de schaduw aan. De standaardwaarde van deze eigenschap is 1.
  • Brush, van het type Brush, vertegenwoordigt het kwast dat wordt gebruikt om de schaduw te kleuren.
  • Offset, van het type Point, geeft de verschuiving voor de schaduw aan, die de positie van de lichtbron vertegenwoordigt die de schaduw creëert.

Deze eigenschappen worden ondersteund door BindableProperty objecten, wat betekent dat ze doelen van gegevensbindingen kunnen zijn en gestijld kunnen zijn.

Belangrijk

De eigenschap Brush ondersteunt momenteel alleen een SolidColorBrush.

Een schaduw maken

Als u een schaduw wilt toevoegen aan een besturingselement, gebruikt u de syntaxis van het eigenschapselement om de eigenschap Shadow van het besturingselement in te stellen op een Shadow object waarvan de eigenschappen het uiterlijk definiëren.

Als u een schaduw wilt toevoegen aan een besturingselement, stelt u de eigenschap Shadow van het besturingselement in op een opgemaakte tekenreeks die de schaduw definieert. Er zijn drie ondersteunde tekenreeksindelingen:

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

Kleuren kunnen worden opgegeven met behulp van de volgende notaties:

Formaat Voorbeeld Opmerkingen
HEX #rgb,#argb,#rrggbb,#aarrggbb
RGB rgb(255,0,0), rgb(100%,0%,0%) Geldige waarden bevinden zich in het bereik van 0-255 of 0%-100%.
RGBA rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8) Geldige dekkingswaarden zijn 0,0-1.0.
HSL hsl(120, 100%, 50%) Geldige waarden voor h zijn 0-360 en voor s en l 0%-100%.
HSLA hsla(120, 100%, 50%, .8) Geldige dekkingswaarden zijn 0,0-1.0.
HSV hsv(120, 100%, 50%) Geldige waarden voor h zijn 0-360 en voor s en v 0%-100%.
HSVA hsva(120, 100%, 50%, .8) Geldige dekkingswaarden zijn 0,0-1.0.
Vooraf gedefinieerde kleur fuchsia, AquaMarine, limegreen Kleurtekenreeksen zijn niet hoofdlettergevoelig.

U kunt ook de eigenschap Shadow van het besturingselement instellen op een Shadow object, met behulp van de syntaxis van het eigenschapselement, waarvan de eigenschappen het uiterlijk definiëren.

In het volgende XAML-voorbeeld ziet u hoe u een schaduw toevoegt aan een Image met behulp van de syntaxis van het eigenschapselement:

<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 dit voorbeeld wordt een zwarte schaduw rond de omtrek van de afbeelding geschilderd, met de offset die aangeeft dat deze rechts en onderaan de afbeelding wordt weergegeven.

Schermopname van een afbeelding waarop een schaduw is toegepast.

Schaduwen kunnen ook worden toegevoegd aan geknipte objecten, zoals wordt weergegeven in het volgende voorbeeld:

<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 dit voorbeeld wordt een zwarte schaduw geschilderd rond de omtrek van de EllipseGeometry die de afbeelding afknipt.

Schermopname van een geknipte afbeelding waarop een schaduw is toegepast.

Voor meer informatie over het knippen van een element, zie Knippen met een geometrie.

  • Last updated on