Search code examples
c#.netxamlmauimaui-community-toolkit

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


Solution

  • 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>