在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{受保护的重写void OnElementChanged(ElementChangedEventArgs< ProgressBar> e){尝试{base.OnElementChanged(e);如果(Control！= null){Control.ProgressTintColor = Color.FromHex(#ff0000").ToUIColor();Control.TrackTintColor = Color.FromHex(#3489cc").ToUIColor();}}抓住(前例外){}}公共重写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;}} 

}

我如何做到这一点?

解决方案

根据@SushiHangover的回答，我们可以制作一个 ViewRenderer 来达到您的效果.

首先，创建我们自己的 ProgressView ，确保它是从 ContentView 继承的.还添加 BindableProperty 来显示值:

 公共局部类ProgressView:ContentView{公众双重进步{设置{SetValue(ProgressProperty，value);}get {return(double)GetValue(ProgressProperty);}}公共只读静态BindableProperty ProgressProperty = BindableProperty.Create("Progress"，typeof(double)，typeof(ProgressView)，0.0);...} 

然后，我们可以将Custom渲染器制作如下:

 受保护的重写void OnElementChanged(ElementChangedEventArgs< View> e){base.OnElementChanged(e);//您可以参考@SushiHangover的方法以获取详细的代码，这里我使用相同的名称.设置();完成=(((ProgressView))元素).Progress;}受保护的重写void OnElementPropertyChanged(对象发送者，PropertyChangedEventArgs e){base.OnElementPropertyChanged(sender，e);如果(e.PropertyName ==进度"){完成=(((ProgressView))元素).Progress;}} 

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

 公共替代无效Draw(CGRect rect){base.Draw(rect);...label.Frame =界限；} 

最后，我们可以在类似以下的窗体上使用它:

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

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屋！