在 Xamarin.Forms 中自定义进度条外观 [英] Customizing a Progress Bar appearance in Xamarin.Forms

问题描述

我使用 Drawable 来自定义 Android 中 ProgressBar 的呈现，正如

以下是它在 iOS 中的呈现方式

下面是我的 iOS CustomRenderer

的代码

[程序集:ExportRenderer(typeof(CustomProgressbar), typeof(CustomProgressBarRenderer))]命名空间 Demo.iOS.Renderers{公共类 CustomProgressBarRenderer : ProgressBarRenderer{protected override void OnElementChanged(ElementChangedEventArgs e){尝试{base.OnElementChanged(e);如果(控制！= null){Control.ProgressTintColor = Color.FromHex("#ff0000").ToUIColor();Control.TrackTintColor = Color.FromHex("#3489cc").ToUIColor();}}捕获(异常前){}}公共覆盖无效 LayoutSubviews(){base.LayoutSubviews();无功 X = 1.0f;无功Y = 15.0f；CGAffineTransform _transform = CGAffineTransform.MakeScale(X, Y);this.Transform = _transform;this.ClipsToBounds = true;this.Layer.MasksToBounds = true;this.Layer.CornerRadius = 5;}}

}

我该如何实现?

解决方案

根据@SushiHangover的回答，我们可以制作一个ViewRenderer来实现你的效果.

首先，创建我们自己的ProgressView，确保它继承自ContentView.还添加一个 BindableProperty 来呈现值:

公共部分类 ProgressView : ContentView{公双进{set { SetValue(ProgressProperty, value);}得到{返回(双)GetValue(ProgressProperty)；}}public readonly static BindableProperty ProgressProperty = BindableProperty.Create("Progress", typeof(double), typeof(ProgressView), 0.0);...}

然后，我们可以像这样制作自定义渲染器:

protected override void OnElementChanged(ElementChangedEventArgs e){base.OnElementChanged(e);//详细代码可以参考@SushiHangover的方法，这里我使用同名.设置();完成 = ((ProgressView)Element).Progress;}protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e){base.OnElementPropertyChanged(sender, e);if (e.PropertyName == "Progress"){完成 = ((ProgressView)Element).Progress;}}

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

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

最后我们可以在表单上使用它，例如:

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.

Below is how it renders 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 do I accomplish this?

解决方案

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"/>

这篇关于在 Xamarin.Forms 中自定义进度条外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！