CODEWITHSUNDEEP
c#.netxamlmauimaui-community-toolkit
mpasdanis
mpasdanis

Reputation: 289

How to Prevent Gray Color Feedback on Button Tap in .NET MAUI .NET 8

I recently updated my .NET MAUI application to .NET 8 and have encountered a new issue with button interaction. Before the update, the visual feedback when a button was tapped (changing to a gray color) was not an issue, but now, despite efforts to maintain the button's original background color (#5983FC) during tap interactions, the button changes to gray when tapped and then reverts back. I am looking for a way to either completely disable this gray color feedback or ensure the button's appearance remains unchanged during interaction.

Here is the XAML for my button :

<Border
     HorizontalOptions="FillAndExpand"
     StrokeShape="RoundRectangle 10,10,10,10"
     StrokeThickness="5"
     Stroke="White"
     Margin="5"
     BackgroundColor="#5983FC">
 <Button 
        Text="{Binding TitleScanningButton}"
        TextColor="White"
        FontSize="32"
        FontAttributes="Bold"
        BackgroundColor="#5983FC"
        Command="{Binding ScanCommand}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="#5983FC" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
 </Button>
</Border>

To handle the button's command, I have the following method in my ViewModel, which performs various checks and triggers alerts based on certain conditions:

public IAsyncRelayCommand ScanCommand => _scanCommand ??= new AsyncRelayCommand(ScanForPeripherals);

private async Task ScanForPeripherals()
{
    // Method logic that includes sending messages, checking conditions,
    // displaying alerts, and performing an action based on the conditions.
}

I attempted to use the VisualStateManager to explicitly set the Pressed state's background color to the same as the Normal state, aiming to override the default gray color feedback. Unfortunately, this did not produce the desired effect, and the button still changes to gray when tapped.

Additionally, I tried appending to the ButtonHandler's mapping for the BackgroundColor property in my MauiProgram.cs:

Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping(
    nameof(View.BackgroundColor),
    (handler, view) => handler.UpdateValue(nameof(IView.Background)));

This attempt also did not resolve the issue, as the button's tap feedback remains unchanged.

Is there an effective method in .NET MAUI to disable or customize this tap feedback color for a button? I'm looking for a solution that allows the button to maintain its original background color without changing to gray when pressed.

PS : The method ScanForPeripherals display an alert, for that reason it is dark in the second picture.

Button before tap enter image description here Button after tap enter image description here

Upvotes: 3

Views: 747

Answers (2)

FreakyAli
FreakyAli

Reputation: 16479

To avoid issues that I generally faced with the .NET MAUI button control I created a Button control myself that you can find on https://github.com/FreakyAli/Maui.FreakyControls

Post initialization you can do whatever your regular button can do and more and it has 4 different types of click animations available to choose from

 <freakyControls:FreakyButton
        Animation="FadeAndScale"
        BackgroundColor="{StaticResource Primary}"
        BorderColor="Black"
        BusyColor="White"
        HorizontalTextAlignment="Center"
        Text="Click me!"
        TextColor="White"
        VerticalTextAlignment="Center">
        </freakyControls:FreakyButton.TrailingIcon>
 </freakyControls:FreakyButton>

Upvotes: 1

Riccardo Minato
Riccardo Minato

Reputation: 1807

I think this is a bug in MAUI.

You can workaround in two ways.

1. Make the command async void

I personally don't like this way, because you should always return a Task when you can, but it's probably the fastest to apply and also to revert when the bug is fixed.

So your command would become

private async void ScanForPeripherals()
{
    // Method logic that includes sending messages, checking conditions,
    // displaying alerts, and performing an action based on the conditions.
}

2. Use a Border instead of a Button

A Border is not subject to state changes, so you could replace your Button with something like this.

<Border
    BackgroundColor="#5983FC">
    <Label
        Text="{Binding TitleScanningButton}"
        HorizontalTextAlignment="Center"
        FontSize="32"
        FontAttributes="Bold" />
    <Border.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding ScanCommand}" />
    </Border.GestureRecognizers>
</Border>

Upvotes: 2

Related Questions