How to create an onboard screen for my live .NET MAUI application?

You can develop it using a Grid or a Frame to create a popup overlay; implement INotifyPropertyChanged to update the UI when CurrentPageIndex changes; and ensure the changes are being reflected correctly

Something like this:

using System.Windows.Input;
using System.ComponentModel;
using System.Runtime.CompilerServices;
public class OnboardingViewModel : INotifyPropertyChanged
{
    private int _currentPageIndex;
    public int CurrentPageIndex
    {
        get => _currentPageIndex;
        set
        {
            _currentPageIndex = value;
            OnPropertyChanged();
        }
    }
    private bool _isTutorialVisible = true;
    public bool IsTutorialVisible
    {
        get => _isTutorialVisible;
        set
        {
            _isTutorialVisible = value;
            OnPropertyChanged();
        }
    }
    public ICommand PreviousCommand { get; }
    public ICommand NextCommand { get; }
    public ICommand SkipCommand { get; }
    public OnboardingViewModel()
    {
        PreviousCommand = new Command(GoToPreviousPage);
        NextCommand = new Command(GoToNextPage);
        SkipCommand = new Command(SkipTutorial);
    }
    private void GoToPreviousPage()
    {
        if (CurrentPageIndex > 0)
        {
            CurrentPageIndex--;
        }
    }
    private void GoToNextPage()
    {
        if (CurrentPageIndex < 4)
        {
            CurrentPageIndex++;
        }
    }
    private void SkipTutorial()
    {
        IsTutorialVisible = false;
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

<Grid>
    <Frame x:Name="TutorialPopup" BackgroundColor="Green" CornerRadius="10" Padding="10" IsVisible="{Binding IsTutorialVisible}">
        <StackLayout>
            <Label Text="Label Text" TextColor="White" />
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="End">
                <Button Text="Previous" Command="{Binding PreviousCommand}" />
                <Button Text="Next" Command="{Binding NextCommand}" />
                <Button Text="Skip" Command="{Binding SkipCommand}" />
            </StackLayout>
        </StackLayout>
    </Frame>
</Grid>

Please let me know if this works for you

Best regards!

Hi @Sowndarrajan Vijayaragavan , thank you for reaching out on Microsoft Q&A!

There are two ways you can try to implement this function:

Full-Screen Onboarding Pages:

You can create a dedicated onboarding flow using a full-screen page with multiple slides. This is ideal for introducing your app’s features before the user reaches the main interface. You can achieve this by using CarouselView to display the slides and IndicatorView to show progress indicators. Include navigation options such as Next, Previous, and Skip buttons for better user control.

In-App Coach Marks (Overlay):

You can use an overlay that highlights specific UI elements while blocking interaction with the rest of the page. The easiest way to implement this is by using the .NET MAUI Community Toolkit Popup, which allows you to create a modal overlay that intercepts all touches. Design the popup with a semi-transparent background and highlight the relevant feature area, adding navigation buttons like Next, Previous, and Done.

I hope this helps you get things back on track quickly! If my suggestions can solve your issue, feel free to interact with the system accordingly!

Thank you!