Siticone Material Star Rating
The SiticoneMaterialStarRating is a high-performance, animated rating control inspired by modern Material Design principles.
It features smooth value transitions, interactive hover effects, half-star precision, and extensive customization for colors and sizes.
Behavior & Interaction
Control how the user interacts with the rating control, including half-star support and read-only modes.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
float | rating.Value = 3.5f; The current rating value. Setting this triggers a smooth transition animation. |
StarCount |
int | rating.StarCount = 5; The total number of stars displayed. |
AllowHalfRating |
bool | rating.AllowHalfRating = true; If enabled, users can select half-star values (e.g., 2.5, 4.5). If disabled, values snap to whole numbers. |
IsInteractive |
bool | rating.IsInteractive = false; Disables user input, making the control read-only (useful for displaying review averages). |
UltraFastMode |
bool | rating.UltraFastMode = true; Disables animations and advanced effects for maximum performance. Ideal for lists with hundreds of rating controls. |
Appearance & Styling
Customize the colors, size, and visual feedback of the stars.
| Property | Type | Description & Usage Example |
|---|---|---|
ActiveColor |
Color | rating.ActiveColor = Color.Gold; The color of filled (selected) stars. |
InactiveColor |
Color | rating.InactiveColor = Color.LightGray; The color of empty (unselected) stars. |
HoverColor |
Color | rating.HoverColor = Color.Orange; The color of stars under the mouse cursor during interaction. |
BorderColor |
Color | rating.BorderColor = Color.DimGray; The outline color of the stars. |
BorderThickness |
float | rating.BorderThickness = 1.5f; The thickness of the star border line. |
StarSize |
int | rating.StarSize = 24; The width and height of each star icon. |
StarSpacing |
int | rating.StarSpacing = 8; The gap between adjacent stars. |
HoverScale |
float | rating.HoverScale = 1.2f; The scale factor (e.g., 1.2 = 120%) applied to the star currently being hovered. |
Designer & Smart Tags
The control includes a comprehensive Smart Tag panel for rapid configuration directly in the Visual Studio designer.
| Feature | Description |
|---|---|
Theme Presets |
Apply professional color schemes instantly:
|
Quick Actions |
One-click shortcuts to set values to 0, Half, or Max, and adjust star counts (5 or 10). |
Settings Clipboard |
Copy/Paste Settings: Easily replicate styles across multiple rating controls in your application. |
Detailed Usage Examples
Example 1: Basic Feedback Form
A standard 5-star rating input for user feedback.
private void InitializeFeedbackRating()
{
var rating = new SiticoneMaterialStarRating();
rating.StarCount = 5;
rating.AllowHalfRating = true;
rating.Value = 0; // Start empty
// Visual Style
rating.ActiveColor = Color.Gold;
rating.InactiveColor = Color.WhiteSmoke;
rating.HoverColor = Color.Orange;
// Event Handling
rating.ValueChanged += (s, e) =>
{
Console.WriteLine($"User rated: {e.NewValue} stars");
};
this.Controls.Add(rating);
}
Example 2: Read-Only Display (Product Review)
Displaying an aggregate rating (e.g., "4.7 average") where users cannot change the value.
private void ShowProductRating(float averageRating)
{
var displayRating = new SiticoneMaterialStarRating();
displayRating.IsInteractive = false; // Disable user input
displayRating.Value = averageRating;
// Smaller stars for compact display
displayRating.StarSize = 16;
displayRating.StarSpacing = 2;
// Optional: Enable UltraFastMode for lists
displayRating.UltraFastMode = true;
this.Controls.Add(displayRating);
}
Example 3: Validation & Cancellation
Using the `ValueChanging` event to enforce rules, such as preventing a rating below 1 star.
private void SetupRatingValidation()
{
var rating = new SiticoneMaterialStarRating();
rating.ValueChanging += (s, e) =>
{
// Prevent setting a rating lower than 1.0
if (e.NewValue < 1.0f)
{
e.Cancel = true;
MessageBox.Show("Minimum rating is 1 star.");
}
};
this.Controls.Add(rating);
}
Example 4: Animation Events
Triggering actions (like submitting a score) only after the visual animation completes.
private void InitializeAutoSubmit()
{
var rating = new SiticoneMaterialStarRating();
rating.AnimationCompleted += (s, e) =>
{
// e.FinalValue contains the settled rating
SubmitScoreToServer(e.FinalValue);
Console.WriteLine("Animation finished, score submitted.");
};
this.Controls.Add(rating);
}