[Xamarin] BusyIndicator personalizado para Xamarin.Forms

BusyIndicator.xaml

Empezamos creando un ContentView que contenga un Frame con un ActivityIndicator. En caso queramos agregar un texto podriamos poner un StackLayout que contenga el ActivityIndicator y un Label. Ya queda a tu imaginación o a los requerimientos para mejorar esta vista básica.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="Blog.Epicalsoft.CustomControl.BusyIndicator">
	<Frame x:Name="Frame" Padding="0" BackgroundColor="#33000000" IsVisible="False">
	<ActivityIndicator x:Name="ActivityIndicator" Color="#01B9F5" IsRunning="True" IsVisible="True" VerticalOptions="Center" HorizontalOptions="Center" />
	</Frame>
	</ContentView>

view raw BusyIndicator.xaml hosted with ❤ by GitHub

BusyIndicator.xaml.cs

Creamos un BindableProperty para dar soporte a DataBinding. Aunque en el ejemplo que viene no lo uso, sería ideal establecerlo de esta forma por si en algún momento definimos algún ViewModel o su DataContext.

	using Xamarin.Forms;
	namespace Blog.Epicalsoft.CustomControl
	{
	public partial class BusyIndicator : ContentView
	{
	public BusyIndicator()
	{
	InitializeComponent();
	}
	public static readonly BindableProperty IsBusyProperty =
	BindableProperty.Create<BusyIndicator, bool>(p => p.IsBusy, default(bool), BindingMode.TwoWay, propertyChanged: IsBusyChanged);
	private static void IsBusyChanged(BindableObject bindable, bool oldValue, bool newValue)
	{
	((BusyIndicator)bindable).Frame.IsVisible = newValue;
	((BusyIndicator)bindable).ActivityIndicator.IsRunning = newValue;
	((BusyIndicator)bindable).ActivityIndicator.IsVisible = newValue;
	}
	public bool IsBusy
	{
	get { return (bool)GetValue(IsBusyProperty); }
	set { SetValue(IsBusyProperty, value); }
	}
	}
	}

view raw BusyIndicator.xaml.cs hosted with ❤ by GitHub

SplashPage.xaml

Hacemos referencia al namespace donde se encuentra nuestro BusyIndicator.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:controls="clr-namespace:Blog.Epicalsoft.CustomControl;assembly=Blog.Epicalsoft"
	x:Class="Blog.Epicalsoft.View.SplashPage">
	<Grid>
	<Image x:Name="BackgroundImage" Aspect="AspectFill" />
	<controls:BusyIndicator x:Name="BusyIndicator" />
	<!--<controls:BusyIndicator IsVisible="{Binding IsBusy}" IsBusy="{Binding IsBusy}" />-->
	</Grid>
	</ContentPage>

view raw SplashPage.xaml hosted with ❤ by GitHub

SplashPage.xaml.cs

Y ya esta listo para usar. No olviden que también se puede definir el valor de la propiedad IsBusy desde el XAML.

	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace Blog.Epicalsoft.View
	{
	public partial class SplashPage : ContentPage
	{
	public SplashPage()
	{
	InitializeComponent();
	BackgroundImage.Source = Device.OnPlatform(string.Empty, "reachsos.png", string.Empty);
	NavigationPage.SetHasNavigationBar(this, false);
	DoSomething();
	}
	private async void DoSomething()
	{
	try
	{
	BusyIndicator.IsBusy = BusyIndicator.IsVisible = true;
	await Task.Delay(9000);
	}
	finally
	{
	BusyIndicator.IsBusy = BusyIndicator.IsVisible = false;
	}
	}
	}
	}

view raw SplashPage.xaml.cs hosted with ❤ by GitHub