Posted on 19. July 2022

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

Налаштування елементів керування в .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<T, U> робить це для нас.

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

 

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

Висновок

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

Source



Posted on 17. April 2019

Windows UI Library 2.2

WinUI 2.2 - это последний официальный выпуск Windows UI Library.

Вы можете добавить пакеты WinUI в свое приложение с помощью диспетчера пакетов NuGet: для получения дополнительной информации см. Начало работы с Windows UI Library.

 

WinUI - это проект с открытым исходным кодом, размещенный на GitHub. Мы приветствуем ваши сообщения об ошибках, предложения по улучшению кода в репозитории Windows UI Library.

 

История версий Microsoft.UI.Xaml 2.2

 

Официальный релиз Windows UI Library 2.2

Август 2019

 

Страница выпуска GitHub

Скачать пакет NuGet

 

Новые возможности

 

1)     TabView

Описание:

 

Контролл TabView представляет собой набор вкладок, каждая из которых представляет новую страницу или документ в вашем приложении. TabView полезен, когда ваше приложение имеет несколько страниц контента, и пользователь ожидает, что сможет добавлять, закрывать и изменять порядок вкладок. Новый  Windows Terminal использует TabView для отображения нескольких интерфейсов командной строки.

 

Документация:

https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.tabview?view=winui-2.2

 

2)     Обновления NavigationView

 

а) Обновление кнопки “Назад” NavigationView

 

Описание:

В минимальном режиме NavigationView кнопка «Назад» больше не исчезает. При открытии и закрытии панели пользователям больше не нужно перемещать курсор, чтобы нажать кнопку гамбургера. Эта функция будет работать по умолчанию. Вам не нужно вносить какие-либо изменения кода, чтобы сделать эту работу.

б) NavigationView - нет автоматического заполнения

 

Описание:

Разработчики приложений при использовании элемента NavigationView, теперь могут восстанавливать все пиксели в своем окне приложения, и расширить область заголовка.

Документация:

https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview#top-whitespace

3)   Обновление Visual Style

а) Corner Radius

Описание:

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

GitHub Ссылка:

https://github.com/microsoft/microsoft-ui-xaml/issues/524

б) Border Thickness

 

Описание:

Свойство BorderThickness стало проще настраивать. Стандартные элементы управления были обновлены, чтобы уменьшить контуры, для более чистого и привычного вида

GitHub Spec Ссылка:

https://github.com/microsoft/microsoft-ui-xaml/issues/835

в) кнопка Visual

Описание:

Кнопки Visual по умолчанию была обновлена для удаления контура, появлявшегося при наведении, чтобы придать ей более чистый вид.

GitHub Spec Ссылка:

https://github.com/microsoft/microsoft-ui-xaml/issues/953

г) SplitButton

Описание:

Визуальное отображение SplitButton по умолчанию было обновлено, чтобы сделать его более отчетливым от DropDownButton.

GitHub Spec Ссылка:

https://github.com/microsoft/microsoft-ui-xaml/issues/986

д) ToggleSwitch

Описание:

Ширина ToggleSwitch по умолчанию была уменьшена с 44 до 40 пикселей, поэтому он сбалансирован визуально, сохраняя удобство использования.

GitHub Spec Ссылка:

https://github.com/microsoft/microsoft-ui-xaml/issues/836

 

е) CheckBox и RadioButton

Описание:

Визуальные элементы CheckBox и RadioButton были обновлены, чтобы соответствовать остальной части изменений визуального стиля.

https://github.com/microsoft/microsoft-ui-xaml/issues/839

 

Предварительный релиз Microsoft.UI.Xaml 2.2.190702001

Июль 2019

Страница релиза GitHub

Скачать NuGetпакет загрузки

Экспериментальная особенность

·         TabView

Пререлиз Microsoft.UI.Xaml 2.2.20190416001

Апрель 2019

Страница релиза GitHub

Скачать NuGet пакет загрузки

Экспериментальные особенности

·         FlowLayout

·         LayoutPanel

·         RadioButtons

·         ScrollViewer

 

Источник



Posted on 2. July 2017

Наборы инструментов!

