XamlLEDControl

Beautiful, lightweight LED simulators for WPF and Avalonia. Each control can display a single LED with on/off state and optional text, or a cluster of LEDs with smooth fade animations. All key properties are fully dynamic at runtime: changes to fonts, sizes, colors, layout, orientation, and animation settings update the UI immediately.

• WPF package: XamlLEDControl.WPF
• Avalonia package: XamlLEDControl.Avalonia

NuGet

• WPF:
• Avalonia:

Install

• dotnet add package XamlLEDControl.WPF
• dotnet add package XamlLEDControl.Avalonia

Target frameworks

• WPF control: .NET Framework 4.6.2, .NET 8, .NET 9
• Avalonia control: .NET Standard 2.0, .NET 8, .NET 9

XAML namespaces

• WPF: xmlns:led="https://github.com/ChrisPulman/XamlLEDControl.WPF"
• Avalonia: xmlns:led="https://github.com/ChrisPulman/XamlLEDControl.Avalonia"

Features

• Single LED or LED cluster
• Round or square LED (with subtle corner rounding)
• Per-LED gradient for a realistic look
• Label text with flexible positioning around LEDs
• Horizontal or vertical layout
• Runtime-dynamic updates to all properties (font, colors, sizes, spacing, animation)
• Smooth fade animations for cluster selection

Properties (common)

• Text: string – label text overlay/near the LEDs
• TextPosition: Top | Bottom | Left | Right | Center – where to place Text relative to LEDs
• LedOrientation: Horizontal | Vertical – direction of the LED stack
• LEDSize: double – LED visual size (default 40)
• LedSpacing: double – margin around each LED (default 2)
• IsSquare: bool – square or round LED (default false)
• DefaultOnColor: Color – used by single-LED mode
• DefaultOffColor: Color – used by single-LED mode
• LedOnColors: List – cluster on colors (one per LED)
• LedOffColors: List – cluster off colors (one per LED)
• IsTrue: bool – single-LED on/off state (used when ActiveLed == -1 and On/Off lists have same length)
• ActiveLed: int – 1-based active LED index for cluster mode (0 or -1 means none active)
• OffOpacity: double – opacity of non-active LEDs in cluster mode (default 0.4)
• AnimationDurationSeconds: double – fade animation duration for cluster mode (default 1.0)
• FontFamily, FontSize, FontWeight, Foreground – forwarded to the internal TextBlock

WPF usage

1. Add namespace

• xmlns:led="https://github.com/ChrisPulman/XamlLEDControl.WPF"

2. Single LED (XAML)

<led:XamlLEDText="Power"TextPosition="Right"LEDSize="36"DefaultOnColor="LimeGreen"DefaultOffColor="DarkGreen"IsTrue="True"FontFamily="Segoe UI"FontSize="14" />

3. Cluster (XAML + code-behind)

• XAML

<StackPanel>
<led:XamlLEDx:Name="Cluster"Text="Status"TextPosition="Top"LedOrientation="Horizontal"LEDSize="32"LedSpacing="4"OffOpacity="0.35"AnimationDurationSeconds="0.5" />
<ButtonContent="Next"Click="Next_Click" />
</StackPanel>

• Code-behind (C#)

publicpartialclassMainWindow:Window{publicMainWindow(){InitializeComponent();Cluster.LedOnColors=newList<Color>{Colors.Green,Colors.Red,Colors.Green,Colors.Red};Cluster.LedOffColors=newList<Color>{Colors.DarkGreen,Colors.DarkRed,Colors.DarkGreen,Colors.DarkRed};Cluster.ActiveLed=1;// 1-based index}privatevoidNext_Click(objectsender,RoutedEventArgse){// cycle through LEDs 1..4, 0/-1 means nonevarnext=Cluster.ActiveLed+1;if(next>Cluster.LedOnColors.Count)next=0;Cluster.ActiveLed=next;}}

4. Dynamic updates at runtime

Cluster.LEDSize=48;// resizes LEDs liveCluster.IsSquare=true;// switches to square LEDsCluster.OffOpacity=0.2;// dims inactive LEDs moreCluster.Text="Network";// updates label textCluster.TextPosition=TextPosition.Bottom;// moves label dynamically

Avalonia usage

1. Add namespace

• xmlns:led="https://github.com/ChrisPulman/XamlLEDControl.Avalonia"

2. Single LED (XAML)

<led:XamlLEDText="Power"TextPosition="Right"LEDSize="36"DefaultOnColor="LimeGreen"DefaultOffColor="DarkGreen"IsTrue="True"FontFamily="Segoe UI"FontSize="14" />

3. Cluster (XAML + code-behind)

• XAML

<StackPanel>
<led:XamlLEDx:Name="Cluster"Text="Status"TextPosition="Top"LedOrientation="Horizontal"LEDSize="32"LedSpacing="4"OffOpacity="0.35"AnimationDurationSeconds="0.5" />
<ButtonContent="Next"Click="Next_Click" />
</StackPanel>

• Code-behind (C#)

publicpartialclassMainView:UserControl{publicMainView(){InitializeComponent();Cluster.LedOnColors=newList<Color>{Colors.Green,Colors.Red,Colors.Green,Colors.Red};Cluster.LedOffColors=newList<Color>{Colors.DarkGreen,Colors.DarkRed,Colors.DarkGreen,Colors.DarkRed};Cluster.ActiveLed=1;}privatevoidNext_Click(object?sender,RoutedEventArgse){varnext=Cluster.ActiveLed+1;if(next>Cluster.LedOnColors.Count)next=0;Cluster.ActiveLed=next;}}

4. Dynamic updates at runtime

Cluster.LEDSize=48;Cluster.IsSquare=true;Cluster.OffOpacity=0.2;Cluster.Text="Network";Cluster.TextPosition=TextPosition.Bottom;

MVVM bindings

• Single LED

<led:XamlLEDText="Connected"DefaultOnColor="LimeGreen"DefaultOffColor="DarkGreen"IsTrue="{Binding IsConnected}" />

• Cluster

<led:XamlLEDLedOrientation="Horizontal"LedSpacing="6"OffOpacity="0.4"AnimationDurationSeconds="0.3"ActiveLed="{Binding ActiveIndex}" />

Notes

• ActiveLed is 1-based for active LED selection; set 0 or -1 for none.
• Single LED mode is used when ActiveLed == -1 and LedOnColors.Count == LedOffColors.Count. In this case IsTrue toggles all LEDs between DefaultOnColor and DefaultOffColor.
• To set per-LED colors from XAML directly, prefer binding to a ViewModel property of type List. Setting List literals is simpler in code-behind.

License

• MIT License (see LICENSE)