title: styling a circular progress bar C# wpf
body: <p>I have got a wpf c# code that generates a circular progress bar, but I need to change it's size, suppose need to reduce size by factor of 2 or whatever. The only thing ii need to know is how to resize the circle, I have made some attempts, but all resulted in a deformed control.
  The source of my code is available <a href="https://stackoverflow.com/questions/4871263/how-to-create-a-circular-style-progressbar">here</a> by <a href="https://stackoverflow.com/users/5698517/ali-tor">Ali Tor</a>
   In the following is my code:
  <a href="https://i.stack.imgur.com/4PFdC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4PFdC.png" alt="enter image description here"></a></p>
  
  <p><strong>CircularProgressBar.cs</strong></p>
  
  <pre><code> public partial class CircularProgressBar : ProgressBar
  {
      public CircularProgressBar()
      {
          this.ValueChanged += CircularProgressBar_ValueChanged;
      }
  
      void CircularProgressBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs&lt;double&gt; e)
      {
          CircularProgressBar bar = sender as CircularProgressBar;
          double currentAngle = bar.Angle;
          double targetAngle = e.NewValue / bar.Maximum * 359.999;
  
          DoubleAnimation anim = new DoubleAnimation(currentAngle, targetAngle, TimeSpan.FromMilliseconds(500));
          bar.BeginAnimation(CircularProgressBar.AngleProperty, anim, HandoffBehavior.SnapshotAndReplace);
      }
  
      public double Angle
      {
          get { return (double)GetValue(AngleProperty); }
          set { SetValue(AngleProperty, value); }
      }
  
      // Using a DependencyProperty as the backing store for Angle.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty AngleProperty =
          DependencyProperty.Register("Angle", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(0.0));
  
      public double StrokeThickness
      {
          get { return (double)GetValue(StrokeThicknessProperty); }
          set { SetValue(StrokeThicknessProperty, value); }
      }
  
      // Using a DependencyProperty as the backing store for StrokeThickness.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty StrokeThicknessProperty =
          DependencyProperty.Register("StrokeThickness", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(10.0));
  }
  </code></pre>
  
  <p><strong>AngleToPointConverter.cs:</strong></p>
  
  <pre><code>class AngleToPointConverter : IValueConverter
  {
  
      public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          double angle = (double)value;
          double radius = 50;
          double piang = angle * Math.PI / 180;
  
          double px = Math.Sin(piang) * radius + radius;
          double py = -Math.Cos(piang) * radius + radius;
  
          return new Point(px, py);
      }
  
      public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          throw new NotImplementedException();
      }
  }
  </code></pre>
  
  <p><strong>AngleToIsLargeConverter.cs</strong></p>
  
  <pre><code>public class AngleToIsLargeConverter : IValueConverter
  {
  
      public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          double angle = (double)value;
  
          return angle &gt; 180;
      }
  
      public object ConvertBack(object value, Type targetTypes, object parameter, System.Globalization.CultureInfo culture)
      {
          throw new NotImplementedException();
      }
  }
  </code></pre>
  
  <p><strong>App.xaml:</strong></p>
  
  <pre><code>&lt;Application x:Class="WpfApplication1.App"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           StartupUri="MainWindow.xaml"
           xmlns:my="clr-namespace:WpfApplication1"&gt;
  &lt;Application.Resources&gt;
      &lt;my:AngleToPointConverter x:Key="prConverter"/&gt;
      &lt;my:AngleToIsLargeConverter x:Key="isLargeConverter"/&gt;
  
      &lt;Style x:Key="circularProgressBar" TargetType="my:CircularProgressBar"&gt;
          &lt;Setter Property="Value" Value="10"/&gt;
          &lt;Setter Property="Maximum" Value="100"/&gt;
          &lt;Setter Property="StrokeThickness" Value="10"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="my:CircularProgressBar"&gt;
                          &lt;Canvas Width="100" Height="100"&gt;
                          &lt;Ellipse Width="100" Height="100" Stroke="LightGray"
                                       StrokeThickness="1"/&gt;
  
                          &lt;Path Stroke="{TemplateBinding Background}" 
                                    StrokeThickness="{TemplateBinding StrokeThickness}"&gt;
                                  &lt;Path.Data&gt;
                                      &lt;PathGeometry&gt;
                                          &lt;PathFigure x:Name="fig" StartPoint="50,0"&gt;
                                              &lt;ArcSegment RotationAngle="0" SweepDirection="Clockwise"
                                                          Size="50,50"
                                                          Point="{Binding Path=Angle, Converter={StaticResource prConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=ProgressBar}}"
                                                          IsLargeArc="{Binding Path=Angle, Converter={StaticResource isLargeConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=ProgressBar}}"
                                                          &gt;
                                              &lt;/ArcSegment&gt;
                                          &lt;/PathFigure&gt;
                                      &lt;/PathGeometry&gt;
                                  &lt;/Path.Data&gt;
                              &lt;/Path&gt;
                              &lt;Border Width="100" Height="100"&gt;
                                  &lt;TextBlock Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center"
                                         Text="{Binding Path=Value, StringFormat={}%{0}, 
                                  RelativeSource={RelativeSource TemplatedParent}}"
                                             FontSize="{TemplateBinding FontSize}"/&gt;
                              &lt;/Border&gt;
                          &lt;/Canvas&gt;
  
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  &lt;/Application.Resources&gt;
  </code></pre>