Siticone Rating Emoji
The SiticoneRatingEmoji is an expressive, modern interaction control that allows users to provide feedback using emotive icons.
It goes beyond simple star ratings by offering character-based (emoji) or image-based feedback mechanisms, complete with fluid animations, hover scaling effects, and comprehensive theme support (including automatic OS theme detection).
Selection & Values
Properties for managing the user's selected rating and the range of available emotions.
| Property | Type | Description & Usage Example |
|---|---|---|
SelectedIndex |
int | emojiRating.SelectedIndex = 2; The zero-based index of the currently selected emoji. Returns -1 if no selection is made. |
RatingValue |
int | int score = emojiRating.RatingValue; A convenience property returning the 1-based rating (e.g., 1 to 5). Useful for storing scores in a database. |
CustomEmojis |
List<string> | emojiRating.CustomEmojis = new List<string> { "👎", "😐", "👍" }; The list of text-based emojis to display. Defaults to: 😡, 😞, 😐, 😊, 😍. |
CustomEmojiDescriptions |
List<string> | emojiRating.CustomEmojiDescriptions = new List<string> { "Bad", "Okay", "Good" }; A list of short descriptions corresponding to each emoji. |
CustomEmojiDetails |
List<string> | emojiRating.CustomEmojiDetails = new List<string> { "Very Dissatisfied", ... }; Detailed text shown in tooltips when hovering over an emoji. |
Visual Customization
Fine-tune the appearance of the emojis, colors, and layout.
| Property | Type | Description & Usage Example |
|---|---|---|
EmojiSize |
float | emojiRating.EmojiSize = 32f; The font size (in points) or display size of the emoji characters. |
EmojiFont |
Font | emojiRating.EmojiFont = new Font("Segoe UI Emoji", 24); The font used to render the emojis. Ensure the font supports emoji characters. |
EmojiPadding |
Padding | emojiRating.EmojiPadding = new Padding(5); Spacing around the internal drawing area of the control. |
SelectedEmojiColor |
Color | emojiRating.SelectedEmojiColor = Color.DodgerBlue; The color applied to the actively selected emoji. |
UnSelectedEmojiColor |
Color | emojiRating.UnSelectedEmojiColor = Color.Gray; The color of emojis that are not currently selected. |
HoveredEmojiColor |
Color | emojiRating.HoveredEmojiColor = Color.DarkGray; The transitional color applied when the mouse hovers over an emoji. |
ShowSelectedCircle |
bool | emojiRating.ShowSelectedCircle = true; Draws a ring around the selected emoji for emphasis. |
GlowColor |
Color | emojiRating.GlowColor = Color.Gold; The color of the highlight circle/glow effect. |
GlowSize |
float | emojiRating.GlowSize = 4f; The thickness of the glow/circle effect. |
Custom Images
Replace standard font-based emojis with your own image assets for a fully branded look.
| Property | Type | Description & Usage Example |
|---|---|---|
UseCustomImages |
bool |
emojiRating.UseCustomImages = true;
When true, the control renders images from CustomEmojiImages instead of text from CustomEmojis.
|
CustomEmojiImages |
List<Image> |
emojiRating.CustomEmojiImages = new List<Image> { img1, img2, ... };
A list of Image objects to use as rating icons. Must match the count of desired options.
|
Animation & Interaction
Control the fluidity and feedback mechanisms of the user interface.
| Property | Type | Description & Usage Example |
|---|---|---|
HoverScaleFactor |
float | emojiRating.HoverScaleFactor = 0.3f; The percentage by which an emoji grows when hovered (0.3 = 30% larger). |
HoverAnimationDuration |
float | emojiRating.HoverAnimationDuration = 200f; The duration (in ms) of the scale-up animation on hover. |
ClickAnimationDuration |
float | emojiRating.ClickAnimationDuration = 100f; The duration (in ms) of the press-down effect when clicking. |
AnimationInterval |
int | emojiRating.AnimationInterval = 15; The timer interval for rendering frames. Lower values mean smoother, higher-FPS animations. |
BeepOnInvalidInput |
bool | emojiRating.BeepOnInvalidInput = true; Plays a system sound if the user clicks the control while it is in Read-Only mode. |
IsReadOnly |
bool | emojiRating.IsReadOnly = true; Disables user selection. If clicked, the control shakes to indicate it is locked. |
System & Automatic Themes
The control features an advanced theme manager capable of detecting the operating system's color mode.
| Property | Type | Description & Usage Example |
|---|---|---|
Theme |
ThemeMode |
emojiRating.Theme = ThemeMode.System;
Determines how the control is styled. Options: Light, Dark, System, Custom.
Selecting System allows the control to automatically switch based on OS settings.
|
CurrentSystemTheme |
SystemTheme | var sysTheme = emojiRating.CurrentSystemTheme; Read-Only. Returns the currently detected OS theme (Light or Dark). Supports Windows (Registry), macOS (NSUserDefaults), and Linux (GTK/KDE). |
Data Persistence
Built-in methods to save and load rating state.
// Configure the save path
emojiRating.RatingSavePath = "user_rating.txt";
// Save current selection to file
emojiRating.SaveRating();
// Load selection from file
emojiRating.LoadRating();
Events
Hooks for responding to user interactions and system changes.
// 1. SelectedIndexChanged
// Fires when the user clicks a new emoji.
emojiRating.SelectedIndexChanged += (s, e) =>
{
Console.WriteLine($"User rated: {emojiRating.RatingValue}/5");
};
// 2. SystemThemeChanged
// Fires when the OS theme changes (e.g., Auto Day/Night switching).
emojiRating.SystemThemeChanged += (s, e) =>
{
Debug.WriteLine($"System theme changed from {e.OldTheme} to {e.NewTheme}");
};
Designer & Smart Tags
The SiticoneRatingEmoji control includes a rich Smart Tag menu for instant configuration.
| Feature | Description |
|---|---|
Theme Presets |
Apply professional visual styles instantly:
|
Copy/Paste Settings |
Allows copying the visual configuration of one emoji rating control to another instance. |
Detailed Usage Examples
Example 1: NPS (Net Promoter Score) Scale
Configuring the control to use a 3-point scale (Negative, Neutral, Positive) with custom descriptions.
private void SetupNPSRating()
{
// Define 3 custom emojis
npsRating.CustomEmojis = new List<string> { "👎", "😐", "🚀" };
// Define descriptions for tooltips
npsRating.CustomEmojiDetails = new List<string>
{
"Not likely to recommend",
"Neutral",
"Highly likely to recommend"
};
// Styling
npsRating.SelectedEmojiColor = Color.DarkViolet;
npsRating.HoverScaleFactor = 0.4f; // Large pop effect
npsRating.EmojiSize = 35f;
npsRating.ShowSelectedCircle = true;
}
Example 2: Read-Only Display with Vote Counts
Using the control to display aggregate feedback results where users cannot vote, but can see vote counts via tooltips.
private void DisplayResults()
{
resultsRating.IsReadOnly = true;
resultsRating.BeepOnInvalidInput = true; // Feedback if clicked
// Simulate loading vote counts from database
// Index 0 (Angry): 12 votes
// Index 4 (Love): 150 votes
resultsRating.UpdateEmojiCount(0, 12);
resultsRating.UpdateEmojiCount(1, 5);
resultsRating.UpdateEmojiCount(2, 20);
resultsRating.UpdateEmojiCount(3, 85);
resultsRating.UpdateEmojiCount(4, 150);
// Tooltips will now show: "Love it - 150 votes"
}
Example 3: Dynamic Theme Switching
Manually toggling between light and dark themes based on a user preference setting.
private void ToggleTheme(bool isDark)
{
if (isDark)
{
emojiRating.Theme = ThemeMode.Dark;
// Optional manual overrides
emojiRating.BackColor = Color.FromArgb(30, 30, 30);
emojiRating.UnSelectedEmojiColor = Color.LightGray;
}
else
{
emojiRating.Theme = ThemeMode.Light;
emojiRating.BackColor = Color.White;
emojiRating.UnSelectedEmojiColor = Color.Black;
}
}