CODEWITHSUNDEEP
androidbuttonbindingmauiconverters
hugo vazquez
hugo vazquez

Reputation: 19

Change color text of a button in Maui Android depending on Enabled value

I have a button in a Popup in Maui Android that has a Binding to the IsEnabled property. I have created a converter so that the text color is changed if the IsSignButtonEnabled property is 1 or 0.

The converter runs correctly as the value of the property changes. But the button text only changes color when it is enabled. If it is disabled, it does not choose the color that I have in the converter. But the program does go down the path of choosing one color or another...Apart from that, the IsEnabled property works because it disables the button...I don't understand...

<Button
Grid.Row="2"
Text="Firmar"  
IsEnabled="{Binding IsSignButtonEnabled}"
TextColor="{Binding IsSignButtonEnabled, Converter={StaticResource ButtonColorConverter}}"  
Clicked="OpenCart"/>

public class ButtonColorConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is bool isEnabled && !isEnabled)
{
return Color.FromHex("#f5092b"); // Color para botón deshabilitado
}
else
{
return Color.FromHex("#04b84a"); // Color para botón habilitado
}
}

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

}

In the ViewModel I have the ObservableProperty that works perfectly

[ObservableProperty]
public bool isSignButtonEnabled;

I need the button to change from one color to another depending on whether it is enabled or not.

Upvotes: 0

Views: 342

Answers (1)

Cfun
Cfun

Reputation: 9721

I believe it is an overkill to use a Converter in your case, instead you can just use a VisualStateManager

<Button Grid.Row="2" Text="Firmar" Clicked="OpenCart"
IsEnabled="{Binding IsSignButtonEnabled}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="#04b84a" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="#f5092b" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
</Button>

Edit

In order to apply a Strikethrough on the Button text while it doesn't have a TextDecorations property like the Label does, you need to use platform code; using handlers: Just for demonstrate I have used PropertyChanged event, you can still use it but a more elegant way is by creating a custom button with custom property to control that.

<Button PropertyChanged="CounterBtn_PropertyChanged"/>


    private void CounterBtn_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == IsEnabledProperty.PropertyName)
        {
            var button = sender as Button;
#if ANDROID
            if (!button.IsEnabled)
                (button.Handler.PlatformView as MaterialButton).PaintFlags = PaintFlags.StrikeThruText;
#endif
        }
    }

I have only included code for Android, take a look at https://stackoverflow.com/a/69721069/ for iOS.

Upvotes: 0

Related Questions