Налаштування елементів керування в .NET MAUI

Примітка. Це гостьовий допис у блозі від Microsoft MVP, Педро Хесус. Педро працює програмним інженером у Nareia та є основним розробником .NET MAUI Community Toolkit

Сьогодні я хочу поговорити про те, як можна повністю налаштувати елементи керування в .NET MAUI. Перш ніж дивитися на .NET MAUI, повернімось на пару років назад, до епохи Xamarin.Forms. Тоді у нас було кілька способів налаштувати елементи керування: у нас були Behaviors, які використовувалися, коли вам не потрібен доступ до специфічних для платформи API для налаштування елементів керування; і ми мали Effects, якщо вам потрібно отримати доступ до специфічних для платформи API.

Зупинимося трохи на Effects API. Він був створений через відсутність у Xamarin багатоцільової архітектури. Це означає, що ми не можемо отримати доступ до специфічного для платформи коду на загальному рівні (у .NET Standard csproj). Це спрацювало досить добре і може позбавити вас від створення Custom Renderers.

Сьогодні в .NET MAUI ми можемо використовувати потужність багатоцільової архітектури та отримати доступ до специфічних для платформи API у нашому спільному проєкті. Так нам ще потрібно Effects? Ні, тому що ми маємо доступ до всього коду та API з усіх цільових платформ.

Примітка: .NET MAUI все ще підтримує Effects якщо ви хочете їх використовувати, однак це не рекомендується

Посилання на вихідний код взято з IconTintColor .NET MAUI Community Toolkit.

Налаштування наявного елемента керування

 

Щоб додати додаткові функції до наявного елемента керування, ми розширюємо його та додаємо потрібні функції.

Давайте створимо новий елемент керування  class ImageTintColor : Image та додамо новий BindableProperty, який ми будемо використовувати для зміни кольору відтінку Image.

Люди, знайомі з Xamarin.Forms, впізнають це; це практично той самий код, який ви будете писати в програмі Xamarin.Forms.

Робота API для платформи .NET MAUI відбуватиметься на делегаті OnTintColorChanged. Подивімось на це.

Оскільки .NET MAUI використовує багатоцільове націлювання, ми можемо отримати доступ до особливостей платформи та налаштувати елементи керування так, як хочемо. Методи ImageExtensions.ApplyColor та ImageExtensions.ClearColor є допоміжними методами, які додають або видаляють відтінок зображення.

Одна річ, яку ви, можливо, помітили, це перевірка null для Handler та PlatformView. Це перший дракон, якого ви можете зустріти на своєму шляху. Коли елемент керування Image створюється, і  PropertyChanged як делегат BindableProperty викликається, Handler може бути null. Отже, без перевірки на нуль код видасть NullReferenceException. Це може здатися помилкою, але насправді це функція! Це дозволяє групі розробників .NET MAUI підтримувати той самий життєвий цикл, який мають елементи керування на Xamarin.Forms, уникаючи деяких руйнівних змін для програм, які будуть мігрувати з Forms на .NET MAUI.

 

Тепер, коли ми все налаштували, ми можемо використовувати наш елемент керування на нашому ContentPage. У наведеному нижче фрагменті ви можете побачити, як використовувати його в XAML:

Використання Attached Property та PropertyMapper

Інший спосіб налаштувати елемент керування — це використання AttachedProperties, це варіант BindableProperty, коли вам не потрібно прив’язувати його до певного спеціального елемента керування.

 

Ось як ми можемо створити AttachedProperty для TintColor:

Знову ми маємо шаблон, який ми маємо на Xamarin.Forms для AttachedProperty, але, як бачите, у нас немає делегата PropertyChanged. Щоб обробити зміну властивості, ми будемо використовувати Mapper в ImageHandler. Ви додаєте Mapper на будь-якому рівні, оскільки учасниками є static. Я вирішив зробити це всередині класу TintColorMapper, як ви бачите нижче.

Код майже такий самий, як показано раніше, лише реалізований за допомогою іншого API, у цьому випадку методу AppendToMapping. Якщо ви не бажаєте такої поведінки, скористайтеся CommandMapper натомість, вона буде активована лише тоді, коли змінюється властивість або виконується дія.

Майте на увазі, що коли ми обробляємо з Mapper і CommandMapper, ми додаємо цю поведінку для всіх елементів керування, які використовують цей обробник у проекті. У цьому випадку всі елементи керування Image запускатимуть цей код. У деяких випадках це не те, що ви хочете, якщо ви щось потребуєте щось більш конкретне, використання PlatformBehavior ідеально підійде.

Отже, тепер, коли ми все налаштували, ми можемо використовувати наш елемент керування на нашій сторінці, у фрагменті нижче ви можете побачити, як використовувати його в XAML.

Використання PlatformBehavior

PlatformBehavior це новий API, створений на .NET MAUI, щоб полегшити завдання налаштування елементів керування, коли вам потрібно отримати доступ до специфічних для платформи API безпечним способом (безпечним, оскільки він гарантує, що  Handler та PlatformView не є  null). Він має два методи override: OnAttachedTo та OnDetachedFrom. Цей API існує, щоб замінити API Effect від Xamarin.Forms і скористатися перевагами багатоцільової архітектури.

У цьому прикладі ми будемо використовувати partial class для реалізації специфічних для платформи API:

Наведений вище код буде скомпільовано всіма цільовими платформами.

Тепер давайте подивимося код для платформи Android:

А ось код для платформи iOS:

Як бачите, нам не потрібно піклуватися про те, чи є Handler, null, тому що PlatformBehavior робить це для нас.

Ми можемо вказати тип API для конкретної платформи, який охоплює ця поведінка. Якщо ви хочете застосувати елемент керування для кількох типів, вам не потрібно вказувати тип перегляду платформи (наприклад, використовуйте PlatformBehavior); ви, ймовірно, захочете застосувати свою  Behavior у кількох елементах керування, у такому випадку platformView буде PlatformBehavior на Android і PlatformBehavior на iOS.

 

І використання стане ще кращим, вам просто потрібно викликати Behavior:

Висновок

У цьому дописі в блозі ми обговорили різні способи налаштування елементів керування та взаємодії з API певної платформи. Немає жодного right або wrong способу, усі ці рішення є правильними, вам просто потрібно побачити, яке краще підійде для вашого випадку. Я б сказав, що в більшості випадків ви захочете використовувати, PlatformBehavior оскільки він розроблений для роботи з багатоцільовим підходом і гарантує очищення ресурсів, коли елемент керування більше не використовується. Щоб дізнатися більше, перегляньте документацію щодо спеціальних елементів керування.

Source