CommonControls.Maui 1.1.1

CommonControls.Maui

A .NET MAUI library providing clean, customisable controls for Android and iOS.

Controls

Installation

<ItemGroup>
  <PackageReference Include="CommonControls.Maui" Version="1.1.1" />
</ItemGroup>

Setup

Register handler mappings once in MauiProgram.cs:

using CommonControls.Maui.Hosting;

builder.UseCommonControls();

XAML namespace

xmlns:cc="clr-namespace:CommonControls.Maui.Controls;assembly=CommonControls.Maui"

BorderlessEntry

Entry with the platform-native border/underline removed.

<cc:BorderlessEntry Placeholder="Email" />

BorderlessEditor

Editor with the platform-native border removed.

<cc:BorderlessEditor Placeholder="Notes" HeightRequest="100" />

PasswordEntry

Password input with a built-in show/hide toggle button. Uses bundled eye icons by default; supports custom image sources.

<cc:PasswordEntry Placeholder="Password" />


<cc:PasswordEntry
    Placeholder="Password"
    ShowPasswordImageSource="my_eye.png"
    HidePasswordImageSource="my_hidden.png"
    ImageHeight="20"
    ImageWidth="20" />

Properties

ValidationEntry

An entry with a configurable border and inline error message. The border and separator are independently controlled — mix and match to suit your design.

Border / separator combinations

<cc:ValidationEntry
    Placeholder="Email"
    Keyboard="Email"
    SeparatorVisible="True"
    ErrorSeparatorColor="Red"
    ErrorMessage="Please enter a valid email"
    IsValid="{Binding IsEmailValid}" />


<cc:ValidationEntry
    Placeholder="Username"
    BorderColor="Gray"
    BorderVisible="True"
    ErrorBorderColor="Red"
    ErrorMessage="This field is required"
    IsValid="{Binding IsUsernameValid}" />


<cc:ValidationEntry
    Placeholder="Password"
    BorderColor="Black"
    BorderVisible="True"
    CornerRadius="8"
    ErrorBorderColor="Black"
    SeparatorVisible="True"
    ErrorSeparatorColor="Black"
    ErrorMessage="Must be at least 8 characters"
    ErrorColor="Orange"
    ErrorFontSize="11"
    IsValid="{Binding IsPasswordValid}" />

Properties

Events

StateButton

A fully customisable tappable button built as a ContentView. Supports press animations, a busy/loading spinner, an optional vertical divider with a trailing icon, gradient backgrounds, and a visual disabled state.

Basic usage

<cc:StateButton
    BackgroundColor="#512BD4"
    CornerRadius="10"
    Text="Tap me"
    TextColor="White" />


<cc:StateButton
    BackgroundColor="Transparent"
    BorderColor="#512BD4"
    CornerRadius="10"
    Text="Tap me"
    TextColor="#512BD4" />

Gradient background

<cc:StateButton CornerRadius="22" Text="Login" TextColor="#3B82F6">
    <cc:StateButton.BackgroundBrush>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Offset="0.0" Color="#EFF6FF" />
            <GradientStop Offset="1.0" Color="#FFFEF5" />
        </LinearGradientBrush>
    </cc:StateButton.BackgroundBrush>
</cc:StateButton>

Divider + trailing icon

<cc:StateButton
    CornerRadius="22"
    HorizontalOptions="Fill"
    DividerColor="#3B82F6"
    ImagePosition="End"
    ImageSource="icon_lock.png"
    ShowDivider="True"
    Text="Login"
    TextColor="#3B82F6" />

iOS note: reference rasterised images with .png extension (e.g. icon_lock.png), not .svg. Alternatively use FontImageSource to avoid the bundle lookup entirely:

<cc:StateButton.ImageSource>
    <FontImageSource Glyph="&#x1F512;" Size="18" Color="#3B82F6" />
</cc:StateButton.ImageSource>

Busy / loading state

<cc:StateButton x:Name="SaveBtn" Text="Save" BackgroundColor="#512BD4" TextColor="White" />

SaveBtn.Command = new Command(async () =>
{
    SaveBtn.IsBusy = true;
    await DoWorkAsync();
    SaveBtn.IsBusy = false;
});

Command binding

<cc:StateButton
    Text="Submit"
    Command="{Binding SubmitCommand}"
    CommandParameter="{Binding Item}" />

Properties