Как у разработчика UWP, у нас есть много возможностей для быстрого и надежного создания приложений. На самом деле, существует так много вариантов, что можно подумать, что можно выбрать только один. К счастью, это не так, и многие инструментальные средства дополняют друг друга различными способами.

Сегодня поговорим о двух инструментах с открытым исходным кодом:

 

Оба проекта с открытым исходным кодом и каждый имеет разные преимущества. Эти два отдельных инструментария могут привносить инструменты и средства управления для различных сценариев применения. Начнем с ознакомления с этими инструментами и как они могут помочь.

UWP Community Toolkit

UWP Community Toolkit - это сотрудничество между Microsoft и сообществом разработчиков UWP. Благодаря множеству функций, таких как вспомогательные функции, компоненты пользовательского интерфейса, анимации и сервисы приложения, UWP Community Toolkit - отличная экономия времени и гарантированный успех вашего приложения на новом уровне. 


В настоящее время набор инструментов имеет 12 выпусков и находится на v 1.4 (выпущен 3 апреля 2017 года). Он имеет более 80 участников, с тысячами коммитов, и данное сообщество постоянно работает над улучшением. Удобство заключается в том, что он разбит на несколько пакетов nuget, чтобы мы могли выбирать необходимое. 

Примеры возможностей этого инструментария можно найти в пространстве имен Services, где вы можете легко взаимодействовать с службами социальных сетей всего за две строки кода.


Пример получения временной шкалы пользователя Twitter:

TwitterService.Instance.Initialize("consumer-key", "consumer-secret", "callback-uri");
ListView.ItemsSource = await TwitterService.Instance.GetUserTimeLineAsync("user-screenname", 50);
Можно найти полное демо-приложение в данном исходном коде или здесь, в Windows Store. Перейдите сюда, чтобы просмотреть полный список доступных функций (элементы управления, помощники и т. д.), и перейдите сюда для просмотра документации.

Telerik UI для UWP

Telerik UI для UWP от Progress Software - это недавно созданный инструментарий с открытым исходным кодом, содержащий удивительный набор средств управления бизнес-процессами (LOB), с помощью которых вы можете создавать собственные, бизнес-ориентированные UWP приложения. Благодаря таким элементам управления, как DataGrid и RadListView, Telerik UI предоставляет мощную сортировку, группировку и редактирование, которые можно ожидать от настольного приложения, а также замечательные возможности визуализации данных с такими элементами управления, как диаграммы, датчики и BulletGraphs.

Microsoft рекомендует посмотреть приложение Customer Database Example (примера базы данных клиентов) здесь, на GitHub, чтобы ознакомиться с DataGrid в действии, а также приложение SDK Examples. Здесь вы можете увидеть полный список доступных элементов управления и найти документацию (если вам необходима небольшая дополнительная помощь, Progress Software также предлагает профессиональную поддержку в пакете премиум-класса).

Примером этого инструментария является RadDataGrid. С одной строкой кода вы получаете целый набор готовых функций, таких как группировка, сортировка и фильтрация.

Вы можете установить UI для UWP в своем приложении, используя пакет nuget или же напрямую из источника. Если вы хотите узнать больше о том, почему Progress Software открывает исходный код Telerik для UWP, рекомендуем вам ознакомиться с этой увлекательной статьей.

Сотрудничество 

Если вы являетесь разработчиком, которому нравится участвовать в репозиториях GitHub и вносить свой вклад в сообщество, или если у вас есть идеи, как сделать что-то лучше для других разработчиков, оба набора инструментальных средств принимают запросы на загрузку, и каждый из них имеет свои собственные рекомендации по вкладам (здесь для UWP Community Toolkit, и здесь для Telerik UI для UWP).

В Завершении

Оба инструментария дополняют друг друга. Вы можете использовать их взаимодействующими в вашем приложении, чтобы предоставить пользователю восхитительный и значительный пользовательский опыт в вашем UWP приложении. Благодаря десяткам элементов управления пользовательского интерфейса, помощников, сервисов и т. д., вы можете публиковать приложения намного быстрее и с точной уверенностью в их продуктивности. Мы с нетерпением ждем вашего инструментария UWP Community Toolkit и UI для UWP приложений в Windows Store!