10 приёмов и хитростей XAML

07 Ноябрь

Иногда при работе с Xamarin Forms некоторые вещи мы реализуем посредством вспомогательного кода, в то время как это можно было бы сделать с помощью обычного XAML.

Давайте рассмотрим 10 вещей, которые можно выполнить в XAML, хотя это может быть не очевидно.

1. Передача аргументов конструктору

Аргументы могут быть переданы недефолтному конструктору с помощью атрибута x:Argument. Это действительно полезно при добавлении пользовательского представления в XAML и передаче ему параметра.

Например:

Давайте создадим новое представление, основанной задачей которого будет получение года, и затем отображение его в Label:

Если требуется дополнить внешнее представление и передать параметр по XAML, тогда нужно сделать следующее:

Как видите, я использовала x:Arguments, а затем передала параметр, указав тип. В этом случае конструктор ожидает Integer, поэтому я использовала x:Int32.

Если хотите узнать, как передавать различные типы, можете ознакомиться с разделом «Передача аргументов в XAML» в официальной документации по Xamarin.

2. Разрыв строки

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

Например:

Ожидается вот такой пользовательский интерфейс:

Лучший способ достичь этого — добавить разрыв строки (
).

3. Создание цвета в XAML

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

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

Значения в конструкторе Color представляет собой цветовой тон, насыщенность, яркость и альфа-значения.

Но что если хочется сделать это все в XAML? Тогда нам просто нужно добавить цвет и передать параметры с помощью X:Arguments, как мы уже видели, а также указать тип метода для создания цвета (FromRGB, FromHex, FromHsla).

Кроме того, если требуется создать эти цвета глобально, можно сделать это в файле App.xaml, указав ключ для использования этого:

4. Возможности x:Reference

Это, безусловно, одна из моих любимых вещей в XAML — используя x:Reference можно связать свойства двух представлений на одной странице. Бывает немало случаев, когда это приходится очень кстати.

Например:

1) Если Вы используете ListView, значит знаете, что BindingContext внутри ViewCell является элементом списка, но что происходит, если требуется изменить определенное свойство в соответствии с ViewModel?

Как видите, здесь во ViewModel, у меня есть свойство IsEnable, и если это свойство имеет значение true, будет показан значок Delete в каждом элементе ячейки.

BindingContext моей страницы — ViewModel, так что я собираюсь сделать следующее:

1) Добавлю x:Name к главному макету страницы, установленной для ViewModel, по той причине, что я хочу использовать этот BindingContext.

2) Добавлю значок во ViewCell, и, используя свойство BindingContext, присвою его BindingContext от x:Name, который был добавлен ранее.

Как видите, синтаксис для этого очень прост, можно использовать свойство Source=”{x:Reference x:nameOfTheElemeent} для указания того свойства, на которое требуется ссылка. Возьмите свойство Path, если требуется использовать определенное свойство этого элемента, а не весь элемент.

Кроме того, если не хочется использовать свойство BindingContext, можно взять любое другое. К примеру, если требуется выполнить команду во ViewModel из ViewCell.

5. Добавление смайликов

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

Тогда нужно просто использовать код смайликов и добавить его к Label.

Например:

Если требуется Unicode для каждого смайлика, вы можете получить его здесь: http://www.charbase.com/block/emoticons.

6. Использование конвертеров

Конвертер используется для изменения результата свойства в соответствии со значением.

Например:

Требуется изменить высоту списка в соответствии с количеством элементов. Для этого будет создан новый конвертер, который будет получать список и размер каждой ячейке и вернет мне новый Height.

Давайте сделаем это шаг за шагом:

1 Создайте конвертер

2 Добавить ссылку на конвертер

Кроме того, если требуется использовать конвертер повсеместно, чтобы не добавлять его на каждую страницу, нужно просто добавить его в файл App.xaml:

3 Используйте его

Как вы видите здесь, чтобы использовать его, я просто должен добавить Converter=”{StaticResource NameOfTheConverter} и добавить дополнительный параметр ConvererParameter=”Parameter”.

Чтобы лучше разобраться в конвертерах, ознакомьтесь с отличной статьей Джеральда Верслуиса https://blog.verslu.is/xamarin/xamarin-forms-xamarin/implementing-value-converters-with-ivalueconverter-for-xamarin-forms/ and this video https://channel9.msdn.com/Blogs/MVP-VisualStudio-Dev/Using-value-converters-with-XamarinForms.

7. Использование триггеров данных

Иногда возникает необходимость изменения внешнего вида элемента управления в соответствии с определенным значением. Для достижения этой цели можно использовать DataTriggers, которые с помощью DataBinding позволяют обновлять свойство или несколько свойств в соответствии со значением привязки.

Рассмотрим это в коде:

У нас есть свойство IsReadOnly во ViewModel, и, согласно его значению, мы хотим изменить TextColor Label.

XAML:

Кроме того, доступны для использования и другие типы триггеров, например, PropertyTrigger, EventTrigger и MultiTrigger. Чтобы больше о них узнать обратитесь к документации Xamarin о триггерах.

8. Использование формата строки

В XAML можно использовать StringFormat, что действительно полезно, если требуется изменить формат отображения значения привязки.

Например, у меня есть свойство во ViewModel, которое называется Title, и я хочу отобразить это свойство, а также текст Favorites в XAML, соответственно, вместо того чтобы создавать два Labels с горизонтальной ориентацией, я сделаю это с помощью StringFormat.

Кроме того, его можно использовать для форматирования любых DateTime, Time или Number.

Дополнительные сведения о различных типах format, можно получить из этого источника: https://msdn.microsoft.com/en-us/library/system.string.format(v=vs.110).aspx

9. Добавление общих стилей в элементы управления

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

Необходимо просто добавить новый стиль для типа элемента управления и свойства, которые требуется изменить, в класс App.xaml.

Например:

Узнать больше об этом можно в этой статье

10. Использование вложенных свойств

Вложенные статические свойства, используемые в коде, также могут использоваться в XAML. Например, если мы хотим скрыть NavigationBar определенной страницы, как правило, в коде мы делаем что-то подобное: