how to add waves-effect in wpf?

Question

how to add waves-effect in wpf?

mc 5,796

how to add waves effect when I click ? like in button?

Linhnguyen Hanoi 0 Reputation points

2025-08-25T07:12:50.2566667+00:00

You can try to use EventTrigger and Animation to achieve this.

3 answers

Your answer

Linhnguyen Hanoi 0 Reputation points

2025-08-25T07:12:50.2566667+00:00

You can try to use EventTrigger and Animation to achieve this.

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

1 deleted comment

Comments have been turned off. Learn more

Answer 2

We can use DoubleAnimation and EventTrigger to achieve this.

And there is a ripple pulse effect button sample.

Please refer to the following code:

    <Window x:Class="RippleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RippleApp"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="600"
        Width="400"
        WindowStartupLocation="CenterScreen"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent">
    <Grid>
        <Border Background="#2A2C2D"
                CornerRadius="30"
                BorderBrush="#EFEFEF"
                BorderThickness="10" />
        <Border Background="#EFEFEF"
                Height="40"
                Width="220"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                CornerRadius="0,0,12,12">
            <TextBlock Text="C #   D E S I G N   P R O"
                       Foreground="#2A2C2D"
                       FontSize="18"
                       FontFamily="Fonts/#Kanit Medium"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Margin="0,5,0,0" />
        </Border>
        <Border Background="#EFEFEF"
                Height="20"
                Width="190"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                Margin="0,0,0,7"
                CornerRadius="5,5,0,0">
            <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
                       Foreground="#2A2C2D"
                       FontSize="11"
                       FontFamily="Fonts/#Kanit Medium"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center" />
        </Border>
        
        <!--Ellipse - G1-->
        <Ellipse x:Name="EG_1"
                 Height="100"
                 Width="100"
                 Fill="#A9C220"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        <!--Ellipse - G2-->
        <Ellipse x:Name="EG_2"
                 Height="100"
                 Width="100"
                 Fill="#A9C220"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        <!--Ellipse - G3-->
        <Ellipse x:Name="EG_3"
                 Height="100"
                 Width="100"
                 Fill="#A9C220"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        
        <!--Ellipse - R1-->
        <Ellipse x:Name="ER_1"
                 Height="100"
                 Width="100"
                 Fill="#FF5231"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        <!--Ellipse - R2-->
        <Ellipse x:Name="ER_2"
                 Height="100"
                 Width="100"
                 Fill="#FF5231"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        <!--Ellipse - R3-->
        <Ellipse x:Name="ER_3"
                 Height="100"
                 Width="100"
                 Fill="#FF5231"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center" />
        
        <!--// Toggle Button //-->
        <ToggleButton x:Name="Tg_btn"
                      Height="110"
                      Width="110"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Style="{StaticResource TgBtnStyle}">
            <ToggleButton.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <EventTrigger.Actions>
                        <BeginStoryboard x:Name="Ellipse_Activated">
                            <Storyboard>
                                
                                <!--G1 Animation-->
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="EG_1"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="EG_1"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="EG_1"
                                                 From="1.0"
                                                 To="0.0"
                                                 BeginTime="00:00:00"
                                                 Duration="00:00:03"
                                                 RepeatBehavior="Forever" />
                                <!--G2 Animation-->
                                <DoubleAnimation BeginTime="00:00:01"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="EG_2"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation BeginTime="00:00:01"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="EG_2"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="EG_2"
                                                 From="1.0"
                                                 To="0.0"
                                                 BeginTime="00:00:01"
                                                 Duration="00:00:03"
                                                 RepeatBehavior="Forever" />
                                <!--G3 Animation-->
                                <DoubleAnimation BeginTime="00:00:02"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="EG_3"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation BeginTime="00:00:02"
                                                 Duration="00:00:03"
                                                 From="100"
                                                 To="300"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="EG_3"
                                                 RepeatBehavior="Forever" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="EG_3"
                                                 From="1.0"
                                                 To="0.0"
                                                 BeginTime="00:00:02"
                                                 Duration="00:00:03"
                                                 RepeatBehavior="Forever" />
                            </Storyboard>
                            
                        </BeginStoryboard>
                        
                    </EventTrigger.Actions>
                    
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <EventTrigger.Actions>
                        <RemoveStoryboard BeginStoryboardName="Ellipse_Activated" />
                        <BeginStoryboard x:Name="Ellipse_Deactivated">
                            <Storyboard>
                                
                                <!--R1 Animation-->
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:03"
                                                 From="300"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="ER_1" />
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:03"
                                                 From="300"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="ER_1" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="ER_1"
                                                 From="0.0"
                                                 To="1.0"
                                                 BeginTime="00:00:00"
                                                 Duration="00:00:03" />
                                <!--R2 Animation-->
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:02"
                                                 From="250"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="ER_2" />
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:02"
                                                 From="250"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="ER_2" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="ER_2"
                                                 From="0.0"
                                                 To="1.0"
                                                 BeginTime="00:00:00"
                                                 Duration="00:00:02" />
                                <!--R3 Animation-->
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:01"
                                                 From="200"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                                 Storyboard.TargetName="ER_3" />
                                <DoubleAnimation BeginTime="00:00:00"
                                                 Duration="00:00:01"
                                                 From="200"
                                                 To="100"
                                                 Storyboard.TargetProperty="(Ellipse.Height)"
                                                 Storyboard.TargetName="ER_3" />
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 Storyboard.TargetName="ER_3"
                                                 From="0.0"
                                                 To="1.0"
                                                 BeginTime="00:00:00"
                                                 Duration="00:00:01" />
                            </Storyboard>
                            
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                    
                </EventTrigger>
                
            </ToggleButton.Triggers>
            
        </ToggleButton>
        
        <!--// Close App Button //-->
        <Button x:Name="Close_App"
                Style="{StaticResource CloseAppStyle}"
                Click="Close_App_Click" />
    </Grid>
</Window>

Refer: WPF---Button-Ripple-Pulse-Effec.

For more information, please check document: Create a Custom Animated Button.

Answer 3

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

how to add waves-effect in wpf?

3 answers

Your answer