Plugin.Maui.Stepper 1.0.3

.NET 7.0 This package targets .NET 7.0. The package is compatible with this framework or higher. 
dotnet add package Plugin.Maui.Stepper --version 1.0.3                

                    
                

            
NuGet\Install-Package Plugin.Maui.Stepper -Version 1.0.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Plugin.Maui.Stepper" Version="1.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Plugin.Maui.Stepper --version 1.0.3                

                    
                

            
#r "nuget: Plugin.Maui.Stepper, 1.0.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Plugin.Maui.Stepper as a Cake Addin
#addin nuget:?package=Plugin.Maui.Stepper&version=1.0.3

// Install Plugin.Maui.Stepper as a Cake Tool
#tool nuget:?package=Plugin.Maui.Stepper&version=1.0.3

Plugin.Maui.Stepper

Plugin.Maui.Stepper - is a cross-platform plugin for .NET MAUI ,Used to display progress through a sequence of steps.

ezgif com-video-to-gif

How To Use

Available on NuGet: https://www.nuget.org/packages/Plugin.Maui.Stepper/1.0.3

Install this Plugin in your .NET MAUI Project

Now add following namespace to your content page

xmlns:mauiStepper="clr-namespace:MauiStepper.Views;assembly=MauiStepper"

Vertical Stepper View

<mauiStepper:VerticalStepperView x:Name="stepperView" OnStepTapped="stepperView_OnStepTapped"
                  OnStepContinue="stepperView_OnStepContinue" OnStepCancel="stepperView_OnStepCancel">
            <mauiStepper:VerticalStepperView.Steps>
                <mauiStepper:VerticalStepView Title="Step 1">
                    <mauiStepper:VerticalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:VerticalStepView.Content>
                </mauiStepper:VerticalStepView>
                <mauiStepper:VerticalStepView Title="Step 2">
                    <mauiStepper:VerticalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:VerticalStepView.Content>
                </mauiStepper:VerticalStepView>
                <mauiStepper:VerticalStepView Title="Step 3">
                    <mauiStepper:VerticalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:VerticalStepView.Content>
                </mauiStepper:VerticalStepView>
            </mauiStepper:VerticalStepperView.Steps>

Code Behind

   private void stepperView_OnStepContinue(object sender, EventArgs e)
    {
        if (stepperView.Steps.Count > stepperView.CurrentStep)
            stepperView.CurrentStep += 1;
    }

    private void stepperView_OnStepCancel(object sender, EventArgs e)
    {
        if (stepperView.CurrentStep > 0)
            stepperView.CurrentStep -= 1;
    }
    
    private void stepperView_OnStepTapped(object sender, int e)
    {
        stepperView.CurrentStep = e;
    }

Styles Property

StepTitleStyle : Used for setting title Label Style 
StepIndexStyle : Used for setting Index Count Label Style 
StepIndexHeightWidth: used for setting height & width request of step counter
ActiveStepIndexBackgroundColor: used for setting active step background color.
StepIndexBackgroundColor: used for setting non-active step background color.
ContinueButtonStyle: used for setting continue button style
CancelButtonStyle: used for setting cancel button style.

How to Use Style Property

Define Style for label or Button in your content page or in styles.xaml file & use in vertical stepper view.

 <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Button" x:Key="btnCancelStyle">
                <Setter Property="BackgroundColor" Value="Orange" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

  <mauiStepper:VerticalStepperView x:Name="stepperView"  CancelButtonStyle="{x:StaticResource btnCancelStyle}">

Horizontal Stepper View

  <mauiStepper:HorizontalStepperView x:Name="stepperView"  OnStepContinue="stepperView_OnStepContinue" OnStepCancel="stepperView_OnStepCancel">
            <mauiStepper:HorizontalStepperView.Steps>
                <mauiStepper:HorizontalStepView Title="Step 1">
                    <mauiStepper:HorizontalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:HorizontalStepView.Content>
                </mauiStepper:HorizontalStepView>

                <mauiStepper:HorizontalStepView Title="Step 2">
                    <mauiStepper:HorizontalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:HorizontalStepView.Content>
                </mauiStepper:HorizontalStepView>

                <mauiStepper:HorizontalStepView Title="Step 3">
                    <mauiStepper:HorizontalStepView.Content>
                        <VerticalStackLayout>
                            <Label Text="Description 1" />
                            <Label Text="Description 2" />
                            <Label Text="Description 3" />
                            <Label Text="Description 4" />
                            <Label Text="Description 5" />
                        </VerticalStackLayout>
                    </mauiStepper:HorizontalStepView.Content>
                </mauiStepper:HorizontalStepView>
            </mauiStepper:HorizontalStepperView.Steps>

Code Behind

   private void stepperView_OnStepContinue(object sender, EventArgs e)
    {
        if (stepperView.Steps.Count > stepperView.CurrentStep)
            stepperView.CurrentStep += 1;
    }

    private void stepperView_OnStepCancel(object sender, EventArgs e)
    {
        if (stepperView.CurrentStep > 0)
            stepperView.CurrentStep -= 1;
    }
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-android33.0 is compatible.  net7.0-ios was computed.  net7.0-ios16.1 is compatible.  net7.0-maccatalyst was computed.  net7.0-maccatalyst16.1 is compatible.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net7.0-windows10.0.19041 is compatible.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

  • net7.0

    • No dependencies.

  • net7.0-android33.0

    • No dependencies.

  • net7.0-ios16.1

    • No dependencies.

  • net7.0-maccatalyst16.1

    • No dependencies.

  • net7.0-windows10.0.19041

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.3 4,093 2/26/2023