DOCSEARCHbyAlgolia
Submit Docs

UraniumUI Documentation

repository·develop·Indexed 23 days ago

https://github.com/enisn/uraniumui

An open-source presentation framework for .NET MAUI providing production-ready Material Design components and advanced UI patterns. It features model-driven editors via AutoFormView, data-heavy views like DataGrid, TreeView, and TabView, and app surfaces such as BottomSheetView and IDialogService. UraniumUI integrates with the standard MAUI/MVVM workflow and offers modular packages for Material themes, DataAnnotations validation, various icon sets, and cross-platform blur effects.

Tokens
67.4K
Snippets
200
Records
273
Agent score
80%

What's inside UraniumUI

  1. Overview of UraniumUI for .NET MAUI

    develop

    UraniumUI is a modern, extensible, and customizable presentation framework for .NET MAUI. It is designed to help developers build production-ready app interfaces by providing a layer of high-level controls and infrastructure on top of native .NET MAUI.

    Key features include:

    • Dynamic Form Generation: Using AutoFormView to reduce boilerplate.
    • Validation Infrastructure: Support for Data Annotations and InputKit.
    • Theming & Styling: A customizable Color System, Dark/Light mode support, and Material themes.
    • Dialogs: Integration with Mopups and CommunityToolkit.
    • Icon Support: Built-in support for Material Symbols, Fluent Icons, and FontAwesome.
    • Accessibility: Built-in best practices for keyboard navigation, focus states, and screen readers.

    Because it is built on top of .NET MAUI, you can use UraniumUI as a complete presentation layer or use native MAUI APIs as an escape hatch for custom behavior.

  3. Accessibility best practices for BottomSheet

    develop

    When implementing a BottomSheet, follow these accessibility guidelines:

    • Content Structure: Provide a visible heading inside the sheet. Use focusable UraniumUI controls (like ButtonView) for actions instead of passive layouts with TapGestureRecognizer.
    • Focus Management: When DisablePageWhenOpened="True", ensure keyboard focus cannot interact with the dimmed background content.
    • Dismissal: If CloseOnTapOutside="True", always provide an explicit 'Close' or 'Cancel' button inside the sheet so users have a clear escape path.
    • Custom Headers: If the header toggles the sheet, use ButtonView or StatefulContentView. Use SemanticProperties.Description or SemanticProperties.Hint to explain if the interaction expands or collapses the sheet.

  5. How UraniumContentPage Attachments work

    develop

    Attachments are a feature of UraniumContentPage that allows you to overlay UI elements (like Floating Action Buttons) on top of your page content.

    Key characteristics:

    • Layering: Attachments are not part of the main content layer; they are rendered automatically over the page.
    • Ordering: Multiple attachments are rendered in the order they are added. The last attachment added will appear at the front (top-most layer).
    • Positioning: Use LayoutOptions or margins to align attachments.
    • Implementation: Any view that implements the IPageAttachment interface can be used as an attachment.

  6. Configure CalendarView Selection Modes

    develop

    The SelectionMode property determines how users interact with the calendar. It supports three modes:

    • Single (Default): Uses SelectedDate (DateTime?) for a single selection.
    • Multiple: Uses SelectedDates (IList<DateTime>) to allow selecting several individual days. Tapping a day toggles its selection.
    • Range: Uses RangeStartDate (DateTime?) and RangeEndDate (DateTime?) to select a continuous period. The first tap sets the start, and the second tap sets the end (automatically normalizing the order if the second tap is earlier than the first).
    <!-- Multiple Selection Example -->
<uranium:CalendarView
    SelectionMode="Multiple"
    SelectedDates="{Binding SelectedDates}" />

