Siticone Avatar

The SiticoneAvatar is a high-performance circular image control specifically designed for user profile pictures and avatars. It goes beyond the standard PictureBox by offering built-in circular cropping, advanced border styling, real-time image filters (grayscale, sepia, etc.), and smooth hover animations.

Visual Appearance

Configure the fundamental look of the avatar, including the image source, margins, and borders.

Property	Type	Description & Usage Example
`Image`	Image	avatar.Image = Properties.Resources.UserPhoto; The source image to display. It is automatically center-cropped into a circle.
`Margin`	int	avatar.Margin = 5; Internal margin between the control bounds and the drawing area. Useful to prevent border clipping.
`BorderEnabled`	bool	avatar.BorderEnabled = true; Toggles the visibility of the avatar border.
`BorderColor`	Color	avatar.BorderColor = Color.RoyalBlue; The primary color of the border stroke.
`BorderThickness`	int	avatar.BorderThickness = 3; The width of the border line in pixels.
`BorderLineStyle`	AvatarBorderStyle	avatar.BorderLineStyle = AvatarBorderStyle.Dash; The style of the border line. Options include: `Solid`, `Dash`, `Dot` `Gradient` (Linear, Radial) `Wavy`, `Neon`, `Glow`

Image Effects & Filters

Apply real-time visual processing to the avatar image without modifying the original source file.

Property	Type	Description & Usage Example
`ImageEffect`	ImageEffect	avatar.ImageEffect = ImageEffect.Grayscale; Applies a preset filter. Options: `Grayscale`, `Sepia`, `Invert`, `Blur`, `Sharpen`, etc.
`TintColor`	Color	avatar.TintColor = Color.FromArgb(50, 255, 0, 0); Overlays a specific color tint on the image (requires `ImageEffect.Tint`).
`Brightness`	float	avatar.Brightness = 0.2f; Adjusts image brightness (-1.0 to 1.0).
`Contrast`	float	avatar.Contrast = 1.5f; Adjusts image contrast (1.0 is normal).
`PixelationSize`	int	avatar.PixelationSize = 10; Block size for the pixelation effect (requires `ImageEffect.Pixelate`).
`VignetteIntensity`	float	avatar.VignetteIntensity = 0.8f; Controls the strength of the dark corner vignette effect (0.0 to 1.0).

Hover Animations

Configure dynamic visual feedback when the user interacts with the avatar.

Property	Type	Description & Usage Example
`HoverAnimationEnabled`	bool	avatar.HoverAnimationEnabled = true; Enables smooth transitions for border properties on mouse hover.
`HoverBorderColor`	Color	avatar.HoverBorderColor = Color.Cyan; The target color for the border when hovered.
`HoverBorderThickness`	int	avatar.HoverBorderThickness = 6; The target thickness for the border when hovered.
`AnimationSpeed`	int	avatar.AnimationSpeed = 15; Interval in milliseconds for the animation timer. Lower values mean faster updates.

Performance

UltraPerformance

// Enable for lists containing many avatars
avatar.UltraPerformance = true;

When enabled, disables high-cost image processing filters and animations. Useful for rendering avatars inside data grids or long lists.

Events

Event Wiring

// Occurs when the image property changes
avatar.ImageChanged += (s, e) => 
{
                Console.WriteLine("Avatar image updated.");
};

// Occurs when an image effect changes
avatar.ImageEffectChanged += (s, e) => 
{
                Debug.WriteLine($"Effect changed from {e.OldEffect} to {e.NewEffect}");
};

// Occurs when a hover animation step completes (useful for chaining)
avatar.AnimationCompleted += (s, e) => 
{
                // Animation finished
};

Detailed Usage Examples

Example 1: User Profile Setup

Configures a standard user profile avatar with a clean border and hover effect.

C# - Profile Avatar

private void SetupProfileAvatar()
{
    var avatar = new SiticoneAvatar();
    avatar.Size = new Size(120, 120);
    avatar.Image = Properties.Resources.DefaultUser;
    
                // Border Styling
    avatar.BorderColor = Color.FromArgb(224, 224, 224);
    avatar.BorderThickness = 4;
    
                // Interactive Hover
    avatar.HoverAnimationEnabled = true;
    avatar.HoverBorderColor = Color.DodgerBlue;
    avatar.HoverBorderThickness = 6;
    
    this.Controls.Add(avatar);
}

Example 2: Status Indicators with Glow

Uses the Glow border style to indicate an "Online" status.

C# - Status Glow

private void SetOnlineStatus(SiticoneAvatar avatar, bool isOnline)
{
                if (isOnline)
    {
        avatar.BorderLineStyle = AvatarBorderStyle.Glow;
        avatar.BorderColor = Color.LimeGreen;
        avatar.BorderThickness = 5;
    }
                else
    {
        avatar.BorderLineStyle = AvatarBorderStyle.Solid;
        avatar.BorderColor = Color.Gray;
        avatar.ImageEffect = ImageEffect.Grayscale; // Gray out offline users
    }
}

Example 3: Dynamic Image Loading with Fade

Demonstrates loading an image from a file path with a smooth fade-in effect (default behavior).

C# - Image Loading

public void LoadUserImage(string filePath)
{
                try 
    {
                // Setting the Image property automatically triggers a Fade-In animation
                // unless UltraPerformance is enabled.
        userAvatar.Image = Image.FromFile(filePath);
        
                // Optional: Reset effects
        userAvatar.ImageEffect = ImageEffect.Original;
    }
                catch (Exception ex)
    {
                MessageBox.Show("Could not load image: " + ex.Message);
        userAvatar.Image = Properties.Resources.ErrorPlaceholder;
    }
}