ExtWebView

My custom WebView. It has a HTML string property. This was very useful to draw my chart :) a simple HTML file with some embedded Javascript to draw the shapes. It was the faster way for me to make a cross pie chart control. When the HTML property has changed, the source of the WebView gets updated.

//
// <copyright file=ExtWebView.cs company=Krossapp>
//     Copyright (c) Krossapp. All rights reserved.
// </copyright>
// <author>Nicolas Krier</author>
//
namespace SDF.XForm.Controls
{
    #region Using

    using System.Diagnostics.CodeAnalysis;
    using System.Windows.Input;
    using Xamarin.Forms;

    #endregion

    /// <summary>
    /// Web view.
    /// </summary>
    public class ExtWebView : WebView
    {
        #region Bindable property

        /// <summary>
        /// The html property.
        /// </summary>
        [SuppressMessage(StyleCop.CSharp.MaintainabilityRules, SA1401:FieldsMustBePrivate, Justification = Reviewed.)]
        public static BindableProperty HtmlProperty = BindableProperty.Create<ExtWebView, string>(x => x.Html, null, BindingMode.OneWay, propertyChanged: WhenHtmlChanged);

        /// <summary>
        /// The command clicked property.
        /// </summary>
        [SuppressMessage(StyleCop.CSharp.MaintainabilityRules, SA1401:FieldsMustBePrivate, Justification = Reviewed.)]
        public static BindableProperty Command = BindableProperty.Create<ExtWebView, ICommand>(x => x.CommandClicked, null);

        #endregion

        #region Constructor

        /// <summary>
        /// Initializes a new instance of the <see cref=ExtWebView/> class.
        /// </summary>
        public ExtWebView()
            : base()
        {
            this.HandleTapEvent();
        }

        #endregion

        #region Property

        /// <summary>
        /// Gets or sets the html.
        /// </summary>
        /// <value>The html.</value>
        public string Html
        {
            get { return (string)this.GetValue(HtmlProperty); }
            set { this.SetValue(HtmlProperty, value); }
        }

        /// <summary>
        /// Gets or sets the command clicked.
        /// </summary>
        /// <value>The command clicked.</value>
        public ICommand CommandClicked
        {
            get { return (ICommand)this.GetValue(Command); }
            set { this.SetValue(Command, value); }
        }

        #endregion

        /// <summary>
        /// Raises the html changed event.
        /// </summary>
        /// <param name=sender>The sender.</param>
        /// <param name=oldValue>Old value.</param>
        /// <param name=newValue>New value.</param>
        private static void WhenHtmlChanged(BindableObject sender, string oldValue, string newValue)
        {
            WebView ctrl = (WebView)sender;
            ctrl.Source = new HtmlWebViewSource() { Html = newValue };
        }

        /// <summary>
        /// Handle the tap event : the click.
        /// </summary>
        private void HandleTapEvent()
        {
            /*
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += (sender, args) =>
            {
                if (args != null && this.CommandClicked != null && this.CommandClicked.CanExecute(args))
                {
                    this.CommandClicked.Execute(args);
                }
            };
            this.GestureRecognizers.Add(tapGestureRecognizer);
            */
        }
    }
}


ExtProgressBar

This control needs a custom renderer to use the ProgressColor. A custom renderer gives you the possibility to animate the progress bar on iOS when its progress value changes.

//
// <copyright file=ExtProgressBar.cs company=Krossapp>
//     Copyright (c) Krossapp. All rights reserved.
// </copyright>
// <author>Nicolas Krier</author>
//
namespace SDF.XForm.Controls
{
    #region Using

    using System.Diagnostics.CodeAnalysis;
    using Xamarin.Forms;

    #endregion

    /// <summary>
    /// Progress bar.
    /// </summary>
    public class ExtProgressBar : ProgressBar
    {
        #region Bindable property

        /// <summary>
        /// The progress color property.
        /// </summary>
        [SuppressMessage(StyleCop.CSharp.MaintainabilityRules, SA1401:FieldsMustBePrivate, Justification = Reviewed.)]
        public static BindableProperty ProgressColorProperty = BindableProperty.Create<ExtProgressBar, Color>(x => x.ProgressColor, Color.Blue);

        #endregion

        #region Constructor

        /// <summary>
        /// Initializes a new instance of the <see cref=ExtProgressBar/> class.
        /// </summary>
        public ExtProgressBar()
            : base()
        {
        }

        #endregion

        #region Property

        /// <summary>
        /// Gets or sets the color of the progress.
        /// </summary>
        /// <value>The color of the progress.</value>
        public Color ProgressColor
        {
            get { return (Color)this.GetValue(ProgressColorProperty); }
            set { this.SetValue(ProgressColorProperty, value); }
        }

        #endregion
    }
}


HomePage – A first shot

Animations

Warning, your eyes might bleed while watching to the result of my design skills… The color are very sad. I still have not made my decisions about the color. So I keep it in the mockup style design by default.

Before I write more about what I discover after playing with animations that are in the box. Here is a GIF that will show you my progress. I still can enhance it later. That’s not beautiful but hey :) it’s that ugly too!

I know how a GIF can be annoying while reading. I apologize for that too ^_^

 

The Animation HomePage GIF.

The Animation HomePage GIF.

Show me some code!

Bonus: some screen shot of my code: (it’s faster to post some screenshot because I don’t have a code editor inside my blog yet).
At the moment I tool those screenshots, I didn’t have anything more than a command in my view model. The animation can’t be started until we bind a command to the control. That’s why the MenuUserPanelView command is binded to the CmdOpenPage.

When I work on a project on my spare time, I like to name my command CmdXXX. Because I like to have all my command grouped in the Intellisense while I code. The same kind of argument of those who name their private field with an underscore like _myVar. I was this kind of developper until I started using StyleCop which doesn’t like that and force me to use the “this” keyboard anytime I can. this._myVar isn’t the sexiest code I’ve so far. My eyes feel more confortable with a this.myVar. Real developers can argue about coding conventions for hours :P

The XAML of the HomePage.

The XAML of the HomePage.

 

C# code of an animation with Xamarin Forms.

C# code of an animation with Xamarin Forms.

 

I tested those animations on real devices. I have a Galaxy Note I (still working very good) and an iPod Touch 5 (a second hand product). On the Galaxy Note, the animations are lagging a bit. It’s rendering much better on iOS. And it’s an iPod Touch 5 (based on hardware, it’s the equivalent of the iPhone 4S). I did notice that depends on the order of the animation. If you combine more than 2 different animation at the same time, it will impact the user experience in a very bad way on Android. This advice is for animation of panels of controls like a stack of button, textbox etc. If you only animate a icon or a single component, you can try 3 animations at the same time. I can only advise you to experiment.

I didn’t make a lot of research on how Xamarin renders those animations. The FPS make me think that for Android, it’s rendered with CPU while GPU is used for iOS.