<!-- Range Selection Example -->
<uranium:CalendarView
    SelectionMode="Range"
    RangeStartDate="{Binding StartDate}"
    RangeEndDate="{Binding EndDate}" />

  7. Customize Tab headers with TabHeaderItemTemplate

    develop

    Use the TabHeaderItemTemplate property on TabView to provide a custom DataTemplate for all tab headers.

    Binding Context Behavior

    • When using ItemsSource: The binding context is the current source item. Use TabView.IsHeaderSelected to style the selected header.
    • When using direct <material:TabItem> declarations: The binding context is the TabItem itself.

    Available Bindings for direct TabItem headers

    When declaring tabs directly, the following properties are available in your DataTemplate:

    • Command: Required for functionality. The command triggered when the user taps the header.
    • Title: The string title of the tab.
    • Data: Custom data bound to the tab header.
    • IsSelected: A boolean indicating if the tab is currently selected.

    Accessibility Best Practices

    For accessible custom headers, use focusable controls like Button, ButtonView, CheckBox, or StatefulContentView and bind their command to Command. Avoid using passive layouts with only TapGestureRecognizer.

    <material:TabView ItemsSource="{Binding Tabs}">
    <material:TabView.TabHeaderItemTemplate>
        <DataTemplate x:DataType="vm:BrowserTab">
            <Grid Padding="12,8">
                <Label Text="{Binding Title}" />
                <Grid.Triggers>
                    <DataTrigger TargetType="Grid"
                                 Binding="{Binding Source={RelativeSource Self}, Path=(material:TabView.IsHeaderSelected)}"
                                 Value="True">
                        <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                    </DataTrigger>
                </Grid.Triggers>
            </Grid>
        </DataTemplate>
    </material:TabView.TabHeaderItemTemplate>
</material:TabView>

  8. How UraniumUI works with .NET MAUI

    develop

    UraniumUI is a presentation layer for .NET MAUI that adds Material-styled controls and advanced UI patterns without replacing the standard MAUI development model.

    It does not require a proprietary base ViewModel, custom navigation model, or a new UI DSL. You continue to use standard XAML, ContentPage, Shell, bindings, styles, resources, handlers, dependency injection, MVVM, and platform APIs. UraniumUI attaches to the existing MAUI model to provide:

    • Rapid Form Building: AutoFormView for model-driven editors and FormView for validation and state management.
    • Data-Heavy Views: DataGrid, TreeView, TabView, and specialized selection controls.
    • App Surfaces: IDialogService, BottomSheetView, and BackdropView for overlays and dialogs.
    • Standardized Presentation: Material color/style tokens, elevation, and blur effects.
    • Accessibility: Focus-aware inputs, keyboard navigation, and semantic hints.

  9. Use StatefulContentView for interactive custom controls

    develop

    Use StatefulContentView when you need to create custom interactive elements like buttons, checkboxes, or radio buttons. Unlike a passive layout with a TapGestureRecognizer, StatefulContentView provides built-in support for Normal, Pressed, and PointerOver states. It is defined in the UraniumUI.Views namespace.

    To use it in XAML, first declare the UraniumUI namespace:

    xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
    <uranium:StatefulContentView LongPressCommand="{Binding DoSomethingCommand}">
    <Border Padding="20" BackgroundColor="{StaticResource Primary}" Stroke="{StaticResource Tertiary}" StrokeShape="{RoundRectangle CornerRadius=5}">
        <Label Text="This is a stateful view" TextColor="{StaticResource OnPrimary}" />
    </Border>
</uranium:StatefulContentView>

  10. Accessibility requirements for custom TabView headers

    develop

    If you implement a custom tab header template, you are responsible for maintaining accessibility. The default template uses MAUI Button controls which handle focus and activation automatically. For custom templates, ensure:

    • Each tab can receive keyboard focus.
    • Enter or Space selects the focused tab.
    • Selected and focused states are visually distinct.
    • The header text or a semantic description announces the tab purpose.
    • Icon-only tabs use SemanticProperties.Description to provide context.
    • The selected state is not communicated by color alone.

  11. Implement Lazy-Loading in TreeView

    develop

    TreeView supports lazy-loading, where children are only loaded when a node is expanded. This is ideal for large datasets like file systems or database-backed hierarchies.

    Configuration

    To enable lazy-loading, configure these properties on the TreeView:

    • LoadChildrenCommand: The ICommand that executes when a node is expanded. It receives the expanded node item as a parameter.
    • IsLeafPropertyName: The name of the property in your data model that indicates if a node is a leaf. The default is IsLeaf.

    Implementation Pattern

    1. Define a property in your model (e.g., IsLeaf) to indicate if a node has children.
    2. Create a command that fetches children and updates the node's children collection.
    3. Bind the LoadChildrenCommand and IsLeafPropertyName in your XAML.
    <material:TreeView 
        ItemsSource="{Binding Nodes}" 
        IsLeafPropertyName="IsLeaf"
        LoadChildrenCommand="{Binding LoadChildrenCommand}">
    <!-- ItemTemplate definition here -->
</material:TreeView>