Xylocopadream.UI.Maui 0.1.18-preview

Xylocopadream.UI

Reusable UI components shared across the Xylocopadream applications, one package per framework:

The look follows JetBrains Rider (New UI): dense layouts, tool windows, an accent color, line or filled icons. An app uses only the package of its framework.

Rule for every app: use these components first; when a reusable piece is missing, add it here rather than in the app.

Install

dotnet add package Xylocopadream.UI.Avalonia
dotnet add package Xylocopadream.UI.Maui --prerelease

The MAUI package is a preview (0.x.y-preview) as long as it is built on a preview of MAUI.

Publish a new version

.\publish.ps1 -Bump              # local feed only
.\publish.ps1 -Bump -NuGetOrg    # local feed, then nuget.org

Increments the patch number of <Version> in Directory.Build.props, then packs every project of src/ into the local feed %UserProfile%\nuget_local (source Local of the user NuGet.Config). NuGet caches packages by version and a version on nuget.org can never be replaced, so the script refuses a version already published. -NuGetOrg then pushes the packages to nuget.org with the API key of the NUGET_API_KEY environment variable (never stored in the repository). Apps then update their PackageReference version.

Xylocopadream.UI.Avalonia

Setup

<Application xmlns:xd="https://github.com/Zergoma/Xylocopadream.UI"
             RequestedThemeVariant="Dark">
    <Application.Styles>
        <xd:XylocopadreamTheme />   
    </Application.Styles>
</Application>

Add .WithInterFont() (package Avalonia.Fonts.Inter) in Program.BuildAvaloniaApp for the intended typography. All types are in the xd: XAML namespace.

Colors (Themes/Colors.axaml)

Brushes for app layouts, used with {DynamicResource ...}:

The same file overrides Fluent's resources (accent color, buttons, text boxes, tree rows of 24 px, menus, tooltips, sliders), so standard controls already look right.

Icons (Themes/Icons.axaml)

16 × 16 stroke geometries: <Path Classes="icon" Data="{StaticResource Xd.Icon.Folder}" /> (add class folder for the blue folder color). Scale with a Viewbox for large icons.

Archive, Audio, Back, ChevronRight, Close, Delete, Document, Export, File, Folder, FolderNew, Forward, Hide, Image, Import, ImportFolder, Lock, Move, Refresh, Rename, Search, Shield, Tag, Thumbnails, Up, Video.

XdIcons.All lists them (name, key, geometry). New icons: draw strokes on half pixels inside the 16 px grid, in the same style; the tests check the grid.

Style classes (Themes/Controls.axaml)

Controls

Dialogs

IDialogService / DialogService(() => ownerWindow): PromptAsync, ConfirmAsync (optionally destructive), ShowErrorAsync, PickFolderAsync, PickFilesAsync, SaveFileAsync. Derive from DialogService to add app dialogs with ShowDialogAsync<T>(window). PromptWindow is the underlying window.

Helpers

• XdConverters: Initials, NameColor, PathName, BoldIfTrue.
• Monogram.Of(name) ("Mon Coffre" → "MC"), Monogram.NameOfPath(path).
• NamedColors.For(name): stable color per name, same palette as chips and badges.

Xylocopadream.UI.Maui

Controls written in C# (no XAML to load), for Windows (net11.0-windows10.0.19041.0); the net11.0 target only serves the tests.

Setup

public partial class App : Application
{
    protected override Window CreateWindow(IActivationState? activationState)
    {
        XdTheme.Apply(this, Color.FromArgb("#2F6FEB"));   // colors of the controls, before the first page
        return new Window(new MainPage());
    }
}

<ContentPage xmlns:xd="https://github.com/Zergoma/Xylocopadream.UI" ...>

All types are in the xd: XAML namespace. XdTheme.SetAccent(color) changes the accent color of the whole app at once.

Colors (XdTheme, XdKeys)

XdTheme writes the colors in the application resources and writes them again at each switch between light and dark: use them with {DynamicResource Xd.Accent} or SetDynamicResource(..., XdKeys.Accent).

The accent variants are lighter on the dark theme. XdTheme.Light and XdTheme.Dark (XdPalette records) can be replaced to adapt the surfaces to an app.

On MAUI a dynamic resource set by a trigger is not taken back, and a local value hides it. The controls draw their states with stacked layers, each colored once, only shown or hidden: do the same in app templates.

Icons (XdIcons)

Filled 24 × 24 geometries (Google Material Icons, Apache 2.0): <Path Data="{x:Static xd:XdIcons.Home}" Aspect="Uniform" />.

Previous, Next, Block, Shuffle, Sun, Moon, Monitor, Play, Home, List, Spellcheck, Upload, Keyboard, BarChart, Palette, Person, Group, Check, Rename, Delete, Add, Up, Down, Trophy. XdIcons.All lists them with their names.

Controls

Helpers

• XdColorMath: NormalizeHex, ToHex, HexToHsv, HsvToHex.
• XdAccentPalette: the accent variants of a theme, IsLight, RelativeLuminance (WCAG).

Repository

• src/ — the packages.
• samples/Xylocopadream.UI.Avalonia.Gallery — every Avalonia component on one page: run it to browse them.
• samples/Xylocopadream.UI.Maui.Gallery — the same for MAUI (Windows), with light / dark and accent switches.
• tests/ — Avalonia headless tests, which render the gallery to bin/Debug/net10.0/screens/; MAUI tests of the colors, icons and color math.

The SDK is pinned by global.json (.NET 11 preview, for MAUI 11); the Avalonia projects still target .NET 10.