Rating

Stars to pick and show a rating.

ExampleInteractive

Rating — Avalonia UIKit

<uikit:Rating Value="3" HorizontalAlignment="Left" />

View code

#Usage

uikit:Rating is a row of Maximum stars (5 by default) with Value of them filled, in the theme's yellow or ActiveBrush. The pointer previews the value under it; a click sets Value to that star, or to the star before when that star is already filled, so a rating can be cleared down to zero. Value binds two-way by default. A disabled rating shows its value only. Each star is a uikit:RatingStar with the :filled and :active pseudo-classes.

#Examples

The four sizes.

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <uikit:Rating Classes="xsmall" Value="3" />
  <uikit:Rating Classes="small" Value="3" />
  <uikit:Rating Value="3" />
  <uikit:Rating Classes="large" Value="3" />
</StackPanel>

View code

Maximum sets the number of stars.

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <uikit:Rating Value="2" Maximum="3" />
  <uikit:Rating Value="7" Maximum="10" />
</StackPanel>

View code

ActiveBrush colors the filled and previewed stars; the theme's UIKit.Red and UIKit.Primary here.

<StackPanel Spacing="8" HorizontalAlignment="Left">
  <uikit:Rating Value="4" ActiveBrush="{DynamicResource UIKit.Red}" />
  <uikit:Rating Value="4" ActiveBrush="{DynamicResource UIKit.Primary}" />
</StackPanel>

View code

A disabled rating neither previews nor changes.

<uikit:Rating Value="3" IsEnabled="False" HorizontalAlignment="Left" />

View code

#Not covered

• Nothing: the control covers the component.