https://github.com/clovisnicolas/SkiaRate

Cross-platform Rating view using SkiaSharp
https://github.com/clovisnicolas/SkiaRate

Last synced: 29 days ago
JSON representation

Cross-platform Rating view using SkiaSharp

• Host: GitHub
• URL: https://github.com/clovisnicolas/SkiaRate
• Owner: clovisnicolas
• License: mit
• Created: 2017-10-16T19:15:27.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-07T13:27:14.000Z (about 7 years ago)
• Last Synced: 2024-08-03T23:24:17.906Z (4 months ago)
• Language: C#
• Size: 2.73 MB
• Stars: 42
• Watchers: 2
• Forks: 12
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-xamarin-forms - SkiaRate ★41

README

        
# SkiaRate

![](Documentation/SkiaRateSample.gif)

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](https://img.shields.io/nuget/v/SkiaRate.svg?label=NuGet)](https://www.nuget.org/packages/SkiaRate/)

**Xamarin.Forms (.NET Standard 1.3)**

[![NuGet](https://img.shields.io/nuget/v/SkiaRate.Forms.svg?label=NuGet)](https://www.nuget.org/packages/SkiaRate.Forms/)

## Quickstart

* UWP

```csharp

```

* Xamarin.iOS

```csharp

view.AddSubview(new RatingView() { Frame = view.Bounds, Path = PathConstants.Heart, ColorOn = UIColor.Red});

```

* Xamarin.Android

```csharp

    

FindViewById(Resource.Id.ratingView1).Path = PathConstants.Heart;

FindViewById(Resource.Id.ratingView1).RatingType = RatingType.Half;    

```

* Xamarin.Forms

```csharp

```

## 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 :

```csharp

 // 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](https://material.io/)

I got the idea to make a SkiaSharp component from [@Aloïs Deniel](https://github.com/aloisdeniel/)'s awesome Charts library [Microcharts](https://github.com/aloisdeniel/Microcharts/)