Эффекты тени в Xamarin.Forms

Автор:

Trailheadtechnology

Как известно, Xamarin.Forms (или теперь .NET MAUI) позволяет создавать кроссплатформенные мобильные приложения. Тем не менее, одна из самых непростых задач при работе с данными технологиями – это умение настраивать элементы управления и пользовательский интерфейс.

В этой статье мы разберём особенности нескольких достойных библиотек, чтобы добавить крутые эффекты тени в наши проекты.

Эффект тени в библиотеке Xamarin Community Toolkit

Для создания первоклассных мобильных форм мы использовали библиотеку Xamarin Community Toolkit. Теперь попробуем использовать Эффект тени этой библиотеки для настройки внешнего вида Labels и Frames.

1. Начинаем с добавления Xamarin.CommunityToolkit как пакета NuGet в наш проект.

2. Добавляем Xamarin.CommunityToolkit в нашу ContentPage.

<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”
xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”
xmlns:xct=”http://xamarin.com/schemas/2020/toolkit”
x:Class=”XamarinShadows.MainPage”>

3. Вот и всё. Теперь попробуем использовать Эффект тени.

Можно добавить этот эффект с помощью xct:ShadowEffect.

Настроим следующие параметры на XAML:

  • Color: цвет тени
  • Opacity: прозрачность тени.
  • Radius: установка радиуса размытия объектов.
  • OffsetX/OffsetY: указание горизонтального или вертикального смещения.
<Label HorizontalOptions="Center"
VerticalOptions="Center"
Text="Shadows with Xamarin Toolkit"
FontSize="18"
xct:ShadowEffect.Color="Red"
xct:ShadowEffect.OffsetX="5"
xct:ShadowEffect.OffsetY="5"
xct:ShadowEffect.Radius="2"
xct:ShadowEffect.Opacity="0.8"/>
<Frame HasShadow="True"
CornerRadius="10"
WidthRequest="80"
BackgroundColor="White"
Padding="10"
HorizontalOptions="Center"
VerticalOptions="Center"
IsClippedToBounds="True"
xct:ShadowEffect.Color="Red"
xct:ShadowEffect.Radius="5"
xct:ShadowEffect.Opacity="1"
Margin="10">
<Image Source="full_trailhead_logo.png" WidthRequest="80" />
</Frame>

Библиотека Sharpnado.Shadows

Sharpnado.Shadows – это сторонняя библиотека, с помощью которой можно легко добавлять тени.

1. Начинаем с добавления Sharpnado.Shadows как пакета NuGet в наш проект.

2. Добавляем Инициализацию в файл AppDelegate.cs в проекте на iOS.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
Sharpnado.Shades.iOS.iOSShadowsRenderer.Initialize();
LoadApplication(new App())
return base.FinishedLaunching(app, options);
}

3. Добавляем Sharpnado.Shades в нашу ContentPage.

4. Попробуем использовать Эффект тени, настроив следующие параметры:

  • Color: цвет тени
  • Opacity: прозрачность тени.
  • Radius: установка радиуса размытия объектов.
  • OffsetX/OffsetY: указание горизонтального или вертикального смещения.
  • CornerRadius: указание радиуса скругления размера углов тени.
  • ImmutableShades: возможность добавления более одной Тени.

Можно добавить SingleShade (единую тень):

<sh:Shadows Margin="0,0,0,5"
Shades="{sh:SingleShade Offset='2,5',
Opacity=0.4,
BlurRadius=3,
Color=#00B0FB}"
CornerRadius="10">
<Label Text="Shadows with a Single Sharpnado.Shadows" FontSize="18" HorizontalOptions="Center"/>
</sh:Shadows>

Или несколько теней в одной:

<sh:Shadows CornerRadius="10" Margin="0,10,0,0">
<sh:Shadows.Shades>
<sh:ImmutableShades>
<sh:Shade BlurRadius="10"
Opacity="0.5"
Offset="10,10"
Color="#0076AE" />
<sh:Shade BlurRadius="10"
Opacity="0.5"
Offset="-10,-10"
Color="Orange" />
</sh:ImmutableShades>
</sh:Shadows.Shades>
<Frame WidthRequest="80"
Padding="10"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="White"
CornerRadius="10">
<Image Source="full_trailhead_logo.png" WidthRequest="80" />
</Frame>
</sh:Shadows>

О платформе .NET MAUI

Библиотека Xamarin Community Toolkit совместима с платформой .NET MAUI. Однако, при попытке использования Эффекта тени появляется следующая оговорка:

No service for type 'Microsoft.Maui.Controls.Hosting.EffectsFactory' has been registered.

В переводе это означает: Сервис для типа «Microsoft.Maui.Controls.Hosting.EffectsFactory» не зарегистрирован.

К сожалению, действующая версия библиотеки Sharpnado.Shadows не совместима с платформой .NET MAUI. Но не стоит переживать, команда Майкрософт выпустила встроенный Shadow class, который как раз можно использовать.

Ниже представлены примеры использования Shadow class, настроив следующие параметры:

  • Opacity: прозрачность тени.
  • Radius: установка радиуса размытия объектов.
  • Brush: определение кисти для подсветки тени.
  • OffsetX/OffsetY: указание горизонтального или вертикального смещения.
<Image
Source="full_trailhead_logo.png"
SemanticProperties.Description="Trailhead logo"
HeightRequest="200"
HorizontalOptions="Center" >
<Image.Shadow>
<Shadow Brush="Black"
Offset="20,20"
Radius="40"
Opacity="0.8" />
</Image.Shadow>
</Image>

Заключение

Вот и всё. Код доступен на GitHub для вашего ознакомления.

Материалы по теме