Skip to content

A powerful toolkit designed to extend simple controls and effortlessly create sophisticated, custom UI elements.

License

Notifications You must be signed in to change notification settings

JohnStavrou/ExtendedMauiControls

Repository files navigation

Extended MAUI Controls

Unlock the true potential of .NET MAUI development with ExtendedMauiControls, a powerful toolkit designed to extend simple controls and effortlessly create sophisticated, custom UI elements.

Built exclusively for .NET MAUI, our library seamlessly integrates with the cross-platform framework, enabling you to enhance your app's UI on iOS, Android, and Windows with a unified codebase.

After popular demand, Placeholder text was removed from the ExtendedEntry Control! (Ti a kans..)

Available Extented Controls

ExtendedEntry

Alt text

Bindable Properties:

  • Text

Properties:

  • Placeholder
  • IsPassword
  • HasClearButton (default: True)
  • PrefixIcon
  • SuffixIcon
  • PrimaryColor
  • UnfocusedColor (default: Gray)
  • TextColor (default: Black)

If you find the entry border in windows to be annoying, like I do, you can simply add the following code in your App.xaml file in your project's Platforms/Windows.

<maui:MauiWinUIApplication.Resources>
    <Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
</maui:MauiWinUIApplication.Resources>

This is a temporary solution until I find a nicer way to fix it for everyone!

ExtendedButton

Alt text

Event Handlers:

  • Tapped

Bindable Properties:

  • TappedCommand

Properties:

  • Text
  • HorizontalTextAlignment (default: Center)
  • VerticalTextAlignment (default: Center)
  • PrefixIcon
  • SuffixIcon
  • PrimaryColor
  • TextColor (default: White)
  • IconColor (default: White)

Getting Started

First, in order to use ExtendedMauiControls you need to call in yout project's MauiProgram.cs the extension method of the dependent package CommunityToolkit.Maui and then call the extension method that initializes our toolkit.

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();

    // Initialize .NET MAUI Community Toolkit
    builder.UseMauiApp<App>().UseMauiCommunityToolkit();
    
    // Initialize Extended .NET MAUI Controls Toolkit
    builder.UseMauiApp<App>().UseExtendedMauiControls();
}

Usage

You can use the namespace below to use the tookit in xaml or C#

XAML

xmlns:emc="clr-namespace:ExtendedMauiControls.Controls;assembly=ExtendedMauiControls"

C#

using MauiExtendedControls.Controls;

Improtant Notes

PrimaryColor is binded to the Primary value in your project's Colors.xaml, so if it is missing you need to add it as shown below:

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Color x:Key="Primary">#512BD4</Color>
</ResourceDictionary>

In order to use different colors, you can simply override this value by using the PrimaryColor property.

Examples

Below you can see a simple usage example on a sign-in view

<emc:ExtendedEntry Text="{Binding Username}"
                   Placeholder="Username"
                   PrefixIcon="Person"/>

<emc:ExtendedEntry Text="{Binding Password}" IsPassword="True"
                   Placeholder="Password"
                   PrefixIcon="Lock"/>

<emc:ExtendedButton Text="Sign In"
                    SuffixIcon="ArrowForward"
                    TappedCommand="{Binding TappedCommand}"/>

Alt text

Credits

Huge thanks to AathifMahir for his incredible work on creating MAUI Icons and making it easier to use Material Icons and many more in .NET MAUI.

About

A powerful toolkit designed to extend simple controls and effortlessly create sophisticated, custom UI elements.

Resources

License

Stars

Watchers

Forks

Languages