Awesome

Maui.NeoControls

Controls for Maui based on neumorphism tendency

Examples

neocontrols maui

Getting started

Install the NeoControls.Maui package

Install-Package NeoControls.Maui -Version 1.0.17

Add UseNeoControls declaration to your MauiAppBuilder

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

		return builder.Build();
	}
}

Use the controls

    <NeoButton Elevation=".25"
               CornerRadius="70,20,20,20"
               BackgroundColor="#e3edf7"/>

You can also insert any view inside the neo controls

        <NeoButton BackgroundColor="#e3edf7">
            
            <StackLayout Orientation="Vertical">
                <Image Source="MyImage.png "/>
                <Label Text="My Button Label"/>
            </StackLayout>
            
        </NeoButton>

Background with gradient

    <NeoButton>
        <NeoButton.BackgroundGradient>
            <LinearGradient Angle="45">
                <NeoGradientStop Color="Red" Offset="0" />
                <NeoGradientStop Color="Yellow" Offset="1" />
            </LinearGradient>
        </NeoButton.BackgroundGradient>

        <StackLayout Orientation="Vertical">
            <Image Source="MyImage.png "/>
            <Label Text="My Button Label"/>
        </StackLayout>
    </NeoButton>

Property reference

Property	What it does	Extra info
`CornerRadius`	A `CornerRadius` object representing each individual corner's radius.	Uses the `CornerRadius` struct allowing you to specify individual corners.
`Elevation`	Set this value to chenge element depth effect.
`InnerView`	View that will be shown inside the neo control.
`ShadowBlur`	Set this value to change shadow blur effect.
`ShadowDistance`	Set this value to change shadow distance relative from control.
`DarkShadowColor`	The Dark color that will be applied on draw the dark shadow.	This will be applied with `Elevation` property, as Alpha parameter.
`LightShadowColor`	The White color that will be applied on draw the light shadow.
`BackgroundGradient`	Draw a gradient on background's control	When value != null, backgroundColor Property will be ignored

Alt