Поделиться через

Тень

Платформенный пользовательский интерфейс .NET (.NET MAUI) класса Shadow создаёт тень вокруг макета или представления. Класс VisualElement имеет Shadow связываемое свойство типа Shadow, которое позволяет добавлять тень в любой макет или представление.

Класс Shadow определяет следующие свойства:

  • Radiusтипа floatопределяет радиус размытия, используемого для создания тени. Значение по умолчанию этого свойства равно 10.
  • Opacityтипа floatуказывает на непрозрачность тени. Значение по умолчанию этого свойства равно 1.
  • Brushтипа Brushобозначает кисть, используемую для окрашивания тени.
  • Offsetтипа Pointуказывает смещение тени, представляющее позицию источника света, создающего тень.

Эти свойства поддерживаются объектами BindableProperty, что означает, что они могут быть целевыми объектами привязки данных и их можно стилизовать.

Важный

Свойство Brush в настоящее время поддерживает только SolidColorBrush.

Создание тени

Чтобы добавить тень в элемент управления, используйте синтаксис элемента свойства для задания свойства Shadow элемента управления объекту Shadow, свойства которого определяют его внешний вид.

Чтобы добавить тень в элемент управления, задайте для свойства Shadow элемента управления форматированную строку, которая определяет тень. Существует три поддерживаемых строковых формата:

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

Цвета можно указать с помощью следующих форматов:

Формат Пример Комментарии
ПРОКЛЯТИЕ #rgb, #argb, #rrggbb, #aarrggbb
RGB rgb(255,0,0), rgb(100%,0%,0%) Допустимые значения находятся в диапазоне от 0 до 255 или 0%–100%.
RGBA (красный, зелёный, синий, альфа) rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8) Допустимые значения прозрачности : 0.0-1.0.
HSL hsl(120, 100%, 50%) Допустимые значения для h : 0–360, а для s и l — 0%–100%.
HSLA hsla(120, 100%, 50%, .8) Допустимые значения прозрачности : 0.0-1.0.
HSV hsv(120, 100%, 50%) Допустимые значения для h : 0–360, а для s и v — 0%–100%.
HSVA hsva(120, 100%, 50%, .8) Допустимые значения прозрачности : 0.0-1.0.
Предопределенный цвет fuchsia, AquaMarine, limegreen Цветовые строки нечувствительны к регистру.

Кроме того, свойство Shadow элемента управления можно задать для объекта Shadow, используя синтаксис элемента свойства, свойства которого определяют его внешний вид.

В следующем примере XAML показано, как добавить тень в Image с помощью синтаксиса элемента свойства:

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

В этом примере черная тень окрашена вокруг контура изображения, с его смещением, указывающим, что он отображается в правом и нижнем углу изображения:

снимок экрана изображения с примененной тенью.

Тени также можно добавить в обрезанные объекты, как показано в следующем примере:

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

В этом примере черная тень окрашена вокруг контура EllipseGeometry, который обрезает изображение:

снимок экрана обрезанного изображения с наложенной тенью.

Дополнительные сведения об обрезке элемента см. в разделе Обрезка с помощьюГеометрия.