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

Тень

  • Статья

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

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

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

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

Важно!

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

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

Чтобы добавить тень в элемент управления, задайте свойству 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>

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

Screenshot of an image with a shadow applied.

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

<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 изображения:

Screenshot of a clipped image with a shadow applied.

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