Триггеры

Триггеры свойств

Триггеры в .NET MAUI и C# позволяют декларативно задать некоторые действия, которые выполняются при изменении свойств визуального элемента, изменении данных или генерации событий. Тригеры определяются либо с помощью коллекции Triggers на уровне отдельного элемента, либо в виде ресурса на уровне страницы или приложения.

Триггеры свойств определяются с помощью объекта Trigger. Они следят за значением свойств и в случае их изменения с помощью объекта Setter устанавливают значение других свойств.

Например, пусть по переходу к текстовому полю Entry текст в нем меняет цвет с светло-серого на черный:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="20">
        <Entry TextColor="LightGray" Text="Hello METANIT.COM">
            <Entry.Triggers>
                <Trigger Property="IsFocused" Value="True" TargetType="Entry">
                    <Setter Property="TextColor" Value="Black" />
                </Trigger>
            </Entry.Triggers>
        </Entry>
    </StackLayout>
</ContentPage>

В данном случае триггер применяется к элементу Entry и поэтому добавляется в коллекцию Entry.Triggers. У каждого триггера устанавливаются три свойства:

• Property: свойство, на изменение которого должен отслеживать триггер

• Value: значение свойства, при котором должен срабатывать триггер

• TargetType: тип объектов, к которым применяется триггер

То есть триггер в данном случае будет срабатывать, когда свойство IsFocused элемента Entry приобритет значение true.

Работа триггера будет заключаться в установки ряда свойств элемента Entry. Здесь у Entry устанавливается красный текст:

<Setter Property="TextColor" Value="Black" />

Таким образом, при получении фокуса сработает триггер, который окрасит текст в черный цвет.

Но когда мы установим фокус в другом месте приложения на какой-то другой элемент, то триггер уже действовать не будет, а текст в Entry приобретет свой стандартный цвет:

Определение триггера через стили

Также триггер можно определить через стили через коллекцию Triggers. Аналогичный пример с триггером в стилях:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="entryStyle" TargetType="Entry">
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True" TargetType="Entry">
                        <Setter Property="TextColor" Value="#000" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="20">
        <Entry TextColor="LightGray" Text="Hello METANIT.COM" Style="{StaticResource entryStyle}" />
    </StackLayout>
</ContentPage>

Стиль может содержать несколько триггеров, и все они определяются в элементе Style.Triggers.

Триггеры свойств в коде C#

Определим аналогичный триггер свойств в коде C#:

namespace HelloApp
{
    class StartPage : ContentPage
    {
        public StartPage()
        {
            Entry entry = new Entry { Text="Hello METANIT.COM!", TextColor = Colors.LightGray };

            // определяем триггер для элемента Entry
            var trigger = new Trigger(typeof(Entry))
            {
                Property = IsFocusedProperty,
                Value = true
            };
            // добавляем сеттер для установки черного текста
            trigger.Setters.Add(new Setter
            {
                Property = Entry.TextColorProperty,
                Value = Colors.Black
            });
            // добавляем триггер в коллекцию триггеров Entry
            entry.Triggers.Add(trigger);

            Content = new StackLayout
            {
                Padding = 20,
                Children = { entry }
            };
        }
    }
}

Вначале определяем триггер с помощью объекта Trigger. Через свойство Property указываем свойства элемента Entry, которое будет отслеживаться. А с помощью свойства Value устанавливаем значение, при получении которого сработает триггер.

var trigger = new Trigger(typeof(Entry))
{
    Property = Entry.IsFocusedProperty,
    Value = true
};

То есть когда свойство IsFocused получит значение true, сработает триггер.

Далее через коллекцию Setters определяем свойства и их значения, которые будут устанавливаться во время действия триггера - установка зеленого цвета фона и белого цвета для введенных символов.

В конце триггер добавляется в коллекцию Triggers элемента Entry:

entry.Triggers.Add(trigger);