lost tap effect when set the background of a button?

Question

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>

Answer 1

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.

• Button visual states.
• Visual states.

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.