Skip to content

5. UI Architecture & Patterns

This section defines the core architectural patterns and folder structures for the Avalonia user interface.

File Hierarchy

prototype/
├── Styles/                # Global UI variables and structural rules
│   ├── ThemeDictionaries.axaml  # Dynamic Light/Dark variables
│   ├── Themes/                  # Standalone theme files loaded into slots
│   └── DynamicResource.axaml    # Styles pointing to those variables
├── Behaviors/             # Attached Properties for UI event routing
│   └── EditorNavigation.cs
├── Services/              # UI computation and math logic (e.g. TranslatePoint)
│   └── UI/
│       └── SpatialNavigationService.cs
├── Components/            # Reusable XAML sub-parts / Lego bricks
│   ├── TitleBar.axaml
│   ├── StatusBar.axaml
│   └── ChapterEditor.axaml
└── Views/                 # Your actual top-level screens
    ├── BookshelfView.axaml
    ├── BookPageView.axaml
    └── WritingSpaceView.axaml

Architectural Pillars

Detailed specifications for each aspect of the UI architecture have been split into the following documents:

  • Routing & Components: The separation of top-level Views, reusable Components, and the MainWindow router.
  • Theming System: The strict separation between Resources (variables) and Styles (rules) for dynamic theme swapping.
  • Command & UI Binding: How the UI dynamically generates context menus and shortcuts purely by querying the Command Registry.
  • Localization (Locales): Prohibiting hardcoded strings and using the i18n:Localize markup extension with intents.
  • Interaction Services: The 3-layer architecture for complex spatial UX math (Behaviors, Translators, and Adapters).
  • Chapter Scrolling: UI patterns for preserving virtualization while keeping seamless text flow.