Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Emoji Rating

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.

C# - Save/Load Logic
// 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.

Events Wiring
// 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:
  • Default Light/Dark: Standard, clean looks.
  • System Adaptive: Automatically follows OS theme.
  • Material Blue: Material Design inspired blue palette.
  • Modern Red: Bold red accents.
  • Flat Design: Turquoise/Sea Green flat style.
  • Modern Dark: Deep slate background with purple accents.
  • High Contrast: Accessible Yellow-on-Black theme.
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.

C# - Custom Scale
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.

C# - Read-Only Results
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.

C# - Theme Toggle
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;
    }
}