A high-quality, customizable radial/circular segment button control for .NET MAUI applications. Create interactive circular button interfaces with customizable segments following SOLID principles. Perfect for creating radial menus, circular navigation, and interactive pie-chart-style UIs.
$ dotnet add package RadialSegmentControl
A high-quality, customizable radial/circular segment button control library for .NET MAUI applications. This library provides an interactive circular button interface with customizable segments.
IRadialSegmentDrawable interfaceInstall via NuGet Package Manager:
dotnet add package RadialSegmentControlOr via Package Manager Console:
Install-Package RadialSegmentControl<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:RadialSegmentControl.Controls;assembly=RadialSegmentControl"
x:Class="YourApp.MainPage">
<controls:RadialSegmentControl x:Name="radialControl"
WidthRequest="300"
HeightRequest="300"
CenterRadius="30"
SegmentSelected="OnSegmentSelected" />
</ContentPage>using RadialSegmentControl.Models;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
// Add segments programmatically
radialControl.Segments.Add(new RadialSegment
{
Text = "Option1",
BackgroundColor = Colors.Blue,
TextColor = Colors.White,
Value = "value1"
});
radialControl.Segments.Add(new RadialSegment
{
Text = "Option2",
BackgroundColor = Colors.Green,
TextColor = Colors.White,
Value = "value2"
});
radialControl.Segments.Add(new RadialSegment
{
Text = "Option3",
BackgroundColor = Colors.Red,
TextColor = Colors.White,
Value = "value3"
});
}
private void OnSegmentSelected(object sender, SegmentSelectedEventArgs e)
{
DisplayAlert("Selected", $"You selected: {e.Segment.Text}", "OK");
}
}using System.Collections.ObjectModel;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using RadialSegmentControl.Models;
public partial class MainViewModel : ObservableObject
{
[ObservableProperty]
private ObservableCollection<RadialSegment> segments;
[ObservableProperty]
private RadialSegment? selectedSegment;
public ICommand SegmentSelectedCommand { get; }
public MainViewModel()
{
Segments = new ObservableCollection<RadialSegment>
{
new RadialSegment { Text = "A", BackgroundColor = Colors.Blue, TextColor = Colors.White },
new RadialSegment { Text = "B", BackgroundColor = Colors.Green, TextColor = Colors.White },
new RadialSegment { Text = "C", BackgroundColor = Colors.Red, TextColor = Colors.White }
};
SegmentSelectedCommand = new RelayCommand<RadialSegment>(OnSegmentSelected);
}
private void OnSegmentSelected(RadialSegment? segment)
{
if (segment != null)
{
// Handle selection
}
}
}<controls:RadialSegmentControl Segments="{Binding Segments}"
SelectedSegment="{Binding SelectedSegment}"
SegmentSelectedCommand="{Binding SegmentSelectedCommand}"
WidthRequest="300"
HeightRequest="300" />Properties:
Segments (ObservableCollection): Collection of segments to displaySelectedSegment (RadialSegment?): Currently selected segment (bindable, two-way)CenterRadius (float): Radius of the center circle (default: 30)SegmentSelectedCommand (ICommand?): Command executed when a segment is selectedEvents:
SegmentSelected: Raised when a segment is selectedProperties:
Id (string): Unique identifierText (string): Display textBackgroundColor (Color): Segment background colorTextColor (Color): Text colorValue (object?): Associated value/dataIsEnabled (bool): Whether segment is enabledStartAngle (float): Start angle in degrees (auto-calculated)SweepAngle (float): Segment size in degrees (auto-calculated)Metadata (IDictionary<string, object>): Additional custom data⚠️ Important:
StartAngleandSweepAngleare automatically calculated and managed by theRadialSegmentControl. Do not manually set these properties as they will be overwritten during layout calculation.
Perfect for creating circular context menus and radial selection interfaces.
Ideal for key signature selection, chord progression wheels, or music theory tools.
Create unique circular navigation interfaces for mobile apps.
Interactive pie charts with selectable segments.
Circular skill trees, radial weapon selectors, or ability wheels.
| Platform | Supported | Notes |
|---|---|---|
| 🤖 Android | ✅ Yes | Tested on Android 7.0+ |
| 🍎 iOS | ✅ Yes | Tested on iOS 14.0+ |
| 🪟 Windows | ✅ Yes | Windows 10 1809+ |
| 🍎 macOS | ✅ Yes | macOS 10.15+ |
| 🍏 Mac Catalyst | ✅ Yes | macOS 10.15+ |
ICanvas for hardware accelerationThis project adheres to Semantic Versioning:
Current version: 1.0.0
For security concerns, please see our Security Policy.
If you find this library useful, please consider giving it a ⭐ on GitHub!
Contributions are welcome! Please read our Contributing Guidelines before submitting PRs.
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Copyright 2025 KotBehamot
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
RadialSegmentControl/
├── src/
│ └── RadialSegmentControl/ # Main library
│ ├── Controls/ # UI Controls
│ ├── Models/ # Data models
│ ├── Interfaces/ # Abstractions
│ ├── Drawing/ # Rendering implementations
│ ├── Builders/ # Builder patterns
│ ├── Adapters/ # Adapter patterns
│ ├── Extensions/ # Extension methods
│ └── Events/ # Event arguments
├── tests/
│ └── RadialSegmentControl.Tests/ # Unit tests
├── samples/
│ └── RadialSegmentControl.Sample/ # Sample application
├── docs/# Documentation
└── assets/# Package assets (icon, etc.)
Made with ❤️ by KotBehamot