Customizing the progress bar color in UWP using Xamarin Forms

Question

I made a progress bar customization (custom renderer) to change the progress bar color in iOS and Droid as seen in the following

Custom progress bar class in the PCL:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App2
{
   public class ColorProgressBar : ProgressBar
    {
        public static BindableProperty BarColorProperty
            = BindableProperty.Create<ColorProgressBar, Color>(p => 
                     p.BarColor, default(Color));

        public Color BarColor
           {
             get { return (Color)GetValue(BarColorProperty); }
             set { SetValue(BarColorProperty, value); }
           }
     }
  }

Custom renderer for iOS:

using App2;
using App2.iOS;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using Xamarin.Forms;

//using MonoTouch.Foundation;
//using MonoTouch.UIKit;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ColorProgressBar), 
typeof(ColorProgressBarRenderer))]

namespace App2.iOS
{
  public class ColorProgressBarRenderer : ProgressBarRenderer
    {
      public ColorProgressBarRenderer()
      { }

      protected override void 
      OnElementChanged(ElementChangedEventArgs<ProgressBar> e)
      {
         base.OnElementChanged(e);

         if (e.NewElement == null)
             return;

         if (Control != null)
         {
            UpdateBarColor();
         }
       }

       protected override void OnElementPropertyChanged(object sender, 
       PropertyChangedEventArgs e)
        {
          base.OnElementPropertyChanged(sender, e);

          if (e.PropertyName == 
              ColorProgressBar.BarColorProperty.PropertyName)
           {
             UpdateBarColor();
           }
         }
        private void UpdateBarColor()
         {
            var element = Element as ColorProgressBar;
            Control.TintColor = element.BarColor.ToUIColor();
         }
      }
  }

Custom renderer for Android:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.Renderscripts;
using static Java.Util.ResourceBundle;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;
using System.ComponentModel;
using Xamarin.Forms;
using App2;
using App2.Droid;

[assembly: ExportRenderer(typeof(ColorProgressBar), 
                        typeof(ColorProgressBarRenderer))]
namespace App2.Droid
{
    public class ColorProgressBarRenderer : ProgressBarRenderer
    {
        public ColorProgressBarRenderer()
        { }

        protected override void 
         OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> 
                           e)
               {
                  base.OnElementChanged(e);

                  if (e.NewElement == null)
                      return;

                  if (Control != null)
                   {
                      UpdateBarColor();
                   }
               }

       protected override void OnElementPropertyChanged(object sender, 
       PropertyChangedEventArgs e)
              {
                 base.OnElementPropertyChanged(sender, e);

                 if (e.PropertyName == 
                      ColorProgressBar.BarColorProperty.PropertyName)
                    {
                      UpdateBarColor();
                    }
              }

       private void UpdateBarColor()
              {
                var element = Element as ColorProgressBar;
                // http://stackoverflow.com/a/29199280
               Control.IndeterminateDrawable.SetColorFilter( 
               element.BarColor.ToAndroid(), PorterDuff.Mode.SrcIn);
               Control.ProgressDrawable.SetColorFilter( 
               element.BarColor.ToAndroid(), PorterDuff.Mode.SrcIn);
              }
     }
}

I'm setting the custom progress bar's color this way:

var progressBar = new ColorProgressBar();
progressBar.BarColor = Color.Red; 

I don't understand how to make a custom renderer class for UWP that changes the color of the progress bar. Could someone please help me understand how to do this class?

Answer 1

You're going to want to update the Foreground property of the native Windows.UI.Xaml.Controls.ProgressBar control to change the color.

It should look something like this:

private void UpdateBarColor()
{
    var element = Element as ColorProgressBar;
    Control.Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(
        GetWindowsColor(element.BarColor));
}

Windows.UI.Color GetWindowsColor(Color color)
{
    return Windows.UI.Color.FromArgb((byte)(255 * color.A), (byte)(255 * color.R), (byte)(255 * color.G), (byte)(255 * color.B));
}

This will take your BarColor, use it to make a SolidColorBrush of the right color, and then assign that to your native ProgressBar control.