Siticone Scan Button
The SiticoneScanButton is a highly customizable, animated control designed for modern, sci-fi, or security-focused user interfaces.
It features complex visual layers including rotating blades, radar sweeps, pulsing glows, and data grid effects.
It extends the standard visual component provider, making it ideal for "Start Scan", "Connect", or "Authenticate" actions where visual feedback is paramount.
Core Behavior & Animation
Properties controlling the primary scanning logic and outer ring animation states.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
int |
scanner.Value = 45;
The current progress of the scan (0 to 100).
Changing this triggers the ValueChanged event. Setting it to 100 automatically calls StopScan().
|
AutoAnimateOnLoad |
bool | scanner.AutoAnimateOnLoad = true; If true, the outer ring rotation animation starts immediately when the control is loaded. |
AnimationSpeed |
int | scanner.AnimationSpeed = 30; The interval (in milliseconds) for the outer ring's rotation timer. Lower values result in faster rotation. Default is 40. |
GradientAnimationSpeed |
float |
scanner.GradientAnimationSpeed = 0.05f;
Controls the speed of the color transition when BladeStyle is set to AnimatedGradient. Higher values are faster. Default is 0.02f.
|
IsAnimating |
bool | if (scanner.IsAnimating) { ... } Read-only. Returns true if the outer ring rotation timer is currently active. |
IsScanning |
bool | if (scanner.IsScanning) { ... } Read-only. Returns true if a scan operation (Radar/Pulse/Grid effects) is currently active. |
Outer Ring & Blades
Configuration for the rotating outer ring, allowing for rainbow effects, gradients, or solid security colors.
| Property | Type | Description & Usage Example |
|---|---|---|
BladeStyle |
BladeAnimationStyle | scanner.BladeStyle = BladeAnimationStyle.Rainbow; Determines how the blades are colored (Rainbow, AnimatedGradient, or SolidColor). |
NumberOfBlades |
int | scanner.NumberOfBlades = 12; The number of individual segments (blades) in the rotating outer ring. |
OuterRingWidth |
int | scanner.OuterRingWidth = 15; The thickness of the rotating outer ring. |
BladeGap |
float | scanner.BladeGap = 2.5f; The empty space (gap) in degrees between each blade. |
BladeColors |
Color[] |
scanner.BladeColors = new[] { Color.Cyan, Color.Magenta };
Used when BladeStyle is Rainbow. Cycles linearly through these colors across the blades.
|
BladeGradientColors |
Color[] |
scanner.BladeGradientColors = new[] { Color.Red, Color.Orange };
Used when BladeStyle is AnimatedGradient. Creates a smooth shifting gradient between these colors.
|
BladeSolidColor |
Color |
scanner.BladeSolidColor = Color.DodgerBlue;
Used when BladeStyle is SolidColor. Paints all blades with this single color.
|
Center Button & Bevel
Properties controlling the appearance of the static center button and the bevel ring separating it from the blades.
| Property | Type | Description & Usage Example |
|---|---|---|
InnerBevelWidth |
int | scanner.InnerBevelWidth = 4; The width of the glowing ring (bevel) between the outer rotating blades and the center button. |
BevelColor |
Color | scanner.BevelColor = Color.White; The color of the inner bevel ring. |
CenterButtonColor1 |
Color | scanner.CenterButtonColor1 = Color.Black; The outer gradient color of the center button background. |
CenterButtonColor2 |
Color | scanner.CenterButtonColor2 = Color.FromArgb(20, 30, 60); The inner gradient color of the center button background. |
Scan Effects
Advanced visual layers that activate when StartScan() is called.
| Property | Type | Description & Usage Example |
|---|---|---|
RadarSweepColor |
Color | scanner.RadarSweepColor = Color.FromArgb(100, Color.Green); The color of the rotating radar pie slice effect (60-degree sweep). |
PulseGlowColor |
Color | scanner.PulseGlowColor = Color.Blue; The color of the pulsating center glow that fades in and out. |
ShowGridEffect |
bool | scanner.ShowGridEffect = true; Draws a sci-fi data grid overlay on the center button during scanning. |
GridLineCount |
int |
scanner.GridLineCount = 10;
Defines the number of vertical and horizontal lines drawn if ShowGridEffect is true.
|
ShowScanLineEffect |
bool | scanner.ShowScanLineEffect = true; Animates a horizontal line moving up and down the center area. |
ShowConcentricCirclesEffect |
bool | scanner.ShowConcentricCirclesEffect = true; Emits expanding circular ripples from the center. |
ConcentricCircleSpeed |
float | scanner.ConcentricCircleSpeed = 1.5f; Controls how fast the concentric circles expand outwards. |
Text & Glow
| Property | Type | Description & Usage Example |
|---|---|---|
TextGlow |
bool | scanner.TextGlow = true; Enables a soft neon glow behind the text (e.g., "SCAN" or "55%"). |
TextGlowColor |
Color | scanner.TextGlowColor = Color.Cyan; The color of the text glow. |
TextGlowIntensity |
int | scanner.TextGlowIntensity = 4; The thickness/blur radius of the text glow pen. |
Public Methods
// Initiates the scanning process.
// 1. Sets IsScanning to true.
// 2. Resets Value to 0.
// 3. Starts the effects timer (Radar, Grid, ScanLine).
// 4. Fires the ScanStarted event.
public void BeginAuthentication()
{
siticoneScanButton1.StartScan();
}
// Stops the current scan operation.
// 1. Sets IsScanning to false.
// 2. Stops the effects timer.
// 3. Fires the ScanCompleted event.
siticoneScanButton1.StopScan();
// Controls the idle rotation of the outer ring.
// StartAnimation: Begins rotation and fires AnimationStarted.
siticoneScanButton1.StartAnimation();
// StopAnimation: Halts rotation and fires AnimationStopped.
siticoneScanButton1.StopAnimation();
// Applies a predefined visual theme to the control.
// This automatically configures colors, blade styles, and effects.
// Fires the ThemeApplied event.
siticoneScanButton1.CurrentTheme = SiticoneScanButtonThemePreset.CyberpunkNeon;
Events
// 1. ValueChanged
// Fires whenever the 'Value' property changes (0-100).
scanner.ValueChanged += (s, e) =>
{
lblStatus.Text = $"Scanning... {e.NewValue}%";
// e.OldValue and e.NewValue are available in ScanValueChangedEventArgs
};
// 2. ScanStarted / ScanCompleted
// Fires when scan state changes.
scanner.ScanStarted += (s, e) => PlaySound("scan_start.wav");
scanner.ScanCompleted += (s, e) => UnlockInterface();
// 3. AnimationStarted / AnimationStopped
// Fires when the outer ring rotation is toggled.
scanner.AnimationStarted += (s, e) => Debug.WriteLine("Ring rotating");
// 4. ThemeApplied
// Fires after a theme preset has been loaded.
scanner.ThemeApplied += (s, e) =>
{
Debug.WriteLine($"Applied Theme: {e.AppliedTheme}");
};
// 5. SettingsCopied / SettingsPasted
// Fires when settings are transferred via the Smart Tag designer context.
scanner.SettingsPasted += (s, e) => MessageBox.Show("Style updated!");
Designer & Smart Tags
The SiticoneScanButton includes a powerful custom designer action list for rapid prototyping.
| Category | Actions |
|---|---|
Live Actions |
Start/Stop Animation: Toggles the rotation in the Visual Studio designer to preview the speed. Start/Stop Scan: Toggles the internal effects (radar, grid) to preview colors. |
Utilities |
Copy Settings: Copies all visual properties (Colors, Blades, Effects) to an internal dictionary. Paste Settings: Applies copied settings to another ScanButton. Reset to Default: Reverts the control to the 'Default' theme. |
Configuration |
Direct access to Theme Preset, Blade Style, Outer Ring Width, Bevel Colors, Glow Effects, and Grid Settings directly from the Smart Tag menu. |
Enumerations
public enum SiticoneScanButtonThemePreset
{
Default, CyberpunkNeon, OceanicDepth, SolarFlare, EmeraldGlow, AmethystCrystal,
RubyRed, SapphireBlue, GoldenTreasure, SilverLining, BronzeAge, ArcticIce,
DesertMirage, JungleCamo, VolcanicAsh, NebulaGas, BlackHole, Starlight,
ForestSpirit, CoralReef, PoisonDart, ElectricEel, PeacockFeathers, SunsetGlow,
MidnightSky, DawnBreaker, BloodMoon, HarvestGold, WinterFrost, SpringBlossom,
AutumnLeaves, SummerHeat, IndustrialGray
}
public enum BladeAnimationStyle
{
// Cycles linearly through the BladeColors array across the blades.
Rainbow,
// Smoothly transitions the entire ring between BladeGradientColors.
AnimatedGradient,
// Uses a single BladeSolidColor for all blades.
SolidColor
}
Detailed Usage Examples
Example 1: Biometric Authentication Simulation
This example simulates a fingerprint scanner. It uses a Timer to increment the scan progress and updates the visual state.
Timer _scanProgressTimer;
public void SetupBioScanner()
{
// Configure for a green, "valid" look
bioScanner.CurrentTheme = SiticoneScanButtonThemePreset.EmeraldGlow;
bioScanner.TextGlow = true;
bioScanner.Value = 0;
// Setup a timer to simulate data processing
_scanProgressTimer = new Timer();
_scanProgressTimer.Interval = 50; // Update speed
_scanProgressTimer.Tick += (s, e) =>
{
if (bioScanner.Value < 100)
{
// Increment progress
bioScanner.Value += 2;
}
else
{
_scanProgressTimer.Stop();
// Scan finished - ScanCompleted event handles the rest
}
};
// Hook up events
bioScanner.ScanStarted += (s, e) => _scanProgressTimer.Start();
bioScanner.ScanCompleted += (s, e) => MessageBox.Show("Identity Verified");
}
Example 2: Custom "Warning" Style
Demonstrates how to manually configure the blades and effects to create a custom "Danger/Warning" style without using a preset.
private void StyleAsWarning(SiticoneScanButton btn)
{
// 1. Blade Configuration
btn.BladeStyle = BladeAnimationStyle.Rainbow;
btn.BladeColors = new[] { Color.Yellow, Color.Black, Color.Yellow };
btn.NumberOfBlades = 6;
btn.BladeGap = 10f;
btn.AnimationSpeed = 10; // Fast rotation
// 2. Center Appearance
btn.CenterButtonColor1 = Color.FromArgb(40, 40, 0);
btn.CenterButtonColor2 = Color.Black;
btn.BevelColor = Color.Gold;
btn.InnerBevelWidth = 6;
// 3. Effects
btn.RadarSweepColor = Color.OrangeRed;
btn.ShowGridEffect = true;
btn.GridLineCount = 15;
btn.ShowScanLineEffect = true;
btn.TextGlowColor = Color.Red;
btn.TextGlowIntensity = 8;
}
Layout & Resizing
| Property | Type | Description & Usage Example |
|---|---|---|
FixedSize |
Size? | scanner.FixedSize = new Size(200, 200); Optional. If set, the drawing surface is constrained to this size and centered within the control's bounds. Useful for maintaining a perfect circle aspect ratio in a responsive layout. |
ControlMargin |
int | scanner.ControlMargin = 5; The padding between the control edges and the drawing surface. |