├── App.xaml
├── App.xaml.cs
├── Assets
    ├── shutdown_def.png
    ├── shutdown_mo.png
    └── wifi_icon.png
├── Fonts
    └── Kanit-Medium.ttf
├── LICENSE
├── MainWindow.xaml
├── MainWindow.xaml.cs
├── README.md
└── Source Code
    └── RippleApp.rar


/App.xaml:
--------------------------------------------------------------------------------
  1 | <!--/// <Summary>
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created :01-03-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |     /// </Summary>-->
  6 | 
  7 | <Application x:Class="RippleApp.App"
  8 |              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  9 |              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 10 |              xmlns:local="clr-namespace:RippleApp"
 11 |              StartupUri="MainWindow.xaml">
 12 | 
 13 |     <Application.Resources>
 14 | 
 15 |         <!--// Toggle Button Style //-->
 16 | 
 17 |         <Style x:Key="TgBtnStyle"
 18 |                TargetType="ToggleButton">
 19 | 
 20 |             <Setter Property="Template">
 21 | 
 22 |                 <Setter.Value>
 23 | 
 24 |                     <ControlTemplate TargetType="ToggleButton">
 25 | 
 26 |                         <Border x:Name="border"
 27 |                                 Background="Transparent"
 28 |                                 CornerRadius="60">
 29 | 
 30 |                             <Grid>
 31 | 
 32 |                                 <Image Source="Assets/wifi_icon.png"
 33 |                                        Stretch="None" />
 34 | 
 35 |                             </Grid>
 36 | 
 37 |                         </Border>
 38 | 
 39 |                         <ControlTemplate.Triggers>
 40 | 
 41 |                             <Trigger Property="IsMouseOver"
 42 |                                      Value="True">
 43 | 
 44 |                                 <Setter Property="Background"
 45 |                                         TargetName="border"
 46 |                                         Value="#A9C220" />
 47 | 
 48 |                             </Trigger>
 49 | 
 50 |                             <Trigger Property="IsChecked"
 51 |                                      Value="True">
 52 | 
 53 |                                 <Setter Property="Background"
 54 |                                         TargetName="border"
 55 |                                         Value="#A9C220" />
 56 | 
 57 |                             </Trigger>
 58 | 
 59 |                             <MultiTrigger>
 60 | 
 61 |                                 <MultiTrigger.Conditions>
 62 | 
 63 |                                     <Condition Property="IsMouseOver"
 64 |                                                Value="True" />
 65 | 
 66 |                                     <Condition Property="IsChecked"
 67 |                                                Value="False" />
 68 | 
 69 |                                 </MultiTrigger.Conditions>
 70 | 
 71 |                                 <Setter Property="Background"
 72 |                                         TargetName="border"
 73 |                                         Value="#FF5231" />
 74 | 
 75 |                             </MultiTrigger>
 76 | 
 77 |                         </ControlTemplate.Triggers>
 78 | 
 79 |                     </ControlTemplate>
 80 | 
 81 |                 </Setter.Value>
 82 | 
 83 |             </Setter>
 84 | 
 85 |         </Style>
 86 | 
 87 |         <!--// Close App Button Style //-->
 88 | 
 89 |         <ImageBrush x:Key="close_def"
 90 |                     ImageSource="Assets/shutdown_def.png"
 91 |                     Stretch="None" />
 92 | 
 93 |         <ImageBrush x:Key="close_mo"
 94 |                     ImageSource="Assets/shutdown_mo.png"
 95 |                     Stretch="None" />
 96 | 
 97 |         <Style x:Key="CloseAppStyle"
 98 |                TargetType="{x:Type Button}">
 99 | 
