AvaloniaMauiHybrid
AvaloniaMauiHybrid copied to clipboard
Brings templated controls, pixel perfect rendering, animations, styling and composition to Maui
Avalonia.Maui Hybrid
This repository contains source code for the integration of Avalonia and MAUI frameworks, supporting the following scenarios:
- Embedding Avalonia controls inside MAUI pages.
- Embedding MAUI controls inside Avalonia views.
- Calling MAUI Essentials APIs from Avalonia.
Supported OS: iOS and Android only.
- For Windows support, please refer to the open issue #7.
- For macOS support, please refer to the open issue #10.
- Note that MAUI doesn't support the Browser platform. For Blazor integration, see Avalonia.Browser.Blazor.
- Future support for Tizen backend will be possible with Avalonia 11.1.
- You can make an solution that compiles avalonia maui hybrid for mobile targets and compiles without maui hybrid for other platforms. See https://github.com/AvaloniaUI/AvaloniaMauiHybrid/issues/12
Quick Start
Embedding Avalonia Controls Inside MAUI
Demo project to try: https://github.com/AvaloniaUI/AvaloniaMauiHybrid/tree/main/MauiSample
- Start with a normal MAUI project.
- Install https://www.nuget.org/packages/Avalonia.Maui nuget package to your project.
- You need to have both Avalonia and MAUI Application classes created. You can copy AvaloniaApp.axaml + AvaloniaApp.axaml.cs or reuse your own application with properties.
- Update your MAUI app builder to include
UseAvalonia
call:builder .UseMauiApp<App>() // MAUI Application .UseAvalonia<AvaloniaApp>() // Avalonia Application
- If you need to modify Avalonia application builder, you can pass a lambda to the
UseAvalonia
method. - Now, you can use Avalonia controls from the MAUI XAML:
Don't forget to add Avalonia xmlns namespaces to your MAUI XAML file<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start"> <maui:AvaloniaView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <ava:Button Content="Avalonia Button"/> </maui:AvaloniaView> <Button Text="Maui Button"/> </StackLayout>
xmlns:maui="clr-namespace:Avalonia.Maui.Controls;assembly=Avalonia.Maui"
andxmlns:ava="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls"
, if IDE didn't include it automatically.
Embedding MAUI controls inside of the Avalonia app
Demo project to try: https://github.com/AvaloniaUI/AvaloniaMauiHybrid/tree/main/AvaloniaSample
- Start with avalonia.xplat template (see https://github.com/AvaloniaUI/avalonia-dotnet-templates). We will only use Android, iOS and shared projects.
- Install https://www.nuget.org/packages/Avalonia.Maui nuget package to your project.
- You need to have both Avalonia and MAUI Application classes created. For MAUI Application, you need to inherit Microsoft.Maui.Controls.Application, for example - MauiApplication.cs.
- Add
<UseMaui>true</UseMaui>
to every project (shared and platform-specific) from where you will use MAUI APIs. For example, here and here. - Update both
MainActivity
(Android project) andAppDelegate
(iOS project) app builders to include.UseMaui()
protected override AppBuilder CustomizeAppBuilder(AppBuilder builder) { return base.CustomizeAppBuilder(builder) .UseMaui<AvaloniaSample.Maui.MauiApplication>(this); }
- If you need to modify MAUI application builder, you can pass a lambda to the
UseMaui
method. For example, we enable third-party MAUI controls this way. - Not, you can use MAUI controls from the Avalonia XAML:
Don't forget about xmlns namespaces here as well:<UniformGrid Columns="2" Height="40"> <Button Content="Avalonia Button" /> <controls:MauiControlHost> <mauiControls:Button Text="MAUI Button" /> </controls:MauiControlHost> </UniformGrid>
xmlns:controls="using:Avalonia.Maui.Controls"
andxmlns:mauiControls="using:Microsoft.Maui.Controls"
- If you have "MaterialComponents" or other theme related exception on Android, please visit https://github.com/AvaloniaUI/AvaloniaMauiHybrid/issues/18.
Using MAUI Essentials inside of the Avalonia app
- Follow the same steps as in Embedding MAUI controls inside of the Avalonia app except for the last one.
- Depending on MAUI version, you might need to add
<UseMauiEssentials>true</UseMauiEssentials>
to your csproj file as well. - Now you can call Essentials API from Avalonia code:
private async void Button_OnClick(object? sender, RoutedEventArgs e)
{
var location = await Geolocation.GetLocationAsync();
Console.WriteLine(location.ToString());
}
Don't forget about enabling specific permissions. In the case of Geolocation class, you can follow this documentation from Microsoft.