πŸš€ Installing and Using Plugin.Maui.MilestoneTracker

Ali RazaAli Raza
2 min read

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

0
Subscribe to my newsletter

Read articles from Ali Raza directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Ali Raza
Ali Raza

πŸš€ Tech Lead | .NET MAUI Expert | Mobile App Developer I'm Ali Raza, a passionate Tech Lead with over 6 years of experience in mobile app development. I specialize in .NET MAUI/Xamarin and have led multiple high-impact projects, including enterprise apps, fintech solutions, and eSIM technology. πŸ”Ή What I Do: βœ” .NET MAUI & Xamarin – Building cross-platform apps with robust architectures βœ” eSIM & Fintech Apps – Leading innovations in digital connectivity & finance βœ” Performance Optimization – Creating high-quality, scalable mobile solutions βœ” Mentorship & Community Sharing – Helping developers master .NET MAUI πŸ“’ Sharing Weekly Insights on .NET MAUI/Xamarin to help developers level up! Follow me for deep dives into Native Interop, API Optimization, and Advanced UI/UX techniques. Let’s connect and build something amazing! πŸš€