title: WPF circle progress bar
body: <p>I want to replace the regular <code>ProgressBar</code> with circle one and after shot search here in the forum i found what i want.</p>
  
  <p>CircularProgressBar.XAML</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Path x:Name="pathRoot" Stroke="{Binding SegmentColor, ElementName=userControl}" 
            StrokeThickness="{Binding StrokeThickness, ElementName=userControl}" HorizontalAlignment="Left" VerticalAlignment="Top"&gt;
          &lt;Path.Data&gt;
              &lt;PathGeometry&gt;
                  &lt;PathGeometry.Figures&gt;
                      &lt;PathFigureCollection&gt;
                          &lt;PathFigure x:Name="pathFigure"&gt;
                              &lt;PathFigure.Segments&gt;
                                  &lt;PathSegmentCollection&gt;
                                      &lt;ArcSegment x:Name="arcSegment" SweepDirection="Clockwise" /&gt;
                                  &lt;/PathSegmentCollection&gt;
                              &lt;/PathFigure.Segments&gt;
                          &lt;/PathFigure&gt;
                      &lt;/PathFigureCollection&gt;
                  &lt;/PathGeometry.Figures&gt;
              &lt;/PathGeometry&gt;
          &lt;/Path.Data&gt;
      &lt;/Path&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>CircularProgressBar.cs:</p>
  
  <pre><code>public partial class CircularProgressBar : UserControl
  {
      public CircularProgressBar()
      {
          InitializeComponent();
          Angle = (Percentage * 360) / 100;
          RenderArc();
      }
  
      public int Radius
      {
          get { return (int)GetValue(RadiusProperty); }
          set { SetValue(RadiusProperty, value); }
      }
  
      public Brush SegmentColor
      {
          get { return (Brush)GetValue(SegmentColorProperty); }
          set { SetValue(SegmentColorProperty, value); }
      }
  
      public int StrokeThickness
      {
          get { return (int)GetValue(StrokeThicknessProperty); }
          set { SetValue(StrokeThicknessProperty, value); }
      }
  
      public double Percentage
      {
          get { return (double)GetValue(PercentageProperty); }
          set { SetValue(PercentageProperty, value); }
      }
  
      public double Angle
      {
          get { return (double)GetValue(AngleProperty); }
          set { SetValue(AngleProperty, value); }
      }
  
      // Using a DependencyProperty as the backing store for Percentage.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty PercentageProperty =
          DependencyProperty.Register("Percentage", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(65d, new PropertyChangedCallback(OnPercentageChanged)));
  
      // Using a DependencyProperty as the backing store for StrokeThickness.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty StrokeThicknessProperty =
          DependencyProperty.Register("StrokeThickness", typeof(int), typeof(CircularProgressBar), new PropertyMetadata(5, new PropertyChangedCallback(OnThicknessChanged)));
  
      // Using a DependencyProperty as the backing store for SegmentColor.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty SegmentColorProperty =
          DependencyProperty.Register("SegmentColor", typeof(Brush), typeof(CircularProgressBar), new PropertyMetadata(new SolidColorBrush(Colors.Red), new PropertyChangedCallback(OnColorChanged)));
  
      // Using a DependencyProperty as the backing store for Radius.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty RadiusProperty =
          DependencyProperty.Register("Radius", typeof(int), typeof(CircularProgressBar), new PropertyMetadata(25, new PropertyChangedCallback(OnPropertyChanged)));
  
      // 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(120d, new PropertyChangedCallback(OnPropertyChanged)));
  
      private static void OnColorChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
      {
          CircularProgressBar circle = sender as CircularProgressBar;
          circle.set_Color((SolidColorBrush)args.NewValue);
      }
  
      private static void OnThicknessChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
      {
          CircularProgressBar circle = sender as CircularProgressBar;
          circle.set_tick((int)args.NewValue);
      }
  
      private static void OnPercentageChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
      {
          CircularProgressBar circle = sender as CircularProgressBar;
          if (circle.Percentage &gt; 100) circle.Percentage = 100;
          circle.Angle = (circle.Percentage * 360) / 100;
      }
  
      private static void OnPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
      {
          CircularProgressBar circle = sender as CircularProgressBar;
          circle.RenderArc();
      }
  
      public void set_tick(int n)
      {
          pathRoot.StrokeThickness = n;
      }
  
      public void set_Color(SolidColorBrush n)
      {
          pathRoot.Stroke = n;
      }
  
      public void RenderArc()
      {
          Point startPoint =  new Point(Radius, 0);
          Point endPoint = ComputeCartesianCoordinate(Angle, Radius);
          endPoint.X += Radius;
          endPoint.Y += Radius;
  
          pathRoot.Width = Radius * 2 + StrokeThickness;
          pathRoot.Height = Radius * 2 + StrokeThickness;
          pathRoot.Margin = new Thickness(StrokeThickness, StrokeThickness, 0, 0);
  
          bool largeArc = Angle &gt; 180.0;
  
          Size outerArcSize = new Size(Radius, Radius);
  
          pathFigure.StartPoint = startPoint;
  
          if (startPoint.X == Math.Round(endPoint.X) &amp;&amp; startPoint.Y == Math.Round(endPoint.Y))
              endPoint.X -= 0.01;
  
          arcSegment.Point = endPoint;
          arcSegment.Size = outerArcSize;
          arcSegment.IsLargeArc = largeArc;
      }
  
      private Point ComputeCartesianCoordinate(double angle, double radius)
      {
          // convert to radians
          double angleRad = (Math.PI / 180.0) * (angle - 90);
  
          double x = radius * Math.Cos(angleRad);
          double y = radius * Math.Sin(angleRad);
  
          return new Point(x, y);
      }
  }
  </code></pre>
  
  <p>MainWindow.xaml:</p>
  
  <pre><code>    &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="Auto"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
          &lt;Grid HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
              &lt;DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center"
                SegmentColor="#FF878889" StrokeThickness="25" Percentage="100" /&gt;
              &lt;DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center"
                Percentage="{Binding Value, ElementName=slider}" SegmentColor="#026873" StrokeThickness="25" /&gt;
          &lt;/Grid&gt;
          &lt;Grid HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
          &lt;Grid HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
          &lt;Grid HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
      &lt;/StackPanel&gt;
      &lt;Slider x:Name="slider" Grid.Row="1" Maximum="100" Value="60" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>And the result:</p>
  
  <p><a href="http://s21.postimg.org/xymj8k4pz/image.png" rel="noreferrer">http://s21.postimg.org/xymj8k4pz/image.png</a></p>
  
  <p>So after copy paste the same code into my solution and running all i can see is only the <code>Slider</code> withou the <code>Circle Bar</code>, this is my code:</p>
  
  <pre><code>&lt;StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="530,303,114,303"&gt;
      &lt;Grid HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
          &lt;DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center"
           SegmentColor="#FF878889" StrokeThickness="8" Percentage="100" /&gt;
          &lt;DesignInControl:CircularProgressBar HorizontalAlignment="Center" VerticalAlignment="Center"
           Percentage="{Binding Value, ElementName=slider}" SegmentColor="#026873" StrokeThickness="8" /&gt;
      &lt;/Grid&gt;
  &lt;/StackPanel&gt;
  &lt;Slider x:Name="slider" Maximum="100" Value="20" Width="200" Margin="597,185,227,495" /&gt;
  </code></pre>
  
  <p>Am i doing something wrong ?</p>