在Xamarin.Forms中自定义进度条外观

Question

我使用 Drawable 来自定义在 Android 中渲染 ProgressBar，如回答这个问题，但该解决方案在 iOS 上无法正常工作。

以下是它在 Android 中的渲染方式。

以下是它在 iOS 中的渲染方式。

以下是我的 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;
    }
}

}

我该如何完成这个任务？

- Libin TK

---

你所提到的问题说：> 我能够使用自定义渲染器在iOS上完成它。 - Muhammad Khan

@MuhammadKhan 是的，我按照问题中提到的代码进行了操作，但输出结果不符合预期。让我添加一张来自 iOS 的截图。 - Libin TK

@MuhammadKhan，请查看编辑。 - Libin TK

你是否使用了与你所参考的问题中完全相同的代码？看起来边角被平滑处理过，而不是将'corner radius'设置为5。你还必须设置边框厚度/画笔并改变其颜色。 - Muhammad Khan

嗨@LibinTK，你解决了你的问题吗？ - Ax1le

Answer 1

根据 @SushiHangover 的回答，我们可以创建一个 ViewRenderer 来实现你的效果。

首先，创建我们自己的 ProgressView，确保它继承自 ContentView。同时添加一个 BindableProperty 以表示该值：

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);

    ...
}

然后，我们可以编写自定义渲染器：

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;
    }
}

因为这是在渲染器中，所以我们应该刷新标签的框架：

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

最后，我们可以在表单中使用它，例如：

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

- Ax1le

---

我为您制作了一个示例，参考链接：https://github.com/lt0526/ProgressViewRendererDemo。 - Ax1le