10

I used Drawable to customize the rendering of the ProgressBar in Android as answered to this question but the solution is not working with iOS.

Below is how it renders in Android. enter image description here

Below is how it renders in iOS enter image description here

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 do I accomplish this?

Libin TK
  • 1,477
  • 2
  • 25
  • 46
  • Xamarin.Forms is cross-platform, what works in Android should also work in iOS. What have you tried so far, and what errors have you come across? – Muhammad Khan Feb 09 '18 at 10:31
  • The question you referenced said: > I was able to do it in iOS using a custom renderer – Muhammad Khan Feb 09 '18 at 10:33
  • @MuhammadKhan yes, I followed the code mentioned in the question but it doesn't match the output. Let me add a screenshot from `iOS`. – Libin TK Feb 09 '18 at 10:34
  • @MuhammadKhan please see the edits – Libin TK Feb 09 '18 at 10:41
  • Are you using the **exact same code** as in the question you referenced? It looks like the sides have been smoothed rather than the `corner radius` set to 5. You will also have to set a border thickness/brush and change its colour too. – Muhammad Khan Feb 09 '18 at 10:43
  • @MuhammadKhan I have added my `iOS` code. Could you please see it advise how to make changes? – Libin TK Feb 09 '18 at 10:58
  • https://stackoverflow.com/questions/48616422/how-to-create-a-progress-bar-with-rounded-corners-in-ios-using-xamarin-forms – SushiHangover Feb 09 '18 at 13:30
  • @SushiHangover I'm still not able to figure out how to apply that in the custom renderer for the `ProgressBar`. Any input from you is highly appreciated. – Libin TK Feb 09 '18 at 13:44
  • 1
    Hi @LibinTK, have you solved your issue? – Ax1le Feb 19 '18 at 01:30
  • @LandLu-MSFT yes, thank you so much – Libin TK Feb 21 '18 at 17:05

1 Answers1

8

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

Firstly, create our own ProgressView, make sure it is inherited from ContentView. also add a BindableProperty to present 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 the Custom renderer like:

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

    //You can refer to @SushiHangover's method for detail's 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;
    }
}

Because this is in renderer, we should refresh our label's frame:

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

At last we can use it on Forms like:

<local:ProgressView x:Name="MyProgress" HeightRequest="50"/>
Ax1le
  • 6,563
  • 2
  • 14
  • 61
  • 1
    I make a sample for you referring to: [https://github.com/lt0526/ProgressViewRendererDemo](https://github.com/lt0526/ProgressViewRendererDemo) – Ax1le Feb 12 '18 at 09:14