Quickstart

eliteKit is a SkiaSharp based library that enables you as a developer to quickly add responsive and pixel-perfect controls to new/existing Xamarin based applications.

Prerequisites

Before proceeding we recommend you to install the latest version of Visual Studio and Xamarin.Forms.

Installation

Select your .NetStandard project and install eliteKit NuGet package as shown below.




That's it!, no native initialization required.

Experimental Features


Warning

If you chose to use experimental controls you have a high probability to have unexpected behaviors within your application like app crashing for no reason, so be aware.


eliteKit contains some Experimental components that heavily relies on platform specific code : eliteAudio and eliteVideo. If you want to try these please install eliteKit NuGet package into your iOS and Android proyects as well and call Abstractions.Init() on each before calling LoadApplication() as shown below. If NOT, please avoid installing this package in your native projects.


What's Next?

start exploring eliteKit.eliteElements namespace within your project. Please check the docs to see how to use and customize each control depending on your needs. Happy coding!

eliteBadge

eliteBadge lets you add a little badge on the top of another View.


Properties

BadgeWidth Width for presented badge. Default is 25.
BadgeHeight Height for presented badge. Default is 25.
BadgeRadius Radius for presented badge. Default is 25.
BadgeContent Badge text content.
BadgeDirection Sets the position of the presented badge. Available values are: Top, TopLeft, TopRight ,Right, Left, Bottom, BottomLeft, BottomRight.
FontSize Sets the font size used to paint badge text. This value is automatically scaled based on the device screen density. Default is 10.
Content Sets the presented badge main content View.

Sample (XAML)

eliteButton

eliteButton lets you use buttons with gradients and optional shadow effects.


Properties

HasShadow Stablishes if button will have a shadow when presented. Default is True.
ButtonTitle Button text content
BadgeRadius Radius for presented button. Default is 25.
IsGradient Stablishes if button background collor will be presented using a 2 color gradient. Default is True
ColorText Sets the button text color.Default is white
ColorPrimary If "IsGradient" is set to true, this property stablishes the first gradient color to use for the button background.Default is #548EC1
ColorSecondary If "IsGradient" is set to true, this property stablishes the second gradient color to use for the button background.Default is #254867
FontSize Sets the font size used to paint badge text. This value is automatically scaled based on the device screen density. Default is 10.
FontFamily Sets the font family to be used to paint the the button's text. If specified font is not found, it will use device's default.
TextAlign Sets the presented badge main content View.Default is center

Events

Sample (Xaml)

eliteButtonOutline

eliteButtonOutline lets you use buttons without a solid color background.


Properties

HasShadow Stablishes if button will have a shadow when presented. Default is True.
ButtonTitle Button text content
BadgeRadius Radius for presented button. Default is 25.
IsGradient Stablishes if button background collor will be presented using a 2 color gradient. Default is True
ColorText Sets the button text color.Default is white
ColorPrimary If "IsGradient" is set to true, this property stablishes the first gradient color to use for the button background.Default is #548EC1
ColorSecondary If "IsGradient" is set to true, this property stablishes the second gradient color to use for the button background.Default is #254867
FontSize Sets the font size used to paint badge text. This value is automatically scaled based on the device screen density. Default is 10.
FontFamily Sets the font family to be used to paint the the button's text. If specified font is not found, it will use device's default.
TextAlign Sets the presented badge main content View.Default is center

Events

Sample (Xaml)

eliteCheckbox

eliteCheckbox provides a simple checkbox with customizable colors.


Properties

HasShadow Stablishes if button will have a shadow when presented. Default is True.
IsChecked If true, control will display "X" mark. Default is false
ColorIcon Color to be used when drawing checked mark. Default is white
ColorUnchecked Background color to be used when IsChecked property is false. Default is #548EC1
ColorChecked Background color to be used when IsChecked property is true.Default is #254867
ColorHighlighted Background color to be used when control is pressed and hold. Default is #3674A3

Events

Sample (Xaml)

eliteColorPicker

eliteColorPicker provides a simple HSLA color picker.


Properties

MarkerColor Stablishes the little selection circle color. Default is White.
HueValue Stablishes the HUE value (0-360).Default is 360
SaturationValue Stablishes the Saturation value (0-100).Default is 100
LightnessValue Stablishes the Lightness value (0-100).Default is 50
AlphaValue Stablishes the Alpha value (0-255).Default is 255

Events

Sample

eliteFooter

eliteFooter provides a simple way to create a Footer with customizable shapes.


Properties

CanvasData Provides access to Canvas SKPaintSurfaceEventArgs once it finishes drawing the initial content
FooterPath Stablishes the path to be used when drawing container shape
ColorPrimary If "IsGradient" is set to true, this property stablishes the first gradient color to use for the container background.Default is #548EC1
ColorSecondary If "IsGradient" is set to true, this property stablishes the second gradient color to use for the container background.Default is #254867
Content Sets the ContentView for the footer's container

Events

Sample

Animations

Creating custom shapes is possible by manipulating FooterPath property manually once FinishedPresenting event is triggered. It is even possible to create animations with the shapes as shown below.



Sample

eliteHeader

eliteHeader provides a simple way to create a Header with customizable shapes.


Properties

CanvasData Provides access to Canvas SKPaintSurfaceEventArgs once it finishes drawing the initial content
HeaderPath Stablishes the path to be used when drawing container shape
ColorPrimary If "IsGradient" is set to true, this property stablishes the first gradient color to use for the container background.Default is #548EC1
ColorSecondary If "IsGradient" is set to true, this property stablishes the second gradient color to use for the container background.Default is #254867
Content Sets the ContentView for the header's container

Events

Sample

Animations

Creating custom shapes is possible by manipulating HeaderPath property manually once FinishedPresenting event is triggered. It is even possible to create animations with the shapes as shown below.



Sample