Customizing the progress bar color in UWP using Xamarin Forms - xamarin

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.