Setting the display of the progress bar in Xamarin.Forms

Question

I used Drawable to set up the rendering of the ProgressBar in Android , as mentioned on this question , but the solution does not work with iOS.

The following shows how it displays in Android .

Below is how to do it in iOS

Below is the code for my iOS CustomRenderer

 [assembly: ExportRenderer(typeof(CustomProgressbar), typeof(CustomProgressBarRenderer))] namespace Demo.iOS.Renderers { public class CustomProgressBarRenderer : ProgressBarRenderer { protected override void OnElementChanged(ElementChangedEventArgs<ProgressBar> e) { try { base.OnElementChanged(e); if (Control != null) { Control.ProgressTintColor = Color.FromHex("#ff0000").ToUIColor(); Control.TrackTintColor = Color.FromHex("#3489cc").ToUIColor(); } } catch (Exception ex) { } } public override void LayoutSubviews() { base.LayoutSubviews(); var X = 1.0f; var Y = 15.0f; CGAffineTransform _transform = CGAffineTransform.MakeScale(X, Y); this.Transform = _transform; this.ClipsToBounds = true; this.Layer.MasksToBounds = true; this.Layer.CornerRadius = 5; } } 

}

How to do it?

Answer 1

According to @SushiHangover's answer, we can make a ViewRenderer to achieve your effect.

First, create your own ProgressView , make sure it is inherited from ContentView . also add BindableProperty to represent the value:

 public partial class ProgressView : ContentView { public double Progress { set { SetValue(ProgressProperty, value); } get { return (double)GetValue(ProgressProperty); } } public readonly static BindableProperty ProgressProperty = BindableProperty.Create("Progress", typeof(double), typeof(ProgressView), 0.0); ... } 

Then we can make Custom renderer as:

 protected override void OnElementChanged(ElementChangedEventArgs<View> e) { base.OnElementChanged(e); //You can refer to @SushiHangover method for detail code, here I use the same name. Setup(); Complete = ((ProgressView)Element).Progress; } protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) { base.OnElementPropertyChanged(sender, e); if (e.PropertyName == "Progress") { Complete = ((ProgressView)Element).Progress; } } 

Since this is in the renderer, we need to update our label frame:

 public override void Draw(CGRect rect) { base.Draw(rect); ... label.Frame = Bounds; } 

Finally, we can use it in Forms, for example:

 <local:ProgressView x:Name="MyProgress" HeightRequest="50"/>