Dynamic styling in .Net Maui/Xamarin

Question

Let's say I want to display a calendar. Each day (DayViewModel) can have such attributes that should influence styling:

is day of current month
is weekend
is day available

And based on that I'd like to style my DayContentView like follows:

if day of current month -> opacity 1
if not current month -> opacity 0.5
if weekend -> background color is red
if available -> background color is green

Moreover the last one property ("is day available") can change based on user's action (clicked button "Check availability").

In other frameworks I'd create a few styles/style classes and assign them accordingly base on those flags. But since StyleClass is not bindable I cannot. Can I? Maybe there is some workaround.

Another option could be to create a separate style (using inheritance if needed) for all the combinations. But first of all the number of combinations raises like 2^n and the second issue is that I have no idea how to dynamically change whole styl for a view changing its name. Is it possible?

Finishing my quite long question: How to do it right/in a smart way? I don't want to store values of colors, font sizes, opacities etc. in a view model and bind all the values manually.

Michal Diviš · Answer

The same thing can be achieved using DataTriggers.

Result:

MainPage.xaml

DayModel.cs

public record DayModel(bool IsDayOfCurrentMonth, bool IsWeekend, bool IsAvailable);

MainViewModel.cs

public class MainViewModel
{
    public ObservableCollection Days { get; } = new();

    public MainViewModel()
    {
        //Create all possible cominations of days
        for (int i = 0; i < 2; i++)
        {
            for (int j = 0; j < 2; j++)
            {
                for (int k = 0; k < 2; k++)
                {
                    Days.Add(new DayModel(i == 0, j == 0, k == 0));
                }
            }
        }
    }
}

EDIT: sharing style by multiple controls

Here's how the same Style with Triggers might be shared by multiple controls (two of the three TextBlocks in this example):

The result looks like this:

user2146414 · Answer

I planned to add an example as @ToolmakerStave suggested but I found a solution in the meantime that seems to be very nice so I decided to share it instead. The idea is as follows:

Declare view model that implements INotifyPropertyChanged
Create a XAML file and define there all the styles
In the code behind detect change of binding context (view model) and all its dynamically changing properties (IsAvailable) in my case
When a change is detected then create a style using styles defined in the XAML file applying them in the desired order (making updates)
Assign the final style to particular elements

So starting from my view model:

public class DayViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    // To style
    public bool IsCurrentMonth { get; set; }
    public bool IsWeekend { get; set; }
    public bool IsHoliday { get; set; }
    
    private bool _isAvailable;
    public bool IsAvailable
    {
        get => _isAvailable;
        set
        {
            _isAvailable = value;
            PropertyChanged?.Invoke(
                this,
                new PropertyChangedEventArgs(nameof(IsAvailable))
            );
        }
    }

    // To display
    public string DayOfWeek { get; set; }
    public int DayOfMonth { get; set; }
}

Assuming that only IsAvailable property can change after some user action.

Then I have a XAML view that defines all the needed styles but they are not used directly in this file. I'll use them in the code behind. All the elements that I need to style have x:Name property set to get a reference to them from the code:

Now a helper class that allows to update a style with another style:

public static class StyleExtension
{
    public static Style Update(this Style style, Style otherStyle)
    {
        var result = new Style(style.TargetType);
        var allSetters = style.Setters.Concat(otherStyle.Setters);
        foreach (var setter in allSetters)
        {
            result.Setters.Add(setter);
        }

        return result;
    }

    public static Style UpdateIf(this Style style, bool condition, Style otherStyle)
    {
        return style.Update(condition ? otherStyle : new Style(style.TargetType));
    }
}

Final part, the code behind:

public partial class DayView : ContentView
{
    private DayViewModel _viewModel;

    public DayView()
    {
        InitializeComponent();
        BindingContextChanged += OnBindingContextChanged;
    }


    private void OnBindingContextChanged(object sender, EventArgs e)
    {
        _viewModel = BindingContext as DayViewModel;
        _viewModel.PropertyChanged += OnAvailabilityChanged;   

        StyleDayBorder();
        StyleDayOfWeekLabel();
        StyleDayOfMonthLabel();
    }

    private void OnAvailabilityChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(DayViewModel.IsAvailable))
        {
            StyleDayBorder();
        }
    }

    private void StyleDayBorder()
    {
        DayBorder.Style = new Style(typeof(Border))
            .UpdateIf(_viewModel.IsCurrentMonth, GetStyle("CurrentMonthBorder"))
            .UpdateIf(_viewModel.IsWeekend, GetStyle("WeekendBorder"))
            .UpdateIf(_viewModel.IsAvailable, GetStyle("AvailableBorder"));
    }

    private void StyleDayOfWeekLabel()
    {
        DayOfWeekLabel.Style = new Style(typeof(Label))
            .UpdateIf(_viewModel.IsHoliday, GetStyle("HolidayLabel"));
    }

    private void StyleDayOfMonthLabel()
    {
        DayOfMonthLabel.Style = new Style(typeof(Label))
            .UpdateIf(_viewModel.IsHoliday, GetStyle("HolidayLabel"));
    }

    private Style GetStyle(string name)
    {
        return Resources[name] as Style;
    }
}

And final thought after the final code:) If there is no simpler solution then it would be nice to be able to do it in the XAML like this (pseudocode):

Dynamic styling in .Net Maui/Xamarin

2 Answers