100 |             <Setter Property="Height"
101 |                     Value="35" />
102 |             <Setter Property="Width"
103 |                     Value="35" />
104 |             <Setter Property="HorizontalAlignment"
105 |                     Value="Right" />
106 |             <Setter Property="VerticalAlignment"
107 |                     Value="Top" />
108 |             <Setter Property="Margin"
109 |                     Value="0,20,20,0" />
110 | 
111 |             <Setter Property="Template">
112 | 
113 |                 <Setter.Value>
114 | 
115 |                     <ControlTemplate TargetType="{x:Type Button}">
116 | 
117 |                         <Border x:Name="border"
118 |                                 BorderThickness="0"
119 |                                 Background="{StaticResource close_def}" />
120 | 
121 |                         <ControlTemplate.Triggers>
122 | 
123 |                             <Trigger Property="IsMouseOver"
124 |                                      Value="True">
125 | 
126 |                                 <Setter Property="Background"
127 |                                         TargetName="border"
128 |                                         Value="{StaticResource close_mo}" />
129 | 
130 |                             </Trigger>
131 | 
132 |                             <Trigger Property="IsPressed"
133 |                                      Value="True">
134 | 
135 |                                 <Setter Property="Background"
136 |                                         TargetName="border"
137 |                                         Value="{StaticResource close_mo}" />
138 | 
139 |                             </Trigger>
140 | 
141 |                         </ControlTemplate.Triggers>
142 | 
143 |                     </ControlTemplate>
144 | 
145 |                 </Setter.Value>
146 | 
147 |             </Setter>
148 | 
149 | 
150 |         </Style>
151 | 
152 | 
153 |     </Application.Resources>
154 | 
155 | </Application>
156 | 


--------------------------------------------------------------------------------
/App.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Configuration;
 4 | using System.Data;
 5 | using System.Linq;
 6 | using System.Threading.Tasks;
 7 | using System.Windows;
 8 | 
 9 | namespace RippleApp
