TKRadialGauge Embed in Xamarin Forms

2 posts, 0 answers
  1. Brian
    Brian avatar
    3 posts
    Member since:
    Dec 2013

    Posted 08 Oct 2018 Link to this post

    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. 

     

  2. Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    974 posts

    Posted 08 Oct 2018 Link to this post

    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" ?>
                 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top