Home » Windows Phone 7 Custom ProgressBar

  • Windows Phone 7 Custom ProgressBar

    Windows Phone 7 Custom ProgressBar

    What appeared to be straight forward proved to be a bit more difficult than I anticipated. I wanted to create a customized ProgressBar for the Windows Phone. The ProgressBar should take any image as input and Fill the image depending on the progress indicated by the Value property.

    In pictures:
    image imageimageimage

    So I create a class deriving from ProgressBar:

    using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace CustomControls
{
    [TemplatePart(Name="CLIPRECTANGLE", Type=typeof(RectangleGeometry))]
    public class ImageProgressBar : ProgressBar
    {
        public ImageProgressBar()
        {
            this.DefaultStyleKey = typeof(ImageProgressBar);
        }

        public ImageSource Source
        {
            get { return (ImageSource)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }

        public static readonly DependencyProperty SourceProperty =
            DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageProgressBar), new PropertyMetadata(null));

        public Brush Fill
        {
            get { return (Brush)GetValue(FillProperty); }
            set { SetValue(FillProperty, value); }
        }

        public static readonly DependencyProperty FillProperty =
            DependencyProperty.Register("Fill", typeof(Brush), typeof(ImageProgressBar), new PropertyMetadata(null));

        private RectangleGeometry _clip;

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _clip = this.GetTemplateChild("CLIPRECTANGLE") as RectangleGeometry;
            this.ValueChanged += ImageProgressBar_ValueChanged;
            this.SizeChanged += ImageProgressBar_SizeChanged;
        }

        void ImageProgressBar_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            UpdateClip();
        }

        void ImageProgressBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            UpdateClip();
        }

        private void UpdateClip()
        {
            if (_clip != null)
            {
                _clip.Rect = new Rect(0, 0, this.ActualWidth, this.ActualHeight * ((this.Value - this.Minimum) / (this.Maximum - this.Minimum)));
            }
        }
    }
}

    The Source property can be used to point to the image. The Fill property points to a brush that should fill the image. The _clip points to a RectangleGeometry in the template that has to cut off a part of the fill according to the progress.

    The UpdateClip adjusts the Rectangle based on the size of the progress bar and the progress indicated by the Value property.

    Next up; the template:

    &lt;ResourceDictionary  class="wlWriterEditableSmartContent"><pre>
[sourcecode language="xml" htmlscript="false"]
&lt;my:ImageProgressBar Width=&amp;quot;100&amp;quot;
                     Height=&amp;quot;100&amp;quot;
                     Fill=&amp;quot;Red&amp;quot;
                     Source=&amp;quot;ProgressBar.png&amp;quot;
                     Minimum=&amp;quot;100&amp;quot;
                     Maximum=&amp;quot;200&amp;quot;
                     Value=&amp;quot;{Binding ElementName=slider1, Path=Value, Mode=TwoWay}&amp;quot; /&gt;
&lt;Slider Margin=&amp;quot;0&amp;quot;
        Name=&amp;quot;slider1&amp;quot;
        VerticalAlignment=&amp;quot;Top&amp;quot;
        Minimum=&amp;quot;100&amp;quot;
        Maximum=&amp;quot;200&amp;quot;
        Value=&amp;quot;125&amp;quot; /&gt;

    I added a slider to see the progress on the Phone.

    Download the code here

    Share this

19 comments

  1. Seems like sample not working.

    Nishant

    • Could you elaborate? It is working on my machine.

      Erno de Weerd

  2. […] be just that…. great post on PivotViewer and great end to the series, plagiarized quote and all :)Windows Phone 7 Custom ProgressBarErno de Weerd has a very cool post up about doing a custom progress bar for WP7 using any image… […]

    WindowsDevNews.com

    • I tested the download on a different machine and found out what was wrong. I updated the download. Use that or simply add an existing project to the solution in Visual Studio and add the project that is not referenced.

      Erno de Weerd

      • Yeah !! its working now. Thanks !!

        Nice article

        Nishant

  3. My own implementation http://www.calabonga.com/Blog/ViewPost.aspx?id=72

    Calabonga

    • Looks fine (though my Russian isn’t good enough to judge any other thing than the C#, XAML and screenshots 🙂 ) I tried to avoid using animation because that will use CPU power.

      Erno de Weerd

  4. ProgressBarDemo-v2 folder contain two folder and i tried to open ProgressBar first and it gives error like this “Error 1 The referenced assembly “C:UsersDesktopProgressbarProgressBarDemo-v2ProgressBarBinDebugProgressBar.dll” was not found. If this assembly is produced by another one of your projects, please make sure to build that project before building this one. DemoApp
    ”

    what to do?

    john

    • Open the sln file in the root. The solution loads both projects. and takes care of the building order and dependencies.

      Erno de Weerd

  5. Need your help urgent :i just want to use your custom progress bar but i want to fill the bar horizontally instead of vertical can you please help me what should i change in your code to get the desired result?

    waiting for your reply

    thanks is advance.

    john

    • Just change the UpdateClip() method in the ImageProgressBar control like this:

      private void UpdateClip()
      {
      if (_clip != null)
      {
      _clip.Rect =
      new Rect(0, 0,
      this.ActualWidth * ((this.Value – this.Minimum) / (this.Maximum – this.Minimum)),
      this.ActualHeight );
      }
      }

      Erno de Weerd

  6. it’s done and i noticed that when i tried to change the position of image it gets invisible ? how can i place that image according to my position?

    john

    • There is an error in the generic.xaml Remove the Margin from the Border

      Erno de Weerd

  7. I downloaded the example. But i can’t debug it by Visual Studio . I only deploy it.

    Daniel

    • What do you mean that you can’t debug it? Do you just want to use it without building it?

      Erno de Weerd

      • I could build project , deploy project, but I can’t debug . The “Start Debugging (F5)” is gray

        Daniel

        • Did you set the test client as a start up project?

          Erno de Weerd

          • You are right!! Thank you very much. I can debug now.

            Daniel

Comments are closed.