OyeMaterialDesignTextInput 2.0.1

Custom Material Design for .NET MAUI

A library that brings Material Design floating labels and custom inputs to .NET MAUI applications.

Features

• Floating label Material Design text inputs.
• Customizable placeholder, border color, and input styling.
• Password masking functionality.

Installation

You can install this library via NuGet by running the following command:

dotnet add package OyeMaterialDesignTextInput

Configuration

To configure this library in your MAUI application, follow the steps below.

Step 1: Modify the MauiProgram class

In the MauiProgram class, you need to import the OyeMaterialDesignTextInput middleware.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        //--- Import the OyeMaterialDesignTextInput middleware ---
        builder.UseOyeMaterialDesignTextInput();

        return builder.Build();
    }
}

Step 2: Add Custom Controls to Your Page

In your XAML page, import the OyeMaterialDesignTextInput namespace and use the custom controls provided by the library.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestCode.MainPage"
             xmlns:customControls="clr-namespace:OyeMaterialDesignTextInput.CustomControls;assembly=OyeMaterialDesignTextInput">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">

            <customControls:BorderedEntry Placeholder="First Name" />
            <customControls:BorderedEntry Placeholder="Last Name" BorderColor="Green"/>
            <customControls:BorderedEntry Placeholder="Password" IsPassword="true" BorderColor="DarkRed"/>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Usage

• BorderedEntry: A custom Material Design entry with a floating label and a customizable border.
• Properties:
  • Placeholder: Sets the placeholder text.
  • BorderColor: Sets the border color of the entry.
  • IsPassword: Boolean to indicate if the entry is a password field.
  • Keyboard: Sets the Keyboard input type: Numeric, Plain, Email, Telephone...

With this, you have a simple, yet powerful way to integrate Floating Label Material Design-style text inputs into your .NET MAUI application!

Your support is highly welcomed: https://buymeacoffee.com/devoye