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?

Telerik Xamarin Chart Animations

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].
About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts

Comments

Comments are disabled in preview mode.