🚀 Installing and Using Plugin.Maui.MilestoneTracker

Plugin.Maui.MilestoneTracker is a lightweight and customizable progress tracker control built for .NET MAUI. Perfect for showcasing onboarding steps, achievements, or task sequences in a beautiful, animated milestone path.

📦 Installation Guide

You can install the plugin using either the .NET CLI or Visual Studio NuGet UI.

🔧 Option 1: Using .NET CLI

Open your terminal and run:

dotnet add package Plugin.Maui.MilestoneTracker

🔧 Option 2: Using Visual Studio

• Right-click your MAUI project.

• Choose Manage NuGet Packages.

• Search for Plugin.Maui.MilestoneTracker.

• Click Install.

✅ Getting Started

This plugin uses SkiaSharp for custom drawing and animation. You must add SkiaSharp support to your MauiProgram.cs

Open MauiProgram.cs and add the SkiaSharp setup:

using SkiaSharp.Views.Maui.Controls.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseSkiaSharp() // 👈 Add this line
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        return builder.Build();
    }
}

1️⃣ Add Namespace in XAML

xmlns:milestone="clr-namespace:Plugin.Maui.MilestoneTracker.Journey;assembly=Plugin.Maui.MilestoneTracker"

2️⃣ Add Control in XAML

Here’s a sample usage inside a Border:

<Border
    Padding="10"
    StrokeShape="RoundRectangle 7,7,7,7"
    VerticalOptions="Center">

    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="yourcolor" Offset="0.0" />
            <GradientStop Color="yourcolor" Offset="1.0" />
        </LinearGradientBrush>
    </Border.Background>

    <milestone:MilestoneTracker
        x:Name="MilestoneTracker"
        AnimationSpeed="Normal"
        PathType="Wave"
        StartAnimation="{Binding StartAnimation}"
        Milestones="{Binding Milestones}"
        PathColor="{StaticResource Primary}"
        HeightRequest="150" />
</Border>

Available PathType Options:

• Horizontal – Straight horizontal line

• Wave – Sinusoidal wave

• Diagonal – Diagonal bottom-left to top-right

• DiagonalWave – Wavy diagonal

• ZigZag – Zig-zag pattern

Available AnimationSpeed Options:

• Slow

• Normal

• Fast

3️⃣ Initialize in Code-Behind

protected override async void OnAppearing()
{
    MilestoneTracker.Milestones = Milestones;
    MilestoneTracker.StartAnimation = true;
}

private void Button_Clicked(object sender, EventArgs e)
{
    Milestones[3].IsCompleted = true;
}

4️⃣ ViewModel Example

Use ObservableCollection to reflect dynamic updates to the milestone list.

public ObservableCollection<Milestone> Milestones { get; set; } = new()
{
    new Milestone { ImageSource = "milestone1.png", CompletedImageSource = "milestone1_done.png", IsCompleted = true },
    new Milestone { ImageSource = "milestone2.png", CompletedImageSource = "milestone2_done.png", IsCompleted = false },
    new Milestone { ImageSource = "milestone3.png", CompletedImageSource = "milestone3_done.png", IsCompleted = false }
};

🧪 Upcoming Features (Planned)

• Vertical layout mode

• Horizontal scrolling for milestones

• Milestone click interactions

• Dark mode theme support