UI for Xamarin Ships Extensible API for Easy Access to Platform-Specific Features

The Xamarin.Forms technology does an excellent job at enabling .NET developers to build native mobile apps for iOS, Android and Windows Phone from a single C# codebase. However, some of the platform-specific features which can considerably enhance your app remain hard to access. The latest update of Telerik UI for Xamarin removes this friction. We have extended the API of our Xamarin.Forms controls to allow you to effortlessly access our Xamarin.iOS and Xamarin.Android wrappers types and take advantage of the platform-specific features.

Let's take the Telerik Chart for iOS that lies beneath the iOS part of the Xamarin Forms Chart implementation. Animations, based on Core Animation and UIKit Dynamics, come out of the box there, and you can animate a line chart by setting a single property: AllowAnimations. Since this functionality is only available in the iOS Chart, the property is not exposed at the Xamarin Forms implementation. Assuming that we already have a Xamarin Forms application using the Chart, here is what you can do in order to turn on the Chart animations:

Turning on the Default Animations

1. Create a custom renderer deriving from Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer. 
2. Override the UpdateNativeWidget method in order to obtain a reference to the TKChart object and configure it accordingly, setting the AllowAnimations property of the obtained reference to true.
   public class LineWithAnimationRenderer : Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer

   {

       public LineWithAnimationRenderer()

       {

       }

    

       protected override void UpdateNativeWidget()

       {

           base.UpdateNativeWidget();

           this.Control.AllowAnimations = true;

       }

   }

Creating Custom Animations

The code above is enough to turn on the default iOS Chart animations. However, you may want to create a custom animation, and here is what you can do in this case: 

1. Create a custom chart delegate, inheriting from CartesianChartDelegate, which in turn inherits from TelerikUI.TKChartDelegate.
   public class LineWithAnimationDelegate : Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartDelegate

   {

       public LineWithAnimationDelegate()

       {

       }

    

       public override CAAnimation AnimationForSeries(TKChart chart, TKChartSeries series, TKChartSeriesRenderState state, CGRect rect)

       {

           double duration = 1;

           List<CAAnimation> animations = new List<CAAnimation>();

    

           for (int i = 0; i < (int)state.Points.Count; i++)

           {

               string keyPath = string.Format("seriesRenderStates.{0}.points.{1}.y", series.Index, i);

               TKChartVisualPoint point = (TKChartVisualPoint)state.Points.ObjectAtIndex((uint)i);

               double oldY = rect.Height;

               double half = oldY + (point.Y - oldY) / 2.0;

               CAKeyFrameAnimation a = (CAKeyFrameAnimation)CAKeyFrameAnimation.GetFromKeyPath(keyPath);

               a.KeyTimes = new NSNumber[] { new NSNumber(0), new NSNumber(0), new NSNumber(1) };

               a.Values = new NSObject[] { new NSNumber(oldY), new NSNumber(half), new NSNumber(point.Y) };

               a.Duration = duration;

               a.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseOut);

               animations.Add(a);

           }

    

           CAAnimationGroup group = new CAAnimationGroup();

    

           group.Duration = duration;

           group.Animations = animations.ToArray();

    

           return group;

       }

   }
2. Оverride the CreateChartDelegate method in our LineWithAnimationRenderer class. This will allow you to use the custom delegate:
   protected override Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartDelegate CreateChartDelegateOverride()

   {

       return new LineWithAnimationDelegate();

   }
3. Finally, register this custom renderer:
   [assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(ChartAnimations.iOS.LineWithAnimationRenderer))]

The result looks like what's shown below. Nice, isn't it?



For more information about the animations API of the Telerik Chart for iOS, you can take a look at the respective documentation article in the Telerik Xamarin.iOS wrappers documentation.

As to the rest of the enhancements included in the new UI for Xamarin release, please refer to UI for Xamarin 2015.1.423.141 Release Notes.

If you are new to the Xamarin concept and UI for Xamarin, check this page to understand how the Xamarin Platform works and [download the UI for Xamarin Trial package now].