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