10 | {
11 |     /// <summary>
12 |     /// Interaction logic for App.xaml
13 |     /// </summary>
14 |     public partial class App : Application
15 |     {
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/Assets/shutdown_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Button-Ripple-Pulse-Effect/a671413d5b7048bd7610f27493bf0b891a949416/Assets/shutdown_def.png


--------------------------------------------------------------------------------
/Assets/shutdown_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Button-Ripple-Pulse-Effect/a671413d5b7048bd7610f27493bf0b891a949416/Assets/shutdown_mo.png


--------------------------------------------------------------------------------
/Assets/wifi_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Button-Ripple-Pulse-Effect/a671413d5b7048bd7610f27493bf0b891a949416/Assets/wifi_icon.png


--------------------------------------------------------------------------------
/Fonts/Kanit-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Button-Ripple-Pulse-Effect/a671413d5b7048bd7610f27493bf0b891a949416/Fonts/Kanit-Medium.ttf


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Arun Mutharasu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MainWindow.xaml:
--------------------------------------------------------------------------------
  1 | <!--/// <Summary>
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created :01-03-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |     /// </Summary>-->
  6 |     
  7 |     <Window x:Class="RippleApp.MainWindow"
  8 |         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  9 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 10 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 11 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 12 |         xmlns:local="clr-namespace:RippleApp"
 13 |         mc:Ignorable="d"
 14 |         Title="MainWindow"
 15 |         Height="600"
 16 |         Width="400"
 17 |         WindowStartupLocation="CenterScreen"
 18 |         WindowStyle="None"
 19 |         AllowsTransparency="True"
 20 |         Background="Transparent">
 21 | 
 22 |     <Grid>
 23 | 
 24 |         <Border Background="#2A2C2D"
 25 |                 CornerRadius="30"
 26 |                 BorderBrush="#EFEFEF"
 27 |                 BorderThickness="10" />
 28 | 
 29 |         <Border Background="#EFEFEF"
 30 |                 Height="40"
 31 |                 Width="220"
 32 |                 HorizontalAlignment="Center"
 33 |                 VerticalAlignment="Top"
 34 |                 CornerRadius="0,0,12,12">
 35 | 
 36 |             <TextBlock Text="C #   D E S I G N   P R O"
 37 |                        Foreground="#2A2C2D"
 38 |                        FontSize="18"
 39 |                        FontFamily="Fonts/#Kanit Medium"
 40 |                        HorizontalAlignment="Center"
 41 |                        VerticalAlignment="Center"
 42 |                        Margin="0,5,0,0" />
 43 | 
 44 |         </Border>
 45 | 
 46 |         <Border Background="#EFEFEF"
 47 |                 Height="20"
 48 |                 Width="190"
 49 |                 HorizontalAlignment="Center"
 50 |                 VerticalAlignment="Bottom"
 51 |                 Margin="0,0,0,7"
 52 |                 CornerRadius="5,5,0,0">
 53 | 
 54 |             <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 55 |                        Foreground="#2A2C2D"
 56 |                        FontSize="11"
 57 |                        FontFamily="Fonts/#Kanit Medium"
 58 |                        HorizontalAlignment="Center"
 59 |                        VerticalAlignment="Center" />
 60 | 
 61 |         </Border>
 62 |         
 63 |         <!--Ellipse - G1-->
 64 | 
 65 |         <Ellipse x:Name="EG_1"
 66 |                  Height="100"
 67 |                  Width="100"
 68 |                  Fill="#A9C220"
 69 |                  HorizontalAlignment="Center"
 70 |                  VerticalAlignment="Center" />
 71 | 
 72 |         <!--Ellipse - G2-->
 73 | 
 74 |         <Ellipse x:Name="EG_2"
 75 |                  Height="100"
 76 |                  Width="100"
 77 |                  Fill="#A9C220"
 78 |                  HorizontalAlignment="Center"
 79 |                  VerticalAlignment="Center" />
 80 | 
 81 |         <!--Ellipse - G3-->
 82 | 
 83 |         <Ellipse x:Name="EG_3"
 84 |                  Height="100"
 85 |                  Width="100"
 86 |                  Fill="#A9C220"
 87 |                  HorizontalAlignment="Center"
 88 |                  VerticalAlignment="Center" />
 89 |         
 90 |         <!--Ellipse - R1-->
 91 | 
 92 |         <Ellipse x:Name="ER_1"
 93 |                  Height="100"
 94 |                  Width="100"
 95 |                  Fill="#FF5231"
 96 |                  HorizontalAlignment="Center"
 97 |                  VerticalAlignment="Center" />
 98 | 
 99 |         <!--Ellipse - R2-->
100 | 
101 |         <Ellipse x:Name="ER_2"
102 |                  Height="100"
103 |                  Width="100"
104 |                  Fill="#FF5231"
105 |                  HorizontalAlignment="Center"
106 |                  VerticalAlignment="Center" />
107 | 
108 |         <!--Ellipse - R3-->
109 | 
110 |         <Ellipse x:Name="ER_3"
111 |                  Height="100"
112 |                  Width="100"
113 |                  Fill="#FF5231"
114 |                  HorizontalAlignment="Center"
115 |                  VerticalAlignment="Center" />
116 |         
117 |         <!--// Toggle Button //-->
118 | 
119 |         <ToggleButton x:Name="Tg_btn"
120 |                       Height="110"
121 |                       Width="110"
122 |                       HorizontalAlignment="Center"
123 |                       VerticalAlignment="Center"
124 |                       Style="{StaticResource TgBtnStyle}">
125 | 
126 |             <ToggleButton.Triggers>
127 | 
128 |                 <EventTrigger RoutedEvent="ToggleButton.Checked">
129 | 
130 |                     <EventTrigger.Actions>
131 | 
132 |                         <BeginStoryboard x:Name="Ellipse_Activated">
133 | 
134 |                             <Storyboard>
135 |                                 
136 |                                 <!--G1 Animation-->
137 | 
138 |                                 <DoubleAnimation BeginTime="00:00:00"
139 |                                                  Duration="00:00:03"
140 |                                                  From="100"
141 |                                                  To="300"
142 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
143 |                                                  Storyboard.TargetName="EG_1"
144 |                                                  RepeatBehavior="Forever" />
145 | 
146 |                                 <DoubleAnimation BeginTime="00:00:00"
147 |                                                  Duration="00:00:03"
148 |                                                  From="100"
149 |                                                  To="300"
150 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
151 |                                                  Storyboard.TargetName="EG_1"
152 |                                                  RepeatBehavior="Forever" />
153 | 
154 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
155 |                                                  Storyboard.TargetName="EG_1"
156 |                                                  From="1.0"
157 |                                                  To="0.0"
158 |                                                  BeginTime="00:00:00"
159 |                                                  Duration="00:00:03"
160 |                                                  RepeatBehavior="Forever" />
161 | 
162 |                                 <!--G2 Animation-->
163 | 
164 |                                 <DoubleAnimation BeginTime="00:00:01"
165 |                                                  Duration="00:00:03"
166 |                                                  From="100"
167 |                                                  To="300"
168 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
169 |                                                  Storyboard.TargetName="EG_2"
170 |                                                  RepeatBehavior="Forever" />
171 | 
172 |                                 <DoubleAnimation BeginTime="00:00:01"
173 |                                                  Duration="00:00:03"
174 |                                                  From="100"
175 |                                                  To="300"
176 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
177 |                                                  Storyboard.TargetName="EG_2"
178 |                                                  RepeatBehavior="Forever" />
179 | 
180 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
181 |                                                  Storyboard.TargetName="EG_2"
182 |                                                  From="1.0"
183 |                                                  To="0.0"
184 |                                                  BeginTime="00:00:01"
185 |                                                  Duration="00:00:03"
186 |                                                  RepeatBehavior="Forever" />
187 | 
188 |                                 <!--G3 Animation-->
189 | 
190 |                                 <DoubleAnimation BeginTime="00:00:02"
191 |                                                  Duration="00:00:03"
192 |                                                  From="100"
193 |                                                  To="300"
194 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
195 |                                                  Storyboard.TargetName="EG_3"
196 |                                                  RepeatBehavior="Forever" />
197 | 
198 |                                 <DoubleAnimation BeginTime="00:00:02"
199 |                                                  Duration="00:00:03"
200 |                                                  From="100"
201 |                                                  To="300"
202 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
203 |                                                  Storyboard.TargetName="EG_3"
204 |                                                  RepeatBehavior="Forever" />
205 | 
206 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
207 |                                                  Storyboard.TargetName="EG_3"
208 |                                                  From="1.0"
209 |                                                  To="0.0"
210 |                                                  BeginTime="00:00:02"
211 |                                                  Duration="00:00:03"
212 |                                                  RepeatBehavior="Forever" />
213 | 
214 | 
215 |                             </Storyboard>
216 |                             
217 |                         </BeginStoryboard>
218 |                         
219 |                     </EventTrigger.Actions>
220 |                     
221 |                 </EventTrigger>
222 | 
223 |                 <EventTrigger RoutedEvent="ToggleButton.Unchecked">
224 | 
225 |                     <EventTrigger.Actions>
226 | 
227 |                         <RemoveStoryboard BeginStoryboardName="Ellipse_Activated" />
228 | 
229 |                         <BeginStoryboard x:Name="Ellipse_Deactivated">
230 | 
231 |                             <Storyboard>
232 |                                 
233 |                                 <!--R1 Animation-->
234 | 
235 |                                 <DoubleAnimation BeginTime="00:00:00"
236 |                                                  Duration="00:00:03"
237 |                                                  From="300"
238 |                                                  To="100"
239 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
240 |                                                  Storyboard.TargetName="ER_1" />
241 | 
242 |                                 <DoubleAnimation BeginTime="00:00:00"
243 |                                                  Duration="00:00:03"
244 |                                                  From="300"
245 |                                                  To="100"
246 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
247 |                                                  Storyboard.TargetName="ER_1" />
248 | 
249 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
250 |                                                  Storyboard.TargetName="ER_1"
251 |                                                  From="0.0"
252 |                                                  To="1.0"
253 |                                                  BeginTime="00:00:00"
254 |                                                  Duration="00:00:03" />
255 | 
256 |                                 <!--R2 Animation-->
257 | 
258 |                                 <DoubleAnimation BeginTime="00:00:00"
259 |                                                  Duration="00:00:02"
260 |                                                  From="250"
261 |                                                  To="100"
262 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
263 |                                                  Storyboard.TargetName="ER_2" />
264 | 
265 |                                 <DoubleAnimation BeginTime="00:00:00"
266 |                                                  Duration="00:00:02"
267 |                                                  From="250"
268 |                                                  To="100"
269 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
270 |                                                  Storyboard.TargetName="ER_2" />
271 | 
272 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
273 |                                                  Storyboard.TargetName="ER_2"
274 |                                                  From="0.0"
275 |                                                  To="1.0"
276 |                                                  BeginTime="00:00:00"
277 |                                                  Duration="00:00:02" />
278 | 
279 |                                 <!--R3 Animation-->
280 | 
281 |                                 <DoubleAnimation BeginTime="00:00:00"
282 |                                                  Duration="00:00:01"
283 |                                                  From="200"
284 |                                                  To="100"
285 |                                                  Storyboard.TargetProperty="(Ellipse.Width)"
286 |                                                  Storyboard.TargetName="ER_3" />
287 | 
288 |                                 <DoubleAnimation BeginTime="00:00:00"
289 |                                                  Duration="00:00:01"
290 |                                                  From="200"
291 |                                                  To="100"
292 |                                                  Storyboard.TargetProperty="(Ellipse.Height)"
293 |                                                  Storyboard.TargetName="ER_3" />
294 | 
295 |                                 <DoubleAnimation Storyboard.TargetProperty="Opacity"
296 |                                                  Storyboard.TargetName="ER_3"
297 |                                                  From="0.0"
298 |                                                  To="1.0"
299 |                                                  BeginTime="00:00:00"
300 |                                                  Duration="00:00:01" />
301 | 
302 | 
303 |                             </Storyboard>
304 |                             
305 |                         </BeginStoryboard>
306 | 
307 |                     </EventTrigger.Actions>
308 |                     
309 |                 </EventTrigger>
310 |                 
311 |             </ToggleButton.Triggers>
312 |             
313 |         </ToggleButton>
314 |         
315 |         <!--// Close App Button //-->
316 | 
317 |         <Button x:Name="Close_App"
318 |                 Style="{StaticResource CloseAppStyle}"
319 |                 Click="Close_App_Click" />
320 | 
321 | 
322 |     </Grid>
323 | 
324 | </Window>
325 | 


--------------------------------------------------------------------------------
/MainWindow.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Text;
 5 | using System.Threading.Tasks;
 6 | using System.Windows;
 7 | using System.Windows.Controls;
 8 | using System.Windows.Data;
 9 | using System.Windows.Documents;
10 | using System.Windows.Input;
11 | using System.Windows.Media;
12 | using System.Windows.Media.Imaging;
13 | using System.Windows.Navigation;
14 | using System.Windows.Shapes;
15 | 
16 | namespace RippleApp
17 | {
18 |     /// <summary>
19 |     /// Interaction logic for MainWindow.xaml
20 |     /// </summary>
21 |     public partial class MainWindow : Window
22 |     {
23 |         public MainWindow()
24 |         {
25 |             InitializeComponent();
26 |         }
27 | 
28 |         private void Close_App_Click(object sender, RoutedEventArgs e)
29 |         {
30 |             Close();
31 |         }
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WPF - Button Ripple / Pulse Effect Animation
 2 | 
 3 | 
 4 | Video Tutorial Link : https://youtu.be/nZYD45NsGaE
 5 | 
 6 | ![Thumbnail](https://user-images.githubusercontent.com/55704859/156225596-2f3007a5-b313-405b-9dea-728921dd5a5f.png)
 7 | 
 8 | Icon Credits : https://icons8.com/icons
 9 | 
10 | <b>GitHub Account</b> : https://github.com/CSharpDesignPro
11 | 


--------------------------------------------------------------------------------
/Source Code/RippleApp.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Button-Ripple-Pulse-Effect/a671413d5b7048bd7610f27493bf0b891a949416/Source Code/RippleApp.rar


--------------------------------------------------------------------------------