https://github.com/tsjdev-apps/sevensegmentdisplay-maui
A customizable seven-segment display control for .NET MAUI built with SkiaSharp, featuring glow effects, animations, MVVM support, and full cross-platform compatibility.
https://github.com/tsjdev-apps/sevensegmentdisplay-maui
cross-platform custom-control dotnet dotnet-maui maui mvvm seven-segment-display skiasharp ui
Last synced: about 10 hours ago
JSON representation
A customizable seven-segment display control for .NET MAUI built with SkiaSharp, featuring glow effects, animations, MVVM support, and full cross-platform compatibility.
- Host: GitHub
- URL: https://github.com/tsjdev-apps/sevensegmentdisplay-maui
- Owner: tsjdev-apps
- License: mit
- Created: 2026-07-09T20:57:39.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2026-07-14T10:56:54.000Z (10 days ago)
- Last Synced: 2026-07-14T12:33:54.272Z (10 days ago)
- Topics: cross-platform, custom-control, dotnet, dotnet-maui, maui, mvvm, seven-segment-display, skiasharp, ui
- Language: C#
- Homepage:
- Size: 2.4 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Seven Segment Display with .NET MAUI
A .NET MAUI sample app that demonstrates a reusable `SevenSegmentDisplay` control rendered manually with SkiaSharp 4.
## Features
- Reusable MAUI control built on `SKCanvasView`
- Classic seven-segment geometry with rounded polygon segments
- Active, inactive, background, glow, spacing, thickness, radius, opacity, and alignment bindable properties
- Lightweight text-change pulse animation
- Digital clock, countdown, and status display demos
- Light and dark theme support through MAUI `AppThemeBinding`
- MVVM demo state using `CommunityToolkit.Mvvm`
- NUnit coverage for segment mapping and design-space constants
- Central package management through `Directory.Packages.props`
## Screenshots
## Repository Structure
```text
.editorconfig
Directory.Build.props
Directory.Packages.props
NuGet.config
MauiSevenSegmentDisplay.slnx
README.md
docs/
└── maui-ui-july-2026-seven-segment-display.md
src/
└── MauiSevenSegmentDisplay/
├── Controls/
├── Pages/
├── ViewModels/
├── App.xaml
├── AppShell.xaml
├── MauiProgram.cs
└── MauiSevenSegmentDisplay.csproj
tests/
└── MauiSevenSegmentDisplay.Tests/
├── SegmentCharacterMapTests.cs
├── SevenSegmentOptionsTests.cs
└── MauiSevenSegmentDisplay.Tests.csproj
```
The generated MAUI `Platforms`, `Properties`, and `Resources` folders are also included so the app can build and run on Android, iOS, Mac Catalyst, and Windows.
## Run
From the repository root:
```bash
dotnet build MauiSevenSegmentDisplay.slnx
dotnet test MauiSevenSegmentDisplay.slnx
```
## SevenSegmentDisplay
`SevenSegmentDisplay` is a reusable control in `src/MauiSevenSegmentDisplay/Controls`. It exposes bindable properties for text, colors, glow, segment sizing, animation, and alignment. The renderer uses a simple design-space model and scales it to the current Skia canvas size, so the display adapts to phones, tablets, and desktop windows.
`SegmentCharacterMap` maps characters to the seven named segment flags. Unsupported characters render as blanks, which keeps the control safe for arbitrary bound text.
## Tests
The NUnit test project lives in `tests/MauiSevenSegmentDisplay.Tests`. It verifies the character-to-segment mapping and the design-space constants that drive the Skia renderer.
## Example XAML
```xml
```
## Read the Article
For a detailed walkthrough of the control’s architecture, seven-segment geometry, SkiaSharp rendering, bindable properties, animations, and demo application, read the accompanying Medium article:
[Building a Seven-Segment Display Control with .NET MAUI and SkiaSharp](https://medium.com/@tsjdevapps/building-a-seven-segment-display-control-with-net-maui-and-skiasharp-739adf1ca8d9)