DOCSEARCHbyAlgolia
Submit Docs

Maui.FreakyControls Documentation

repository·master·Indexed 19 days ago

https://github.com/freakyali/maui.freakycontrols

A free, open-source UI control library for .NET MAUI providing enhanced visual components and effects. It includes specialized controls for text and input (FreakyAutoCompleteView, FreakyTextInputLayout), selection (FreakyCheckbox, FreakyChip, FreakySwitch), media (FreakyCircularImage, FreakySvgImageView), and pickers (FreakyDatePicker, FreakyJumpList). Supports iOS 14.0+, macOS 14.0+, Android API 23+, and Windows 10.0.17763+.

Tokens
15.6K
Snippets
40
Records
73
Agent score
64%

What's inside Maui.FreakyControls

  1. Overview of FreakyControls UI components

    master

    FreakyControls provides a variety of specialized UI components for .NET MAUI. Key controls include:

    • Text & Input: FreakyAutoCompleteView (suggestions), FreakyTextInputLayout (Material-style floating labels), FreakyEntry/FreakyEditor (with copy/paste controls), FreakyCodeView (inline OTP), and FreakyPinCodeControl (OTP with custom keyboard).
    • Selection: FreakyCheckbox, FreakyRadioButton/FreakyRadioGroup, FreakyChip/FreakyChipGroup, FreakySwitch, and FreakySwipeButton (swipe-to-confirm).
    • Media & Visuals: FreakyCircularImage, FreakySvgImageView (with tint/tap support), FreakyImage (with load completion events), and FreakyZoomableView (pinch-to-zoom).
    • Pickers & Lists: FreakyDatePicker, FreakyTimePicker, FreakyPicker, FreakyJumpList (alphabetical jump bar), and FreakyButton (with loading states).
    • Specialty: FreakySignatureCanvasView (signature pad).

  3. How FrontImageSource loading works

    master

    The FrontImageSource is loaded asynchronously. To prevent visual glitches:

    • If FrontImageSource is changed while a previous load is in progress, the earlier load is automatically cancelled.
    • FrontColor is used as a placeholder until the image finishes loading.
    • FrontImageSource takes priority over FrontColor when both are set.

  6. Initialize FreakyControls in MauiProgram

    master

    You must call InitializeFreakyControls on the MauiAppBuilder during application startup. This method accepts two boolean flags to enable specific features:

    • useSkiaSharp: Required if you intend to use FreakyCheckbox, FreakyRadioButton, or FreakySvgImageView.
    • useFreakyEffects: Required to enable touch and ripple effects across the controls.

    Ensure you include the Maui.FreakyControls.Extensions namespace.

    using Maui.FreakyControls.Extensions;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>();

        // useSkiaSharp: required for FreakyCheckbox, FreakyRadioButton, FreakySvgImageView
        // useFreakyEffects: required for touch/ripple effects
        builder.InitializeFreakyControls(useSkiaSharp: true, useFreakyEffects: true);

        return builder.Build();
    }
}

  7. Use FreakyPicker in XAML

    master

    To use FreakyPicker, first declare the Maui.FreakyControls namespace in your XAML file. FreakyPicker extends the standard MAUI Picker by adding support for a side icon and a tap command.

    Supported platforms: iOS, macOS, Android, and Windows.

    xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"

<freaky:FreakyPicker
    Title="Select country"
    ItemsSource="{Binding Countries}"
    SelectedItem="{Binding SelectedCountry}"
    ImageSource="chevron.png"
    ImageAlignment="Right" />

  8. Use FreakyZoomableView in XAML

    master

    To add pinch-to-zoom and pan gesture support to a child view, wrap the target view inside a FreakyZoomableView. You must include the Maui.FreakyControls namespace in your XAML file.

    Supported platforms: iOS, macOS, Android, and Windows.

    xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"

<freaky:FreakyZoomableView
    MinScale="1"
    MaxScale="4"
    DoubleTapToZoom="true"
    DoubleTapScaleFactor="4">
    <Image Source="map.png" />
</freaky:FreakyZoomableView>

  9. Use FreakyImage in XAML

    master

    To use FreakyImage in your XAML files, first declare the Maui.FreakyControls namespace. FreakyImage behaves like a standard MAUI Image but provides an ImageLoaded event that fires once the image has finished rendering. This is useful for performing actions (like animations or layout adjustments) only after the image asset is ready.

    xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"

<freaky:FreakyImage
    Source="hero.png"
    ImageLoaded="OnImageLoaded" />

  10. Use FreakyEntry in XAML

    master

    To use FreakyEntry, first declare the Maui.FreakyControls namespace in your XAML file. FreakyEntry is an extension of the standard MAUI Entry that adds support for a side icon, a tap command for that icon, and configurable copy/paste controls. It is compatible with iOS, macOS, Android, and Windows.

    <!xml xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls">

<freaky:FreakyEntry
    Text="{Binding Username}"
    Placeholder="Enter username"
    ImageSource="user.png"
    ImageAlignment="Left"
    ImageCommand="{Binding ClearCommand}"
    AllowCopyPaste="true" />

  11. Use FreakyTextInputLayout in XAML

    master

    To use the FreakyTextInputLayout in your MAUI application, first declare the Maui.FreakyControls namespace in your XAML file. This control provides a Material Design-inspired text input with an animated floating label and configurable border styles (None, Underline, or Outline).

    xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"

<freaky:FreakyTextInputLayout
    Title="Email address"
    Text="{Binding Email, Mode=TwoWay}"
    BorderType="Outline"
    BorderStroke="Gray"
    BorderCornerRadius="8"
    TitleColor="Gray"
    TextColor="Black"
    ImageSource="email.png"
    AllowCopyPaste="true" />

  12. Use FreakyChip and FreakyChipGroup in XAML

    master

    The FreakyChip is a toggleable chip control. You can use it as a standalone control or wrap multiple chips in a FreakyChipGroup to achieve single-selection (radio-style) behavior where only one chip in the group can be selected at a time.

    To use these controls, ensure you have the Maui.FreakyControls namespace mapped in your XAML file.

    xmlns:freaky="clr-namespace:Maui.FreakyControls;assembly=Maui.FreakyControls"

<!-- Standalone chip -->
<freaky:FreakyChip
    Text="Featured"
    IsSelected="{Binding IsFeatured, Mode=TwoWay}"
    SelectedBackgroundColor="DodgerBlue"
    SelectedTextColor="White" />

<!-- Group — single selection -->
<freaky:FreakyChipGroup SelectedIndex="{Binding SelectedTab, Mode=TwoWay}">
    <freaky:FreakyChip Text="All" Name="all" />
    <freaky:FreakyChip Text="Active" Name="active" />
    <freaky:FreakyChip Text="Done" Name="done" />
</freaky:FreakyChipGroup>