How can I set default value of property based on theme in MAUI

JoeDoe

I have a simple component in MAUI. Below is simplified code.

C#:

public partial class LabeledValue : ContentView 
{
    public static readonly BindableProperty ValueColorProperty = BindableProperty.Create(
        nameof(ValueColor), typeof(Color), typeof(LabeledValue), default(Color), BindingMode.OneWay);

    public Color ValueColor
    {
        get { return (Color)GetValue(ValueColorProperty); }
        set { SetValue(ValueColorProperty, value); }
    }
}

XAML:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EpexMauiApp.Components.LabeledValue"
             x:Name="self">
        <Label Text="Dummy text" FontAttributes="Bold" TextColor="{Binding ValueColor, Source={x:Reference self}}"/>
</ContentView>

I would like to set default value of this property based on current app theme, so when I use it like

<components:LabeledValue ValueColor="{StaticResource Blue}"/> 

It's blue but when I simply do

<components:LabeledValue /> 

Color is set based on theme. How can I do that?

ewerspej

You can use AppThemeBinding and the provided Extensions for that.

First, you need to remove the binding to TextColor, because this will need to be set from the code-behind, and also give the Label a name using the x:Name attribute:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EpexMauiApp.Components.LabeledValue"
             x:Name="self">
        <Label x:Name="MyLabel" Text="Dummy text" FontAttributes="Bold"/>
</ContentView>

Then, in your code-behind, you need to set the AppThemeBinding programmatically in the constructor:

public LabeledValue()
{
    InitializeComponent();
    
    //set default values for AppThemeBinding
    MyLabel.SetAppThemeColor(Label.TextColorProperty, Colors.Blue, Colors.White);
}

Finally, you need to add a property changed handler that sets the TextColor when the user overrides the default setting:

public partial class LabeledValue : ContentView 
{
    public Color ValueColor
    {
        get { return (Color)GetValue(ValueColorProperty); }
        set { SetValue(ValueColorProperty, value); }
    }

    public static readonly BindableProperty ValueColorProperty = BindableProperty.Create(nameof(ValueColor), typeof(Color), typeof(LabeledValue), propertyChanged: OnValueColorPropertyChanged);

    private static void OnValueColorPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((LabeledValue)bindable).MyLabel.TextColor = (Color)newValue;
    }
}

When you use the LabeledValue control, you can either use the default behavior, which will respond to the App Theme or override it:

<!-- use default AppThemeBinding values -->
<components:LabeledValue/> 

<!-- permanently set the ValueColor to Orange-->
<components:LabeledValue ValueColor="Orange"/> 

You can find a working example for this in my MAUI Samples repository.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I set the default value for an HTML <select> element in Golang?

How can I set the default state of a checkbox based on value in firestore in react table

How can I set the default value for an HTML <select> element?

How can I set a default for column B to be the value in column A in PostgreSQL?

How can I set default value in serializers?

How do I set the default theme in phpMyAdmin?

How can I populate an optional collection property with a default value?

How can I set/provide a default value while django migration?

PHP: How can I set a default value for $_POST array?

How can I set a default value for a date in Rails 5.2 with Postgres?

How can I set today as my datepicker default value?

How can I set a value to an key value pair property in Angular?

How can I set the default value Laravel <select> element?

How can I dynamically set a default value for a WTForms FormField?

How can I set default value for data binding in Android Studio?

How can I set default value in parameter substitution as an array of elements?

How can I set a default value of 0 to a SQLite table column?

How can I set a default, but changeable, value to an input field?

How can I set a card to default value if there's no filter? How can I set a default filter to page?

How can I set a default value for a Materializecss textarea element?

How can I set a default value for Angular Material Slide Toggle?

how can i set object list in default input value

How can I set default value in insert into select?

How can I revert a property to its default value?

how can i set a value for property

System.Text.Json: when deserializing, how can I ignore a null or empty string value for a property that has a default value set in the constructor?

How can I set a Flatpickr theme dynamically?

Using TypeScript, how can I change interface based on the value of a property?

How can i set the focus to an entry from my viewmodel in MAUI