Skugga

.NET Multi-platform App UI (.NET MAUI) Shadow-klassen applicerar en skugga runt en layout eller vy. Klassen VisualElement har en Shadow bindbar egenskap, av typen Shadow, som gör att en skugga kan läggas till i valfri layout eller vy.

Klassen Shadow definierar följande egenskaper:

  • Radius, av typen float, definierar radien för den oskärpa som används för att generera skuggan. Standardvärdet för den här egenskapen är 10.
  • Opacity, av typen float, anger opaciteten i skuggan. Standardvärdet för den här egenskapen är 1.
  • Brush, av typen Brush, representerar penseln som används för att färglägga skuggan.
  • Offset, av typen Point, anger förskjutningen för skuggan, som representerar positionen för den ljuskälla som skapar skuggan.

Dessa egenskaper backas upp av BindableProperty-objekt, vilket innebär att de kan vara mål för databindningar och stiliserade.

Viktig

Egenskapen Brush stöder för närvarande bara en SolidColorBrush.

Skapa en skugga

Om du vill lägga till en skugga i en kontroll använder du egenskapselementsyntax för att ange kontrollens Shadow egenskap till ett Shadow objekt vars egenskaper definierar dess utseende.

Om du vill lägga till en skugga i en kontroll anger du kontrollens egenskap Shadow till en formaterad sträng som definierar skuggan. Det finns tre strängformat som stöds:

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

Färger kan anges med hjälp av följande format:

Format Exempel Kommentarer
HEX #rgb, #argb, , #rrggbb#aarrggbb
RGB rgb(255,0,0), rgb(100%,0%,0%) Giltiga värden finns i intervallet 0–255 eller 0%-100%.
RGBA rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8) Giltiga ogenomskinlighetsvärden är 0.0-1.0.
HSL hsl(120, 100%, 50%) Giltiga värden för h är 0–360 och för s och l är 0%-100%.
HSLA hsla(120, 100%, 50%, .8) Giltiga ogenomskinlighetsvärden är 0.0-1.0.
HSV hsv(120, 100%, 50%) Giltiga värden för h är 0–360 och för s och v är 0%-100%.
HSVA hsva(120, 100%, 50%, .8) Giltiga ogenomskinlighetsvärden är 0.0-1.0.
Fördefinierad färg fuchsia, AquaMarine, limegreen Färgsträngar är skiftlägesokänsliga.

Du kan också ange kontrollens Shadow egenskap till ett Shadow objekt med hjälp av egenskapselementsyntax, vars egenskaper definierar dess utseende.

I följande XAML-exempel visas hur du lägger till en skugga i en Image med hjälp av egenskapselementsyntax:

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

I det här exemplet målas en svart skugga runt konturen av bilden, där dess förskjutning anger att den visas till höger och längst ned på bilden:

Skärmbild av en bild med en skugga tillämpad.

Skuggor kan också läggas till i klippta objekt, som du ser i följande exempel:

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

I det här exemplet målas en svart skugga runt konturen av EllipseGeometry som klipper bilden:

Skärmbild av en klippt bild med en skugga tillämpad.

Mer information om hur du klipper ett element finns i Klipp med en geometri.

  • Last updated on