Blazonia

🪢 Blazonia

🤔 What is this?

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.

🌰 A Simple Example

<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++;
}

🛫 Start

1. Install Blazonia

dotnet add package Blazonia

1. Create a new Razor component

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

1. 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>

📃 Razor Page Navigation?

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>

1. 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);
    }
}

1. 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();
    }
}

✂ NativeAot and Trimming

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>

⚠️ Notes

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

🗨 Communication

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