Sharpnado.HorusSkeleton.Maui && Xamarin.Forms.Skeleton

The latest trend for loading approaches in MAUI and Xamarin Forms apps. Skeleton can be easily implemented on each view contained in your Xaml.

Sample

Setup

Available on NuGet: Sharpnado.HorusSkeleton.Maui
Available on NuGet: Xamarin.Forms.Skeleton
Install into your Core and Client projects.

Platform Support

Platform	Version
Xamarin.iOS	iOS 8+
Xamarin.Android	API 16+
Xamarin.Forms	>= 4.0.0.425677
.net6 MAUI	ALL

API Usage

You must add this namespace to your xaml files:

xmlns:sk="clr-namespace:Xamarin.Forms.Skeleton;assembly=Xamarin.Forms.Skeleton"

Add the following properties to generate a loading animation:

<ListView RowHeight="90"
	SeparatorVisibility="None"
	SelectionMode="None"
	VerticalOptions="FillAndExpand"
	BackgroundColor="Transparent"
	ItemTemplate="{StaticResource ItemTemplate}"
	ItemsSource="{Binding Items}"
	sk:Skeleton.IsParent="True"
	sk:Skeleton.IsBusy="{Binding IsBusy}"
	sk:Skeleton.Animation="{sk:DefaultAnimation Fade}" />

Add the following properties to set a loading animation with a specific background color:

<Frame BackgroundColor="Transparent"
       HasShadow="False"
       CornerRadius="5"
       Padding="0"
       HorizontalOptions="Start"
       sk:Skeleton.IsBusy="{Binding IsBusy}"
       sk:Skeleton.BackgroundColor="#c6c6c5">
			<Label Text="{Binding Title}"
					TextColor="#000000"
					FontSize="20"
					FontAttributes="Bold"
					HorizontalOptions="Start"/>
</Frame>

Properties

IsParent (Boolean)

Indicates if it is a parent control which has skeleton children controls.
The default value is false.

IsBusy (Boolean)

Indicates if the control is busy in a loading state.
The default value is false.

BackgroundColor (Color)

Control background color when is busy.
The default value is the xamarin forms default color.

Hide (Boolean)

Indicates if the control is hide when is busy.
The default value is false.

Animation (BaseAnimation)

Control animation when is busy.
Possible values: None, Fade, Beat, HorizontalShake, VerticalShake and custom animation inheriting from BaseAnimation.
The default value is None.

AnimationInterval (Int)

Animation interval when is busy.
Value in milliseconds.
The default value is 500.

AnimationParameter (Double?)

Animation parameter to modify the animation.
The default value is null.

Animations

Skeleton Animation

Beat Animation

Fade Animation

Vertical Shake Animation

Horizontal Shake Animation

Custom Animation

Demo

Warning: The sample app hasn't been ported to maui. If you want to see and example of skeleton implementation, checkout retronado.maui: https://github.com/roubachof/Sharpnado.TaskLoaderView

Else, for xamarin.forms: https://github.com/HorusSoftwareUY/Xamarin.Forms.Skeleton/tree/master/SkeletonExample

Roadmap

Automatic ItemsSource population (fake data) for skeleton preview in: ListView, CollectionView, Repeater, BindableLayout, etc.

Developed by

Contributions

Contributions are welcome! If you find a bug want a feature added please report it.

If you want to contribute code please file an issue, create a branch, and file a pull request.

License

MIT License - see LICENSE.txt

roubachof / Maui.Skeleton