.NET Maui styling with DataTrigger - xamarin

Question

Overview: I have two properties:
IsPast
IsCurrentMonth
If it's past or not current month I want to display label in red.
The following code is a shrink version of default Maui application. If you run it you get red label (expected). After one click it stays red (expected) but following clicks switch the red color on and off. Is it a bug or I don't understand the way DataTrigger/Style/whatever works:
View model:
public class ViewModel : INotifyPropertyChanged
{
private bool _isPast;
public bool IsPast
{
get => _isPast;
set
{
_isPast = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsPast)));
}
}
private bool _isCurrentMonth;
public bool IsCurrentMonth
{
get => _isCurrentMonth;
set
{
_isCurrentMonth = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsCurrentMonth)));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
Then XAML:
<?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"
xmlns:local="clr-namespace:BugMaui"
x:Class="BugMaui.MainPage"
x:DataType="local:ViewModel">
<VerticalStackLayout>
<HorizontalStackLayout>
<Label Text="IsPast: " />
<Label Text="{Binding IsPast}" />
</HorizontalStackLayout>
<HorizontalStackLayout>
<Label Text="IsCurrentMonth: " />
<Label Text="{Binding IsCurrentMonth}" />
</HorizontalStackLayout>
<Label
Text="Hello, World!"
FontSize="32"
HorizontalOptions="Center">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding IsPast}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<DataTrigger TargetType="Label" Binding="{Binding IsCurrentMonth}" Value="False">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<Button
Text="Click me"
Clicked="OnCounterClicked"/>
</VerticalStackLayout>
</ContentPage>
And the code behind:
public partial class MainPage : ContentPage
{
ViewModel viewModel;
public MainPage()
{
InitializeComponent();
viewModel = new ViewModel { IsCurrentMonth = true, IsPast = true };
BindingContext = viewModel;
}
private void OnCounterClicked(object sender, EventArgs e)
{
viewModel.IsPast = !viewModel.IsPast;
viewModel.IsCurrentMonth = !viewModel.IsCurrentMonth;
}
}

Answer 1

My answer for the question is YES, it is a bug if .NET MAUI developers hadn't decided to change the way how DataTrigger/Style worked in XAMARIN (as well as WPF).
According to .NET MAUI Triggers documentation, DataTrigger should "apply property values, or performs actions, when the bound data meets a specified condition". If condition is not met, no action should be done.
Thus the DataTrigger in your part of code is correct to satisfy your requirement to set red background if viewModel.IsCurrentMonth is False OR viewModel.IsPast is True:
<DataTrigger TargetType="Label" Binding="{Binding IsCurrentMonth}" Value="False">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<DataTrigger TargetType="Label" Binding="{Binding IsPast}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
This use case of DataTrigger worked well in both XAMARIN and WPF. The background remained red by repetitive clicking as it was expected.
There is no explanation, why in .NET MAUI DataTrigger works differently. The red background is set only based on the value of the "lastly set" property bound to the DataTrigger. So if the condition is not met the previously fullfilled conditions are forgotten and the default (transparent) background is set.
In your example it means that the background is set based on the viewModel.IsCurrentMonth property:
private void OnCounterClicked(object sender, EventArgs e)
{
viewModel.IsPast = !viewModel.IsPast;
viewModel.IsCurrentMonth = !viewModel.IsCurrentMonth;
}
If you change the order of setting the viewModel properties in the OnCounterClicked event handler, the background is set based on the value of viewModel.IsPast property.
private void OnCounterClicked(object sender, EventArgs e)
{
viewModel.IsCurrentMonth = !viewModel.IsCurrentMonth;
viewModel.IsPast = !viewModel.IsPast;
}
Multitrigger proposed in this answer wouldn't satisfy your requirement, as it is mentioned in Liyun's Zhang commment.
The following workaround for this bug proposed by Liyung Zhang is working, but it still does not answer the original question if described DataTrigger behavior is a bug or not:
<Label.Style>
<Style TargetType="Label">
<Setter Property="Background" Value="Red" />
<Style.Triggers>
<MultiTrigger TargetType="Label">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding IsPast}" Value="False" />
<BindingCondition Binding="{Binding IsCurrentMonth}" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Transparent" />
</MultiTrigger>
</Style.Triggers>
</Style>
</Label.Style>
Conclusion:
Based on my experience the above mentioned new .NET MAUI DataTrigger behaviour can be clasified as a bug and it is unfortunately source of other problems in development not only in DataTrigger styling but also in MultiTrigger usage where I had to fight with similar unpredictable not expected and really weird behavior.

Answer 2

You can express your condition (IsPast is true && IsCurrentMonth is false) better with a MultiTrigger like this:
<Label
Text="Hello, World!"
FontSize="32"
HorizontalOptions="Center">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<MultiTrigger TargetType="Label">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding IsPast}" Value="True" />
<BindingCondition Binding="{Binding IsCurrentMonth}" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Red" />
</MultiTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
Check the .NET MAUI MultiTrigger documentation for more info.