Articles in this section
Category / Section

How to handle the steptapped event in the .NET MAUI StepProgressBar?

3 mins read

In the Syncfusion® .NET MAUI StepProgressBar control, you can handle the StepTapped event through the following steps.

Step1:
Initialize the StepProgressBar control and add the ActiveStepIndex as shown in the following code.

XAML

<stepProgressBar:SfStepProgressBar x:Name="stepProgressBar"
                                  ActiveStepIndex="2">
</stepProgressBar:SfStepProgressBar>

Step2:
Create the ItemSource and invoke the StepTapped event as shown in the following code.

XAML

<stepProgressBar:SfStepProgressBar x:Name="stepProgressBar"
                                  ActiveStepIndex="2"
                                  ItemsSource="{Binding StepProgressItem}"
                                  StepTapped="OnStepProgressBar_StepTapped">
</stepProgressBar:SfStepProgressBar>

C#

public class StepProgressBarViewModel
{
   private ObservableCollection<StepProgressBarItem> stepProgressItem;
   public ObservableCollection<StepProgressBarItem> StepProgressItem
   {
       get
       {
           return stepProgressItem;
       }
       set
       {
           stepProgressItem = value;
       }
   }

   public StepProgressBarViewModel()
   {
       stepProgressItem = new ObservableCollection<StepProgressBarItem>();
       stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Cart" });
       stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Address" });
       stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Delivery" });
       stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Ordered" });
   }
}

Step3:
In the StepProgressBar control, the StepTapped event is triggered whenever a user taps on one of the step views within the progress bar. This event serves as a responsive mechanism for the control to detect and respond to user interaction with individual steps.

C#

private void OnStepProgressBar_StepTapped(object? sender, StepTappedEventArgs e)
{
    StepProgressBarItem? stepProgressBarItem = e.StepItem;
    if (stepProgressBarItem != null)
    {
        string primaryText = stepProgressBarItem.PrimaryText;
        Application.Current?.MainPage?.DisplayAlert("StepItem",primaryText , "OK");
    }
}

Download the complete sample on GitHub
Output:

Step_tapped_gif.gif

Conclusion:
I hope you enjoyed learning how to handle the StepTapped event in .NET MAUI StepProgressBar.
You can refer to our .NET MAUI StepProgressBar feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI StepProgressBar documentation to understand how to present and manipulate data.
You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI StepProgressBar and other .NET MAUI components.
Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied