DOCSEARCHbyAlgolia
Submit Docs

Semi Avalonia

repository·main·Indexed 23 days ago

https://github.com/irihitech/semi.avalonia

An Avalonia UI theme inspired by Semi Design. It provides a polished visual language for Avalonia applications, including a core theme and extension packages for components such as ColorPicker, DataGrid, TreeDataGrid, Dock, Tabalonia, and AvaloniaEdit. The documentation also covers setting up Linux environments for Direct Rendering Manager (DRM) running, including dependencies, AOT publishing, and the use of StartLinuxDrm.

Tokens
5.2K
Snippets
23
Records
27
Agent score
79%

What's inside Semi.Avalonia

  3. Set up the Linux DRM running environment

    main

    To run Semi Avalonia using Direct Rendering Manager (DRM) on Linux (tested on Ubuntu 20.04 x64 and Orange Pi Zero2 arm64), follow these steps to prepare the system dependencies and testing tools.

    # 1. Update and install required Linux libraries
sudo apt update
sudo apt upgrade
sudo reboot
sudo apt-get install libgbm1 libgl1-mesa-dri libegl1-mesa libinput10

# 2. Install and verify the environment with kmscube
# If a colored cube appears, the environment is correctly installed
sudo apt-get install kmscube
sudo kmscube

# 3. Install .NET Runtime (refer to official Microsoft docs)

  4. Configure Semi.Avalonia theme in Avalonia

    main

    To apply the Semi Design styles to your application, include the SemiTheme in your App.axaml (or equivalent application styles file). You must define the semi XML namespace pointing to https://irihi.tech/semi.

    <Application
    ...
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
    </Application.Styles>
</Application>

  6. Configure Semi DataGrid theme in Avalonia

    main

    To apply the Semi Design theme to your DataGrid, include <semi:DataGridSemiTheme /> within your Application.Styles. You must also have the main <semi:SemiTheme /> included in your styles and define the https://irihi.tech/semi XML namespace.

    <Application
    ...
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
        <semi:DataGridSemiTheme />
    </Application.Styles>
</Application>

  7. Configure Semi.Avalonia.ColorPicker in your Avalonia application

    main

    To use the ColorPicker theme, you must first ensure the main Semi.Avalonia theme is installed. Then, include semi:ColorPickerSemiTheme within your Application.Styles in your App.axaml file. Ensure you have the semi XML namespace defined.

    <Application
    ...
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
        <semi:ColorPickerSemiTheme />
    </Application.Styles>
</Application>

  8. Install and use Semi Avalonia extension packages

    main

    Certain complex controls are distributed as separate packages. If you need these specific components, install their respective NuGet packages and add their specific theme elements to your Application.Styles.

    Available Extension Packages:

    • Semi.Avalonia.ColorPicker
    • Semi.Avalonia.DataGrid
    • Semi.Avalonia.TreeDataGrid
    • Semi.Avalonia.Dock
    • Semi.Avalonia.Tabalonia
    • Semi.Avalonia.AvaloniaEdit

    Note: Dock, Tabalonia, and AvaloniaEdit are distributed for free via NuGet but are not open source. Please review their licenses before use.

    dotnet add package Semi.Avalonia.ColorPicker
dotnet add package Semi.Avalonia.DataGrid
dotnet add package Semi.Avalonia.TreeDataGrid
dotnet add package Semi.Avalonia.Dock
dotnet add package Semi.Avalonia.Tabalonia
dotnet add package Semi.Avalonia.AvaloniaEdit
    <Application.Styles>
    <semi:ColorPickerSemiTheme />
    <semi:DataGridSemiTheme />
    <semi:TreeDataGridSemiTheme />
    <semi:DockSemiTheme />
    <semi:TabaloniaSemiTheme />
    <semi:AvaloniaEditSemiTheme />
</Application.Styles>

  9. Publish the application for Linux DRM

    main

    When publishing your application for Linux, use the dotnet publish command with the appropriate runtime identifier (-r linux-x64). For single-file deployment, include native libraries for self-extraction.

    If you are using AOT (Ahead-of-Time) compilation, you must add the following properties to your .csproj file:

    <!-- Required for AOT publishing in .csproj -->
<PropertyGroup>
    <PublishAot>true</PublishAot>
    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
</PropertyGroup>
    # Standard single-file publish
dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true

# AOT publish
dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64

# Run the published application with DRM flag
sudo ./Semi.Avalonia.Demo.Drm --drm

  10. Install and use additional Semi.Avalonia packages

    main

    Available additional packages:

    • Semi.Avalonia.ColorPicker (use <semi:ColorPickerSemiTheme />)
    • Semi.Avalonia.DataGrid (use <semi:DataGridSemiTheme />)
    • Semi.Avalonia.TreeDataGrid (use <semi:TreeDataGridSemiTheme />)
    • Semi.Avalonia.Dock (use <semi:DockSemiTheme />)
    • Semi.Avalonia.Tabalonia (use <semi:TabaloniaSemiTheme />)
    • Semi.Avalonia.AvaloniaEdit (use <semi:AvaloniaEditSemiTheme />)
    dotnet add package Semi.Avalonia.ColorPicker
dotnet add package Semi.Avalonia.DataGrid
dotnet add package Semi.Avalonia.TreeDataGrid
dotnet add package Semi.Avalonia.Dock
dotnet add package Semi.Avalonia.Tabalonia
dotnet add package Semi.Avalonia.AvaloniaEdit

  11. Publish Avalonia app for Linux (Single File & AOT)

    main

    When deploying to a Linux environment for DRM, you should publish the application as a single file. For improved performance, you can also enable Ahead-of-Time (AOT) compilation.

    Standard Single File Publish

    dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64 --sc /p:PublishSingleFile=true -p:IncludeNativeLibrariesForSelfExtract=true

    AOT Publishing

    To enable AOT, add the following properties to your .csproj file:

    <PropertyGroup>
    <PublishAot>true</PublishAot>
    <IncludeNativeLibrariesForSelfExtract>true</IncludeNativeLibrariesForSelfExtract>
</PropertyGroup>

    Then run the publish command:

    dotnet publish demo/Semi.Avalonia.Demo.Drm/Semi.Avalonia.Demo.Drm.csproj -c Release -r linux-x64

    Running the App

    Run the published binary with sudo and the --drm flag:

    sudo ./Semi.Avalonia.Demo.Drm --drm

  12. Configure the Semi Theme in Avalonia

    main

    After installing the package, you must reference the Semi theme in your App.xaml (or equivalent Application styles file). You can specify the Locale property on the SemiTheme element (e.g., Locale="zh-CN").

    Ensure you include the xmlns:semi="https://irihi.tech/semi" namespace declaration.

    <Application
    ...
    xmlns:semi="https://irihi.tech/semi">
    <Application.Styles>
        <semi:SemiTheme Locale="zh-CN" />
    </Application.Styles>
</Application>