Xamarin Forms Pulse View

I hope you are all well and enjoy my article.

 

Today I am going to show you how to create Pulse View in Xamarin.Forms with Custom Control + SkiaSharp.

 

 

Let's get started,

 

First, we are going to create a demo project and give it whatever name you want. Then we will create a new folder and give it the name Controls for creating the Pulse Control.

 

Implementation

 

First, we will create a Xaman forms project in a Windows machine.

 

 

Open VS2019 >> select file >> Create Project >> and then one dialog window appears.

 

 

This is the new project dialogue window and here,

1. We can select the cross-platform 
2. Select Mobile App(Xamarin forms) 
3. After that, I give the project name like Pulse 
4. Then we choose the folder path 
5. Click OK.

 

This is another window in which,

1. I choose the blank app 
2. Select the project (Android, iOS) in which I want to create 
3. Select the Code Sharing Strategy .NET Standard 
4. Click OK and create the project.

Here we check whether the Xamarin forms Nuget Package is updated or not. If not we will update it.  Following are the steps for updating the package.

 

 

First, we select the solution and right-click on the solution and then select the Nuget package as shown in the below screen.

 

 

Now a new window (Nuget - Solution) appears. This window contains information about the packages used in this project. Here we can select the update tab. All the packages are listed here.

 

Here we can update Xamarin forms package.

 

With this control, we need to add the following package in xamarin.forms.

• SkiaSharp.Views(Version 1.68.1.1)
• SkiaSharp.Views.Forms(Version 1.68.1.1)

 

Now we are creating a new class and I gave the name Pulse.cs and below I have written the code of pulse effect.

 

In this class, we add the following properties using  SKCanvasView class.

1. AutoStart= when the view appears it is autostarted the effect
2. PulseColor= with PulseColor we set the Color effect
3. Source= we can set the image
4. Speed= we can manage the effect speed

Pulse.cs

using SkiaSharp;
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Text;
using Xamarin.Forms;
namespace PrismSample.Controls {
    public class Pulse: SKCanvasView {
        public static readonly BindableProperty PulseColorProperty = BindableProperty.Create(nameof(PulseColor), typeof(Color), typeof(Pulse), Color.Red, propertyChanged: OnPropertyChanged);
        public static readonly BindableProperty AutoStartProperty = BindableProperty.Create(nameof(AutoStart), typeof(bool), typeof(Pulse), false, propertyChanged: OnPropertyChanged);
        public static readonly BindableProperty SourceProperty = BindableProperty.Create(nameof(Source), typeof(string), typeof(Pulse), "", propertyChanged: OnPropertyChanged);
        public static readonly BindableProperty SpeedProperty = BindableProperty.Create(nameof(Speed), typeof(int), typeof(Pulse), 10, propertyChanged: OnPropertyChanged);
        public Color PulseColor {
            get {
                return (Color) GetValue(PulseColorProperty);
            }
            set {
                SetValue(PulseColorProperty, value);
            }
        }
        public bool AutoStart {
            get {
                return (bool) GetValue(AutoStartProperty);
            }
            set {
                SetValue(AutoStartProperty, value);
            }
        }
        public string Source {
            get {
                return (string) GetValue(SourceProperty);
            }
            set {
                SetValue(SourceProperty, value);
            }
        }
        public int Speed {
            get {
                return (int) GetValue(SpeedProperty);
            }
            set {
                SetValue(SpeedProperty, value);
                cycleTime *= value;
            }
        }
        SKBitmap resourceBitmap;
        double cycleTime = 30000; // in milliseconds
        Stopwatch stopwatch = new Stopwatch();
        public bool IsRun;
        float[] t = new float[3];
        SKPaint paint = new SKPaint {
            Style = SKPaintStyle.Stroke
        };
        private static void OnPropertyChanged(BindableObject bindable, object oldVal, object newVal) {
            var pulse = bindable as Pulse;
            pulse?.InvalidateSurface();
        }
        public Pulse() {
            cycleTime /= Speed;
        }
        protected override void OnPropertyChanged([CallerMemberName] string propertyName = null) {
            base.OnPropertyChanged(propertyName);
            if (propertyName == nameof(Speed)) {
                cycleTime /= Speed;
            }
            if (propertyName == nameof(AutoStart)) {
                if (AutoStart) start();
            }
            if (propertyName == nameof(Source)) {
                string resourceID = Source;
                Assembly assembly = GetType().GetTypeInfo().Assembly;
                using(Stream stream = assembly.GetManifestResourceStream(resourceID)) {
                    if (stream != null) resourceBitmap = SKBitmap.Decode(stream);
                }
                resourceBitmap = resourceBitmap?.Resize(new SKImageInfo(90, 90), SKFilterQuality.Medium);
            }
        }
        public void start() {
            IsRun = true;
            stopwatch.Start();
            Xamarin.Forms.Device.StartTimer(TimeSpan.FromMilliseconds(33), () => {
                t[0] = (float)(stopwatch.Elapsed.TotalMilliseconds % cycleTime / cycleTime);
                if (stopwatch.Elapsed.TotalMilliseconds > cycleTime / 3) t[1] = (float)((stopwatch.Elapsed.TotalMilliseconds - cycleTime / 3) % cycleTime / cycleTime);
                if (stopwatch.Elapsed.TotalMilliseconds > cycleTime * 2 / 3) t[2] = (float)((stopwatch.Elapsed.TotalMilliseconds - cycleTime * 2 / 3) % cycleTime / cycleTime);
                this.InvalidateSurface();
                if (!IsRun) {
                    stopwatch.Stop();
                    stopwatch.Reset();
                }
                return IsRun;
            });
        }
        protected override void OnPaintSurface(SKPaintSurfaceEventArgs args) {
            base.OnPaintSurface(args);
            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;
            byte R = (byte)(PulseColor.R * 255);
            byte G = (byte)(PulseColor.G * 255);
            byte B = (byte)(PulseColor.B * 255);
            canvas.Clear();
            if (IsRun) {
                SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
                float baseRadius = Math.Min(info.Width, info.Height) / 12;
                float radius = 0;
                Console.WriteLine(radius);
                for (int i = 0; i < t.Length; i++) {
                    radius = info.Width / 2 * (t[i]);
                    paint.Color = new SKColor(R, G, B, (byte)(255 * (1 - t[i])));
                    paint.Style = SKPaintStyle.Fill;
                    canvas.DrawCircle(center.X, center.Y, radius, paint);
                }
                paint.Color = new SKColor(R, G, B);
                canvas.DrawCircle(center.X, center.Y, 100, paint);
                if (resourceBitmap != null) canvas.DrawBitmap(resourceBitmap, center.X - resourceBitmap.Width / 2, center.Y - resourceBitmap.Height / 2);
            }
        }
    }
}

Now we can add pulse control in MainPage.xmal.

 

MainPage.xmal

<Grid>
   <SkiaPulse:Pulse
      Margin="0"
      AutoStart="true"
      PulseColor="SkyBlue"
      Source="PrismSample.Images.bluetooth.png"
      Speed="10" />
</Grid>

That’s it, now our Pulse effect is ready is ready to use. Happy Coding