π 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 lineWave
β Sinusoidal waveDiagonal
β Diagonal bottom-left to top-rightDiagonalWave
β Wavy diagonalZigZag
β 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
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! π