Blazonia enables developers to use the Blazor syntax to build Avalonia applications. Compared to Avalonia’s original XAML syntax, Blazonia’s Blazor-based approach is more concise and straightforward, allowing you to develop pages using a single file. It is particularly suitable for small to medium-sized client applications.

✨ Note

• 🚫 After using Blazonia, there will be no HTML code or WebView components involved.
• 🤩 Fully utilizes native Avalonia controls

Thanks to Avalonia's cross-platform capabilities, Blazonia enables developers to rapidly build beautiful, pixel-perfect applications for 💻 desktop, 📱 mobile, and 🌐 web platforms.

<StackPanel>
    <Label FontSize="30">You pressed @_count times </Label>
    <CheckBox @bind-IsChecked="_showButton">Button visible</CheckBox>
    @if (_showButton == true)
    {
        <Button OnClick="OnButtonClick">+1</Button>
    }
</StackPanel>

@code {

    int _count;
    
    bool? _showButton = true;
    
    void OnButtonClick() => _count++;
}

1. Install Blazonia

dotnet add package Blazonia

2. Create a new Razor component

<!-- src/RazorPages/Hello.razor -->
<StackPanel>
    <TextBlock FontSize="30">Hello World</TextBlock>
</StackPanel>

3. Use Blazonia controls in axaml

<UserControl 
            ...
			 xmlns:local="clr-namespace:Blazonia.Controls;assembly=Blazonia"
			 xmlns:pages="clr-namespace:YourProject.RazorPages"
             ...
             >
	<local:BlazoniaControl x:TypeArguments="pages:Hello"/>
</UserControl>

1. Replace BlazoniaControl with BlazoniaNavigationControl control

<UserControl 
            ...
			 xmlns:local="clr-namespace:Blazonia.Controls;assembly=Blazonia"
			 xmlns:pages="clr-namespace:YourProject.RazorPages"
             ...
             >
	<local:BlazoniaNavigationControl x:TypeArguments="pages:Page1"/>
</UserControl>

2. Inject the INavigation object for page navigation

<!-- src/RazorPages/Page1.razor -->
@inject INavigation Navigation

<StackPanel>
    <TextBlock FontSize="30">Page 1</TextBlock>
    <Button OnClick="@OnButtonClick">Go to Page2</Button>
</StackPanel>

@code {
    async Task OnButtonClick()
    {
        await Navigation.NavigateToAsync("/page2", null);
    }
}

3. Use the @page attribute to mark the url

<!-- src/RazorPages/Page2.razor -->
@page "/page2"
@inject INavigation Navigation

<StackPanel>
    <TextBlock FontSize="30">Page 2</TextBlock>
    <Button OnClick="@OnButtonClick">Back</Button>
</StackPanel>

@code {
    async Task OnButtonClick()
    {
        await Navigation.PopAsync();
    }
}

Blazonia supports NativeAot and trimming features, but you need to add the TrimmerRootDescriptor property to your project to let the trimmer preserve all metadata of the Razor components

<!--root.xml-->
<linker>
	<assembly fullname="YourProject">
		<namespace fullname="Razor Component NameSpace" preserve="all" />
	</assembly>
</linker>

<!-- your project -->
<Project Sdk="Microsoft.NET.Sdk">
     ...
	<ItemGroup>
		<TrimmerRootDescriptor Include="..\root.xml" />
	</ItemGroup>
</Project>

Please use Rider or VS Code to develop the project, as the code hints for razor files in Visual Studio 2022 may fail.

1. Discord Server: https://discord.gg/qtDKFgRAcg
2. QQ Group: 1063998889