title: WPF circular progress bar: how to move hard coded property
body: <p>In my application i am using <code>Circular progress-bar</code>.
  So in case i want to use this controller in several places how can i set the <code>Radius</code> property in my <code>XAML</code> instead of using the current value which is all the time 100 ? (in class <code>CircularProgressBar</code>)</p>
  
  <p>This is my <code>Circular progress bar</code>:</p>
  
  <pre><code>&lt;UserControl x:Class="myApplication.CircularProgressBar"
               x:Name="userControl"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
               mc:Ignorable="d" 
               d:DesignHeight="300" d:DesignWidth="300"&gt;
      &lt;Grid&gt;
          &lt;Grid&gt;
              &lt;Path x:Name="pathRoot" Stroke="{Binding SegmentColor, ElementName=userControl}"
                StrokeThickness="{Binding StrokeThickness, ElementName=userControl}" 
                HorizontalAlignment="Left" VerticalAlignment="Top" Height="100" Width="100"&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;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <hr>
  
  <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); }
          }
  
          public enum Modes
          {
              Full = 360,
              Half = 180,
              Intermediate = 250
          }
  
          public Modes CircularMode
          {
              get { return (Modes)GetValue(CircularModeProperty); }
              set { SetValue(CircularModeProperty, value); }
          }
  
          public static readonly DependencyProperty CircularModeProperty =
          DependencyProperty.Register("CircularMode", typeof(Modes), typeof(CircularProgressBar), new PropertyMetadata(Modes.Full));
  
          // 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(1));
  
          // 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)));
  
          // 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(100, 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 OnPercentageChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
          {
              CircularProgressBar circle = sender as CircularProgressBar;
              circle.Angle = (circle.Percentage * (int)circle.CircularMode) / 100;
          }
  
          private static void OnPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
          {
              CircularProgressBar circle = sender as CircularProgressBar;
              circle.RenderArc();
          }
  
          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>This is the hard code value:</p>
  
  <pre><code>// 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(100, new PropertyChangedCallback(OnPropertyChanged)));
  </code></pre>