[Solved] TKRadialGauge Embed in Xamarin Forms

[Brian]

Is it possible to embed the TKRadialGauge into Xamarin forms? I see several examples on getting native controls into Xamarin forms, I just can't seem to figure out the namespace and other details for XAML and Binding. 

 

Any help is appreciated. 

 

[Lance | Senior Manager Technical Support]

Hi Brian,

The TKRadialGauge has been discontinued. The TKRadialGauge remains in the native assemblies for backwards support, new development with it is not recommended and we've not officially supported or tested XF embedding.

For a radial gauge control, see the UI for Xamarin's RadRadialGauge, this has superseded the discontinued TKRadialGauge control.

We've redeveloped the new Gauge from the ground up, you can achieve a similar appearance and positioning of the TKRadialGauge using the RadRadialGuage. For example, see RadialGauge Positioning. I highly recommend taking a look at all the examples of the Gauge control in the SDKExamples browser and QSF demo applications.

Ultimately, if you would like to move forward with TKRadialGauge, there is no XAML as this is purely a Xamarin.iOS control. You'll need to define it with in #if __IOS__  statements and instantiate it in code, then add to your Xamarin.Forms views using Xamarin's ToView() method. For example:

var view = radialGauge.ToView();
view.HeightRequest = 200;
view.WidthRequest = 200;
view.VerticalOptions = LayoutOptions.Start;

this.LayoutRoot.Children.Add(view);

Here's a complete example of embedding the TKRadialGauge in Xamarin.Forms:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TKRadialGaugeEmbed"
             x:Class="TKRadialGaugeEmbed.MainPage">

    <Grid x:Name="LayoutRoot"/>

</ContentPage>

MainPage.xaml.cs

using System;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
#if __IOS__
using TelerikUI;
#endif

namespace TKRadialGaugeEmbed
{
    public partial class MainPage : ContentPage
    {
        private TKRadialGauge radialGauge;

        public MainPage()
        {
            InitializeComponent();

#if __IOS__
            CreateRadialGauge();
#endif
        }

#if __IOS__
        void CreateRadialGauge()
        {
            radialGauge = new TKRadialGauge();
            this.radialGauge.Delegate = new GaugeDelegate();

            TKGaugeRadialScale scale = new TKGaugeRadialScale(new NSNumber(0), new NSNumber(6));
            this.radialGauge.AddScale(scale);

            scale.AddIndicator(new TKGaugeNeedle(2.3f, 0.6f));

            var colors = new UIColor[] {
                new UIColor (0.871f, 0.871f, 0.871f, 1.00f),
                new UIColor (0.533f, 0.796f, 0.290f, 1.00f),
                new UIColor (1.000f, 0.773f, 0.247f, 1.00f),
                new UIColor (1.000f, 0.467f, 0.161f, 1.00f),
                new UIColor (0.769f, 0.000f, 0.043f, 1.00f)
            };

            nfloat max = ((NSNumber)scale.Range.Maximum).FloatValue;
            nfloat rangeWidth = max / colors.Length;
            nfloat start = 0;

            foreach (UIColor color in colors)
            {
                TKGaugeSegment segment = new TKGaugeSegment(new NSNumber(start), new NSNumber(start + rangeWidth));
                segment.Fill = new TKSolidFill(color);
                scale.AddSegment(segment);
                start += rangeWidth;
            }

            var view = radialGauge.ToView();
            view.HeightRequest = 200;
            view.WidthRequest = 200;
            view.VerticalOptions = LayoutOptions.Start;

            // Layout Root is just a <Grid/>
            this.LayoutRoot.Children.Add(view);
        }

        class GaugeDelegate : TKGaugeDelegate
        {
            public override string Text(TKGauge gauge, NSObject label)
            {
                if (gauge.IsKindOfClass(new ObjCRuntime.Class(typeof(TKRadialGauge))))
                {
                    return string.Format("{0} bar", ((NSNumber)label).NIntValue);
                }
                else
                {
                    return string.Format("{0} degrees", ((NSNumber)label).NIntValue);
                }
            }
        }
#endif

    }
}

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik