Forum Xamarin Xamarin.Forms

Custom Renderer setup to use control from Component store (RadialProgress)

Hi

Could someone offer me a bit of help?
I started using Xamarin today.

I've extended a ListView to have extra spacing etc, and appear how I wanted it.
That worked fine when I threw together a custom renderer.
Same for my CircularBox, which draws a number in the centre of it.

What I am trying to do now is take the RadialProgress control from the Component store, and get it to show up in a Forms project.

I thought all I would have to do would be create the class for it in the PCL (like so):

 public class RadialProgressValue : View
    {
        public static readonly BindableProperty MinimumProperty = BindableProperty.Create<RadialProgressValue, int>(p => p.Minimum, default(int));

        public int Minimum
        {
            get { return (int)GetValue(MinimumProperty); }
            set { SetValue(MinimumProperty, value); }
        }

        public static readonly BindableProperty MaximumProperty = BindableProperty.Create<RadialProgressValue, int>(p => p.Maximum, default(int));

        public int Maximum
        {
            get { return (int)GetValue(MaximumProperty); }
            set { SetValue(MaximumProperty, value); }
        }

        public static readonly BindableProperty FillColorProperty = BindableProperty.Create<RadialProgressValue, Color>(p => p.FillColor, default(Color));

        public Color FillColor
        {
            get { return (Color)GetValue(FillColorProperty); }
            set { SetValue(FillColorProperty, value); }
        }

    }

Then create a custom renderer for it in the Actual Android project like so:

[assembly: ExportRenderer(typeof(RadialProgressValue), typeof(RadialProgressRenderer))]

namespace Sandbox.Droid
{
    public class RadialProgressRenderer : ViewRenderer<RadialProgressValue, RadialProgressView>
    {
        RadialProgressView _radial;

        public RadialProgressRenderer()
        {
            _radial = new RadialProgressView(Forms.Context);
        }

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

            if (e.OldElement != null || this.Element == null)
                return;

            if (e.OldElement != null)
                e.OldElement.PropertyChanged -= HandlePropertyChanged;

            if (this.Element != null)
            {
                this.Element.PropertyChanged += HandlePropertyChanged;
            }


            var element = (RadialProgressValue)Element;
            _radial.MaxValue = element.Maximum;
            _radial.MinValue = element.Minimum;

          SetNativeControl(_radial);
        }

        private void HandlePropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == RadialProgressValue.MaximumProperty.PropertyName)
            {
                _radial.MaxValue = Element.Maximum;
            }
            else if (e.PropertyName == RadialProgressValue.MinimumProperty.PropertyName)
            {
                _radial.MinValue = Element.Minimum;
            }
        }
    }

However, all I get is a blank StackLayout in the Page.
Can't figure out why.

The component in question is: https://components.xamarin.com/view/radialprogress

Thanks!

Best Answer

Answers

  • DaveSekula.4301DaveSekula.4301 GBMember

    Yeah sure - no problem.
    Give me a few minutes to throw another project together with it in.

    Cheers

  • DaveSekula.4301DaveSekula.4301 GBMember

    Hmm - Well, I'm a fool.
    When I was rewriting the new project to upload for you, I instinctively set a WidthRequest, and HeightRequest on the instance of the custom control before attaching it to my StackLayout.

    In my original project I did not have that.

    This actually fixed my issue - Sorry, only been writing with Xamarin for one day (today) Lol.

    I've attached the sample project to show you exactly what I was doing in order to possibly help others who may be struggling with Custom Renderers.
    I stripped out the packages folder to reduce the size, and enabled nuget acquire on build. Just build it, then you may have to reopen.

    Cheers.
    Screen 1
    Screen 2
    Screen 3

  • JulienChateauJulienChateau FRMember ✭✭

    That's awesome! Precisely the heading I needed. And thanks a bunch @DaveSekula.4301 for sharing your files with the community. It really helped me understand how to put RadialProgress in a custom renderer.
    Cheers,

    Julien

  • My pleasure @JulienChateau
    Glad it was some use to you :)

  • JulienChateauJulienChateau FRMember ✭✭

    Hey @DaveSekula.4301 , would you please give me some heads up for implementing the Satellite Menu component in Forms? I tried and followed what you did with custom renderers on the Radial Progress, but I keep failing...

    Would you care helping, here or on this thread, that would be really helpful.

    Kind regards,
    Julien

  • @DaveSekula.4301 Did you had any problems with setting the radial progress in center of your view? mine align to the left, and i can't get it centered. even if i use it in a grid in the middle column

  • LijoCJLijoCJ USMember ✭✭

    @DaveSekula.4301 Do you have an iOS renderer?

Sign In or Register to comment.