UiToolkit.Maui 1.0.0-alpha

UiToolkit MAUI

The .NET UiToolkit is an open-source library that provides a set of controls and styles for building .NET MAUI applications. The toolkit is designed to be a consistent and flexible way to build cross-platform applications with .NET MAUI.

Getting Started

In order to use the UiToolkit you need to call the extension method UseUiToolkit() in your MauiProgram.cs file as follows:

using UiToolkit.Maui;

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

		// Continue initializing your .NET MAUI App here

		return builder.Build();
	}
}

XAML usage

In order to make use of the ui toolkit within XAML you can use this namespace:

xmlns:uikit="https://schemas.gd.com/dotnet/2024/maui"

Controls

* Not all features of the control are available on this Platform.

❌ Not implemented for the moment.

ConditionalView

The ConditionalView control inherit from ContentView.

Credits: This control implementation is heavily inspired by SingletonSean video.

Properties

Usage

<uikit:ConditionalView Condition="{Binding BooleanProperty}">
    <uikit:ConditionalView.True>
		
	</uikit:ConditionalView.True>
	<uikit:ConditionalView.False>
		
    </uikit:ConditionalView.False>
</uikit:ConditionalView>

<br/>It's also possible to declare only a view for the True or False Binding Property:

<uikit:ConditionalView Condition="{Binding BooleanProperty}">
    <uikit:ConditionalView.True>
		
	</uikit:ConditionalView.True>
</uikit:ConditionalView>

<uikit:ConditionalView Condition="{Binding BooleanProperty}">
	<uikit:ConditionalView.False>
		
    </uikit:ConditionalView.False>
</uikit:ConditionalView>

IconPicker

<p align="center"><img src="img/Picker.png"/></p>

IconPicker control inherit from Picker base control.

Properties

<span style="color: #FF0000"><b>Important:</b></span> Border personalization aren't supporter on iOS yet.

Usage

<uikit:IconPicker 
	Source="{FontImage FontFamily='MaterialIconsRound', Glyph={StaticResource IconMD_Expand_more}, Size=1, Color={StaticResource DarkGray}}" 
    TextColor="{StaticResource DarkGray}" TitleColor="{StaticResource DarkGray}"
    HorizontalTextAlignment="Center" Title="Select a monkey"
    CornerRadius="50" StrokeThickness="5" Stroke="{StaticResource DarkGray}"
    ItemsSource="{StaticResource array}">
</uikit:IconPicker>

SegmentedButton

<p align="center"><img src="img/SegmentedButton1.png"/></p> The SegmentedButton control inherit from ContentView.

Properties

<uikit:SegmentedButton 
	HeightRequest="40" WidthRequest="200"
	Stroke="{AppThemeBinding Light={StaticResource Gray600}, Dark='White'}" StrokeThickness="1" 
	SegmentItems="{StaticResource array}"
	SelectedColor="{AppThemeBinding Light='White', Dark={StaticResource Gray600}}"
	SelectedBackground="{AppThemeBinding Light={StaticResource Gray600}, Dark='White'}"
	UnselectedColor="{AppThemeBinding Light={StaticResource Gray600}, Dark='White'}"
	UnselectedBackground="{AppThemeBinding Light='White', Dark={StaticResource Gray600}}"/>

Converters