lost tap effect when set the background of a button?

mc 3,746 Reputation points
2023-04-09T07:51:57.6566667+00:00

If I use default button <Button Text="Click" /> there is tap effect like waves but If I set the background of it the effect lost. <Button Text="Click"> <Button.Background> <LinearGradientBrush> <GradientStop Color="#ff0000" Offset="0" /> <GradientStop Color="#ef7532" Offset="1" /> </LinearGradientBrush> </Button.Background> </Button>

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,997 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 37,186 Reputation points Microsoft Vendor
    2023-04-10T02:55:36.6833333+00:00

    Hello,

    This is because when you use the Background property, this overrides the default Visual states.

    Therefore, if you still want to press the effect after setting the Background yourself, please refer to this official documentation example.

    Update: In the official default style, the button changes color when clicked, and you can refer to the following sample code to do the same for your gradient color scheme.

    <ContentPage.Resources>
        <LinearGradientBrush x:Key="nor">
            <GradientStop Color="#ff0000" Offset="0" />
            <GradientStop Color="#ef7532" Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="pre">
            <GradientStop Color="#000000" Offset="0" />
            <GradientStop Color="#ef7532" Offset="1" />
        </LinearGradientBrush>
    </ContentPage.Resources>
    
    <Button
        Text="Click me">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="{StaticResource nor}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Background" Value="{StaticResource pre}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
    </Button>
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.