Skip to content

Routing and Components

UI Routing and Layout Specs

  • The Shell: MainWindow.axaml acts solely as an application shell and router. It SHALL NOT hardcode specific page content.
  • Routing: The Shell MUST use a ContentControl (or equivalent router) to dynamically swap active /Views based on the application state.
  • Theming: Components MUST use DynamicResource bindings for all structural colors and fonts to allow instant, global theme swapping via the injection of active ResourceDictionaries.

Code Example: The Shell

<Window xmlns:components="using:Stuck.Prototype.Components"
        xmlns:views="using:Stuck.Prototype.Views" ...>

    <Grid RowDefinitions="45, *">

        <!-- Global component: Always visible on every page -->
        <components:TitleBar Grid.Row="0" />

        <!-- The Router: Content swaps between Bookshelf, BookPage, WritingSpace -->
        <ContentControl Grid.Row="1" Content="{Binding CurrentPage}">

            <!-- Fallback/default while prototyping -->
            <views:WritingSpaceView />

        </ContentControl>

    </Grid>
</Window>

Components and Views

We separate our full pages/screens (Views) from the reusable Lego bricks (Components).

For example, WritingSpaceView.axaml is a full page that just snaps components together:

<UserControl xmlns:components="using:Stuck.Prototype.Components" ...>

    <Grid RowDefinitions="*, Auto">
        <!-- Reusable sub-parts -->
        <components:ChapterEditor Grid.Row="0" />
        <components:StatusBar Grid.Row="1" />
    </Grid>

</UserControl>