Skip to content

clovisnicolas/SkiaRate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SkiaRate

This library is using SkiaSharp to display a customisable RatingView.

Compatibility

  • UWP
  • Xamarin.iOS
  • Xamarin.Android
  • Xamarin.Forms

Installation

Xamarin.iOS, Xamarin.Android, UWP, NET Standard 1.3

NuGet

Xamarin.Forms (.NET Standard 1.3)

NuGet

Quickstart

  • UWP
<skiarate:RatingView Count="5" ColorOn="Red" Value="3.0" />
  • Xamarin.iOS
view.AddSubview(new RatingView() { Frame = view.Bounds, Path = PathConstants.Heart, ColorOn = UIColor.Red});
  • Xamarin.Android
<skiarate.RatingView 
    android:id="@+id/ratingView1" 
    android:layout_width="match_parent" 
    android:layout_height="160dp" />
    
FindViewById<RatingView>(Resource.Id.ratingView1).Path = PathConstants.Heart;
FindViewById<RatingView>(Resource.Id.ratingView1).RatingType = RatingType.Half;    
  • Xamarin.Forms
<skiarate:RatingView ColorOn="#E91E63" Count="8" />

Customization

By default, 5 yellow stars are displayed using the RatingView, but you may customize the it to your own taste by setting the following properties :

 // The Svg path data for the "icon"
string Path { get; set; }

// Number of items to display 
int Count  {get;set;} 

// The (native) color of the item when filled
Color ColorOn { get; set; }

// The Outline color of filled items
Color OutlineOnColor { get; set; } 

// The Outline color of empty items
Color OutlineOffColor { get; set; }

// How items should be filled (Full, Empty or Floating)
RatingType RatingType { get; set; } 

Credits

Included Svg path data & colors were taken from material.io

I got the idea to make a SkiaSharp component from @Aloïs Deniel's awesome Charts library Microcharts

About

Cross-platform Rating view using SkiaSharp

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published