Триггеры в .NET MAUI. Триггеры состояний

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

Триггер состояния

Триггеры состояния определяются с использованием объекта StateTrigger. Рассмотрим следующий пример:

<Entry>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="CommonStates">
            <VisualState Name="Focused">
                <VisualState.StateTriggers>
                    <StateTrigger IsActive="{Binding Source={x:Reference Toggler}, Path=IsToggled}" >
                        
                    </StateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="Background" Value="LightGreen"/>
                    <Setter Property="TextColor" Value="DarkGreen"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState Name="Normal">
                <VisualState.StateTriggers>
                    <StateTrigger IsActive="{Binding Source={x:Reference Toggler}, Path=IsToggled, Converter={StaticResource InvertBoolConverter}}" >

                    </StateTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Property="IsEnabled" Value="{Binding Source={x:Reference Toggler},Path=IsToggled}"/>
                    <Setter Property="TextColor" Value="DarkRed"/>
                </VisualState.Setters>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>


<Switch x:Name="Toggler"/>

Итак, здесь расположены два элемента управления:

1. Элемент Switch с именем Toggler 
2. Элемент Entry для которого мы определяем триггеры состояния

У Entry мы определяем два состояния — когда элемент находится в нормальном состоянии (Normal) и когда элемент получает фокус (Focused). Рассмотрим эти состояния.

В состоянии Focused мы определили триггер:

<VisualState Name="Focused">
    <VisualState.StateTriggers>
        <StateTrigger IsActive="{Binding Source={x:Reference Toggler}, Path=IsToggled}" >
            
        </StateTrigger>
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Property="Background" Value="LightGreen"/>
        <Setter Property="TextColor" Value="DarkGreen"/>
    </VisualState.Setters>
</VisualState>

У StateTrigger определено свойство IsActive, которое указывает выполняется ли триггер или нет. Это свойство мы привязали к значению IsToggled элемента Switch. То есть триггер сработает как только IsToggled получит значение true:

<StateTrigger IsActive="{Binding Source={x:Reference Toggler}, Path=IsToggled}" >

Срабатывание триггера приводит к изменению визуального состояния элемента:

<VisualState.Setters>
    <Setter Property="Background" Value="LightGreen"/>
    <Setter Property="TextColor" Value="DarkGreen"/>
</VisualState.Setters>

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

class InvertBoolConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        return !(bool)value;
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

И подключили его в ресурсы страницы:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:InvertBoolConverter x:Key="InvertBoolConverter"/>
    </ResourceDictionary>
</ContentPage.Resources>

Второй триггер переводит элемент Entry в состояние Disabled и меняет цвет текста на красный. Так как по умолчанию Switch находится в выключенном состоянии, то при запуске приложения вы увидите, что Entry не доступен:Как только вы переключите Switch, то элемент Entry станет таким:После набора текста и отключения Switch:Для триггера состояния можно определить обработчик события IsActiveChanged, которое генерируется при смене состояния триггера. Например, внесем изменения в первый триггер состояния:

<StateTrigger IsActive="{Binding Source={x:Reference Toggler}, Path=IsToggled}" 
              IsActiveChanged="StateTrigger_IsActiveChanged"/>

Добавим на страницу метку Label:

<Label x:Name="Counter"/>

и в файле отдельного кода напишем обработчик события:

private void StateTrigger_IsActiveChanged(object sender, EventArgs e)
{
    count++;
    Counter.Text = $"Триггеры событий сработали {count} раз";
}

Теперь запустим приложение и убедимся лишний раз, что триггер срабатывает:

Итого

Триггеры состояний в .NET MAUI используются для того, чтобы определить условия, при которых меняется визуальное состояние элемента управления. Триггер состояния срабатывает, когда его свойство IsActive переходит в значение true.