├── Assets
    ├── Clock.png
    ├── Play_Def.png
    ├── Play_Start.png
    ├── Play_Stop.png
    ├── shutdown_def.png
    └── shutdown_mo.png
├── Fonts
    └── Roboto-Black.ttf
├── Source Code
    └── Circular Progress Bar App.rar
├── README.md
├── App.xaml.cs
├── MainWindow.xaml.cs
├── LICENSE
├── MainWindow.xaml
└── App.xaml


/Assets/Clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/Clock.png


--------------------------------------------------------------------------------
/Assets/Play_Def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/Play_Def.png


--------------------------------------------------------------------------------
/Assets/Play_Start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/Play_Start.png


--------------------------------------------------------------------------------
/Assets/Play_Stop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/Play_Stop.png


--------------------------------------------------------------------------------
/Assets/shutdown_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/shutdown_def.png


--------------------------------------------------------------------------------
/Assets/shutdown_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Assets/shutdown_mo.png


--------------------------------------------------------------------------------
/Fonts/Roboto-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Fonts/Roboto-Black.ttf


--------------------------------------------------------------------------------
/Source Code/Circular Progress Bar App.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Circular-Progress-Bar-/HEAD/Source Code/Circular Progress Bar App.rar


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WPF - Circular Progress Bar
 2 | 
 3 | ![CPB Thumbnail](https://user-images.githubusercontent.com/55704859/205128973-12f16911-440e-4542-92a4-82234fceb936.png)
 4 | 
 5 | YouTube Video Tutorial Link
 6 | 
 7 | [![](https://img.youtube.com/vi/6E7DAH8VYHU/0.jpg)](https://www.youtube.com/watch?v=6E7DAH8VYHU)
 8 | 
 9 | Icon Credits : https://icons8.com/icons
10 | 


--------------------------------------------------------------------------------
/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 Circular_Progress_Bar_App
10 | {
11 |     /// <summary>
12 |     /// Interaction logic for App.xaml
13 |     /// </summary>
14 |     public partial class App : Application
15 |     {
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/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 Circular_Progress_Bar_App
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 ExitBtn_Click(object sender, RoutedEventArgs e)
29 |         {
30 |             Close();
31 |         }
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/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 | <!--
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created On :01-12-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |  -->
  6 | 
  7 | <Window x:Class="Circular_Progress_Bar_App.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:Circular_Progress_Bar_App"
 13 |         mc:Ignorable="d"
 14 |         Title="MainWindow"
 15 |         Height="600"
 16 |         Width="350"
 17 |         AllowsTransparency="True"
 18 |         WindowStartupLocation="CenterScreen"
 19 |         WindowStyle="None"
 20 |         Background="Transparent">
 21 | 
 22 |     <Grid>
 23 | 
 24 |         <Border Background="#FFFFFF"
 25 |                 CornerRadius="20" />
 26 | 
 27 |         <TextBlock Style="{StaticResource Title_Txt}" />
 28 | 
 29 |         <Grid VerticalAlignment="Center"
 30 |               HorizontalAlignment="Center">
 31 | 
 32 |             <Path Style="{StaticResource ProgressBarBase}" />
 33 | 
 34 |             <Grid Height="250"
 35 |                   Width="250"
 36 |                   Margin="255,-90,-235,0">
 37 | 
 38 |                 <Grid.RenderTransform>
 39 |                     <RotateTransform Angle="90" />
 40 |                 </Grid.RenderTransform>
 41 | 
 42 |                 <Path x:Name="CircularProgressBar"
 43 |                       Style="{StaticResource ProgressBarStyle}" />
 44 | 
 45 |             </Grid>
 46 | 
 47 |         </Grid>
 48 | 
 49 |         <Image Style="{StaticResource ClockImage}" />
 50 | 
 51 |         <Border Style="{StaticResource BackgroundBorder}" />
 52 | 
 53 |         <Ellipse Style="{StaticResource BackgroundEllipse}" />
 54 | 
 55 |         <Ellipse Style="{StaticResource ButtonEllipse}" />
 56 | 
 57 |         <Ellipse Style="{StaticResource ButtonBackground}" />
 58 |         
 59 |         <!--Start / Stop Animation Toggle Button-->
 60 | 
 61 |         <ToggleButton x:Name="Play_Btn"
 62 |                       Height="75"
 63 |                       Width="75"
 64 |                       HorizontalAlignment="Center"
 65 |                       VerticalAlignment="Center"
 66 |                       Margin="0,280,0,0"
 67 |                       Style="{StaticResource PlayBtn_Style}">
 68 | 
 69 |             <ToggleButton.Resources>
 70 | 
 71 |                 <Storyboard x:Key="Start_Animation">
 72 | 
 73 |                     <DoubleAnimation BeginTime="0:0:0"
 74 |                                      Storyboard.TargetName="CircularProgressBar"
 75 |                                      Storyboard.TargetProperty="StrokeDashOffset"
 76 |                                      Duration="0:0:25"
 77 |                                      From="100"
 78 |                                      To="0" />
 79 | 
 80 |                     <DoubleAnimation Storyboard.TargetProperty="Opacity"
 81 |                                      Storyboard.TargetName="CircularProgressBar"
 82 |                                      From="0"
 83 |                                      To="1"
 84 |                                      BeginTime="0:0:0"
 85 |                                      Duration="0:0:0" />
 86 | 
 87 |                     <DoubleAnimation Storyboard.TargetProperty="Opacity"
 88 |                                      Storyboard.TargetName="CircularProgressBar"
 89 |                                      From="1"
 90 |                                      To="0"
 91 |                                      BeginTime="0:0:8.5"
 92 |                                      Duration="0:0:0" />
 93 | 
 94 |                 </Storyboard>
 95 | 
 96 |                 <Storyboard x:Key="Stop_Animation">
 97 | 
 98 |                     <DoubleAnimation Storyboard.TargetProperty="Opacity"
 99 |                                      Storyboard.TargetName="CircularProgressBar"
100 |                                      From="1"
101 |                                      To="0"
102 |                                      BeginTime="0:0:0"
103 |                                      Duration="0:0:0" />
104 | 
105 |                 </Storyboard>
106 |                 
107 |             </ToggleButton.Resources>
108 | 
109 |             <ToggleButton.Triggers>
110 | 
111 |                 <EventTrigger RoutedEvent="ToggleButton.Checked">
112 |                     <BeginStoryboard Storyboard="{StaticResource Start_Animation}" />
113 |                 </EventTrigger>
114 | 
115 |                 <EventTrigger RoutedEvent="ToggleButton.Unchecked">
116 |                     <BeginStoryboard Storyboard="{StaticResource Stop_Animation}" />
117 |                 </EventTrigger>
118 |                 
119 |             </ToggleButton.Triggers>
120 |             
121 |         </ToggleButton>
122 |         
123 |         <!--Exit Button-->
124 | 
125 |         <Button x:Name="ExitBtn"
126 |                 Style="{StaticResource ExitBtnStyle}"
127 |                 Click="ExitBtn_Click" />
128 | 
129 |     </Grid>
130 |     
131 | </Window>
132 | 


--------------------------------------------------------------------------------
/App.xaml:
--------------------------------------------------------------------------------
  1 | <Application x:Class="Circular_Progress_Bar_App.App"
  2 |              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3 |              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4 |              xmlns:local="clr-namespace:Circular_Progress_Bar_App"
  5 |              StartupUri="MainWindow.xaml">
  6 |     
  7 |     <Application.Resources>
  8 | 
  9 |         <ImageBrush x:Key="PlayBtn_Background"
 10 |                     ImageSource="Assets/Play_Def.png"
 11 |                     Stretch="None" />
 12 | 
 13 |         <ImageBrush x:Key="PlayBtn_IsMouseOver"
 14 |                     ImageSource="Assets/Play_Start.png"
 15 |                     Stretch="None" />
 16 | 
 17 |         <ImageBrush x:Key="PlayBtn_IsChecked"
 18 |                     ImageSource="Assets/Play_Stop.png"
 19 |                     Stretch="None" />
 20 | 
 21 |         <Style x:Key="PlayBtn_Style"
 22 |                TargetType="ToggleButton">
 23 | 
 24 |             <Setter Property="Template">
 25 |                 <Setter.Value>
 26 |                     <ControlTemplate TargetType="ToggleButton">
 27 | 
 28 |                         <Border x:Name="border"
 29 |                                 Background="{StaticResource PlayBtn_Background}">
 30 |                             <ContentPresenter />
 31 |                         </Border>
 32 | 
 33 |                         <ControlTemplate.Triggers>
 34 | 
 35 |                             <Trigger Property="IsMouseOver"
 36 |                                      Value="True">
 37 | 
 38 |                                 <Setter Property="Background"
 39 |                                         TargetName="border"
 40 |                                         Value="{StaticResource PlayBtn_IsMouseOver}" />
 41 | 
 42 |                             </Trigger>
 43 | 
 44 |                             <Trigger Property="IsChecked"
 45 |                                      Value="True">
 46 | 
 47 |                                 <Setter Property="Background"
 48 |                                         TargetName="border"
 49 |                                         Value="{StaticResource PlayBtn_IsChecked}" />
 50 | 
 51 |                             </Trigger>
 52 | 
 53 |                             <!--If Else Condition - Uncheck toggle button if circular progress bar opacity is zero-->
 54 | 
 55 |                             <DataTrigger Binding="{Binding ElementName=CircularProgressBar, Path=Opacity}"
 56 |                                          Value="1">
 57 |                                 <Setter Property="ToggleButton.IsChecked"
 58 |                                         Value="True" />
 59 |                             </DataTrigger>
 60 | 
 61 |                         </ControlTemplate.Triggers>
 62 |                     </ControlTemplate>
 63 |                 </Setter.Value>
 64 |             </Setter>
 65 |         </Style>
 66 | 
 67 |         <Style x:Key="Title_Txt"
 68 |                TargetType="TextBlock">
 69 | 
 70 |             <Setter Property="Text"
 71 |                     Value="Timer" />
 72 |             <Setter Property="Foreground"
 73 |                     Value="#323232" />
 74 |             <Setter Property="FontFamily"
 75 |                     Value="/Fonts/#Roboto Black" />
 76 |             <Setter Property="FontSize"
 77 |                     Value="28" />
 78 |             <Setter Property="HorizontalAlignment"
 79 |                     Value="Center" />
 80 |             <Setter Property="VerticalAlignment"
 81 |                     Value="Top" />
 82 |             <Setter Property="Margin"
 83 |                     Value="0,60,0,0" />
 84 | 
 85 |         </Style>
 86 | 
 87 |         <Style x:Key="ProgressBarBase"
 88 |                TargetType="Path">
 89 | 
 90 |             <Setter Property="HorizontalAlignment"
 91 |                     Value="Center" />
 92 |             <Setter Property="VerticalAlignment"
 93 |                     Value="Center" />
 94 |             <Setter Property="Stroke"
 95 |                     Value="#D8D8D8" />
 96 |             <Setter Property="StrokeThickness"
 97 |                     Value="20" />
 98 |             <Setter Property="StrokeStartLineCap"
 99 |                     Value="Flat" />
100 |             <Setter Property="StrokeEndLineCap"
101 |                     Value="Flat" />
102 |             <Setter Property="StrokeDashOffset"
103 |                     Value="0" />
104 |             <Setter Property="StrokeDashArray"
105 |                     Value="0.1" />
106 |             <Setter Property="Data"
107 |                     Value="M 0,100 A 100,100 0 1 1 200,100 A 100,100 0 1 1 0,100" />
108 |             <Setter Property="Margin"
109 |                     Value="10,0,0,90" />
110 | 
111 |         </Style>
112 | 
113 |         <Style x:Key="ProgressBarStyle"
114 |                TargetType="Path">
115 | 
116 |             <Setter Property="HorizontalAlignment"
117 |                     Value="Center" />
118 |             <Setter Property="VerticalAlignment"
119 |                     Value="Center" />
120 |             <Setter Property="Stroke"
121 |                     Value="#FF7000" />
122 |             <Setter Property="StrokeThickness"
123 |                     Value="20" />
124 |             <Setter Property="StrokeStartLineCap"
125 |                     Value="Flat" />
126 |             <Setter Property="StrokeEndLineCap"
127 |                     Value="Flat" />
128 |             <Setter Property="StrokeDashOffset"
129 |                     Value="0" />
130 |             <Setter Property="StrokeDashArray"
131 |                     Value="100" />
132 |             <Setter Property="Data"
133 |                     Value="M 0,100 A 100,100 0 1 1 200,100 A 100,100 0 1 1 0,100" />
134 |             <Setter Property="Opacity"
135 |                     Value="0" />
136 | 
137 |         </Style>
138 | 
139 |         <Style x:Key="ClockImage"
140 |                TargetType="Image">
141 | 
142 |             <Setter Property="Source"
143 |                     Value="/Assets/Clock.png" />
144 |             <Setter Property="HorizontalAlignment"
145 |                     Value="Center" />
146 |             <Setter Property="VerticalAlignment"
147 |                     Value="Top" />
148 |             <Setter Property="Margin"
149 |                     Value="0,150,0,0" />
150 |             <Setter Property="Stretch"
151 |                     Value="None" />
152 | 
153 |         </Style>
154 | 
155 |         <Style x:Key="BackgroundEllipse"
156 |                TargetType="Ellipse">
157 | 
158 |             <Setter Property="Height"
159 |                     Value="100" />
160 |             <Setter Property="Width"
161 |                     Value="400" />
162 |             <Setter Property="HorizontalAlignment"
163 |                     Value="Center" />
164 |             <Setter Property="Fill"
165 |                     Value="#FF7000" />
166 |             <Setter Property="Margin"
167 |                     Value="0,380,0,0" />
168 | 
169 |         </Style>
170 | 
171 |         <Style x:Key="BackgroundBorder"
172 |                TargetType="Border">
173 | 
174 |             <Setter Property="Height"
175 |                     Value="100" />
176 |             <Setter Property="Width"
177 |                     Value="350" />
178 |             <Setter Property="HorizontalAlignment"
179 |                     Value="Center" />
180 |             <Setter Property="VerticalAlignment"
181 |                     Value="Bottom" />
182 |             <Setter Property="Background"
183 |                     Value="#FF7000" />
184 |             <Setter Property="CornerRadius"
185 |                     Value="0,0,20,20" />
186 | 
187 |         </Style>
188 | 
189 |         <Style x:Key="ButtonEllipse"
190 |                TargetType="Ellipse">
191 | 
192 |             <Setter Property="Height"
193 |                     Value="90" />
194 |             <Setter Property="Width"
195 |                     Value="90" />
196 |             <Setter Property="HorizontalAlignment"
197 |                     Value="Center" />
198 |             <Setter Property="Fill"
199 |                     Value="#FFFFFF" />
200 |             <Setter Property="Margin"
201 |                     Value="0,280,0,0" />
202 | 
203 |         </Style>
204 | 
205 |         <Style x:Key="ButtonBackground"
206 |                TargetType="Ellipse">
207 | 
208 |             <Setter Property="Height"
209 |                     Value="75" />
210 |             <Setter Property="Width"
211 |                     Value="75" />
212 |             <Setter Property="HorizontalAlignment"
213 |                     Value="Center" />
214 |             <Setter Property="Fill"
215 |                     Value="#E8E8E8" />
216 |             <Setter Property="Margin"
217 |                     Value="0,280,0,0" />
218 | 
219 |         </Style>
220 | 
221 |         <!--// Exit Button Style //-->
222 | 
223 |         <ImageBrush x:Key="close_def"
224 |                     ImageSource="Assets/shutdown_def.png"
225 |                     Stretch="Uniform" />
226 | 
227 |         <ImageBrush x:Key="close_mo"
228 |                     ImageSource="Assets/shutdown_mo.png"
229 |                     Stretch="Uniform" />
230 | 
231 |         <Style x:Key="ExitBtnStyle"
232 |                TargetType="{x:Type Button}">
233 | 
234 |             <Setter Property="Height"
235 |                     Value="30" />
236 |             <Setter Property="Width"
237 |                     Value="30" />
238 |             <Setter Property="HorizontalAlignment"
239 |                     Value="Right" />
240 |             <Setter Property="VerticalAlignment"
241 |                     Value="Top" />
242 |             <Setter Property="Margin"
243 |                     Value="0,16,16,0" />
244 | 
245 |             <Setter Property="Template">
246 | 
247 |                 <Setter.Value>
248 | 
249 |                     <ControlTemplate TargetType="{x:Type Button}">
250 | 
251 |                         <Border x:Name="border"
252 |                                 BorderThickness="0"
253 |                                 Background="{StaticResource close_def}" />
254 | 
255 |                         <ControlTemplate.Triggers>
256 | 
257 |                             <Trigger Property="IsMouseOver"
258 |                                      Value="True">
259 | 
260 |                                 <Setter Property="Background"
261 |                                         TargetName="border"
262 |                                         Value="{StaticResource close_mo}" />
263 | 
264 |                             </Trigger>
265 | 
266 |                             <Trigger Property="IsPressed"
267 |                                      Value="True">
268 | 
269 |                                 <Setter Property="Background"
270 |                                         TargetName="border"
271 |                                         Value="{StaticResource close_mo}" />
272 | 
273 |                             </Trigger>
274 | 
275 |                         </ControlTemplate.Triggers>
276 | 
277 |                     </ControlTemplate>
278 | 
279 |                 </Setter.Value>
280 | 
281 |             </Setter>
282 | 
283 |         </Style>
284 | 
285 |     </Application.Resources>
286 |     
287 | </Application>
288 | 


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