Awesome

CC.CircularSlider.Forms

Circle Slider Component for Xamarin.Forms and .NET MAUI.

Preview

Supported Platforms

Supported platforms are currently iOS and Android, UWP support is possible, but not in scope right now, drop an issue if you're interested in having it implemented, or open a PR, of course.

Setup

Supported platforms are currently iOS and Android, UWP support is possible, but not in scope right now, drop an issue if you're interested in having it implemented, or open a PR, of course.

Install-Package CC.CircularSlider.Forms

Usage

Xamarin.Forms

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CircularSliderSample.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:cc="clr-namespace:CC;assembly=CC.CircularSlider.Forms">

    <StackLayout Padding="50">
        <cc:CircularSlider
            Arc="360"
            KnobColor="{Binding Color}"
            Maximum="100"
            Minimum="0"
            OnValueChanged="CircularSlider_OnValueChanged"
            PaddingAround="10"
            Start="90"
            TrackProgressColor="{Binding Color}"
            VerticalOptions="FillAndExpand"
            Value="50" />
    </StackLayout>
</ContentPage>

.NET MAUI

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    x:Class="CircularSliderSample.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:cc="clr-namespace:CC;assembly=CC.CircularSlider.MAUI"
    x:Class="CircularSliderSample.MainPage">

    <StackLayout 
        Orientation="Horizontal" 
        HorizontalOptions="Fill" 
        VerticalOptions="Center">
            <slider:CircularSlider 
                PaddingAround="45" 
                Start="120" 
                Arc="300" 
                TrackWidth="2" 
                KnobColor="{DynamicResource BrandColor}" 
                TrackColor="{DynamicResource BrandColor}" 
                TrackProgressColor="{DynamicResource BrandColor}" 
                Minimum="{Binding MinimumValue}" 
                Maximum="{Binding MaximumValue}" 
                Value="{Binding ActualValue}" 
                OnValueChanged="CircularSlider_OnOnValueChanged" 
                VerticalOptions="Center" 
                HeightRequest="400" 
                HorizontalOptions="Fill"/> 
    </StackLayout>
</ContentPage>

And in the C#:

namespace CircularSliderSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void CircularSlider_OnValueChanged(object sender, ValueChangedEventArgs e)
        {
            Console.WriteLine(e.NewValue);
        }
    }
}

This should give you a page with a large slider embedded.

Bindable Properties/Events

Dependencies and special thanks

• SkiaSharp.Views.Forms
• SkiaSharp.Views.Maui.Controls