3.5 KiB

Raw Permalink Blame History

TodoApp Sample

A complete task management application demonstrating OpenMaui Linux capabilities with real-world XAML patterns.

Features

NavigationPage - Full page navigation with back button support
CollectionView - Scrollable list with data binding and selection
XAML Data Binding - Value converters for dynamic styling
DisplayAlert Dialogs - Confirmation dialogs for delete actions
Grid Layouts - Complex layouts with star sizing for expanding content
Entry & Editor - Single and multi-line text input
Border with RoundRectangle - Modern card-style UI
ToolbarItems - Navigation bar actions

Screenshots

The app consists of three pages:

TodoListPage - Shows all tasks with completion status indicators
NewTodoPage - Create a new task with title and notes
TodoDetailPage - View/edit task details, mark complete, or delete

Architecture

TodoApp/
├── App.cs                    # Application entry with NavigationPage
├── Program.cs                # Linux platform bootstrap
├── MauiProgram.cs            # MAUI app builder
├── TodoItem.cs               # Data model
├── TodoService.cs            # In-memory data store
├── TodoListPage.xaml(.cs)    # Main list view
├── NewTodoPage.xaml(.cs)     # Create task page
└── TodoDetailPage.xaml(.cs)  # Task detail/edit page

XAML Highlights

Value Converters

The app uses custom converters for dynamic styling based on completion status:

CompletedToColorConverter - Gray text for completed items
CompletedToTextDecorationsConverter - Strikethrough for completed items
CompletedToOpacityConverter - Fade completed items
AlternatingRowColorConverter - Alternating background colors

ResourceDictionary

<ContentPage.Resources>
    <Color x:Key="PrimaryColor">#5C6BC0</Color>
    <Color x:Key="AccentColor">#26A69A</Color>
    <Color x:Key="TextPrimary">#212121</Color>
</ContentPage.Resources>

CollectionView with DataTemplate

<CollectionView SelectionMode="Single" SelectionChanged="OnSelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="local:TodoItem">
            <Border BackgroundColor="{StaticResource CardBackground}">
                <Label Text="{Binding Title}" />
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Grid with Star Rows (Expanding Editor)

<Grid RowDefinitions="Auto,Auto,*,Auto,Auto" Padding="20">
    <!-- Row 0: Title section (Auto) -->
    <!-- Row 1: Notes label (Auto) -->
    <!-- Row 2: Editor - expands to fill (*) -->
    <!-- Row 3: Status section (Auto) -->
    <!-- Row 4: Created date (Auto) -->
</Grid>

Building and Running

# From the maui-linux-push directory
cd samples/TodoApp
dotnet publish -c Release -r linux-arm64

# Run on Linux
./bin/Release/net9.0/linux-arm64/publish/TodoApp

Controls Demonstrated

Control	Usage
NavigationPage	App navigation container
ContentPage	Individual screens
CollectionView	Task list with selection
Grid	Page layouts
VerticalStackLayout	Vertical grouping
HorizontalStackLayout	Horizontal grouping
Label	Text display
Entry	Single-line input
Editor	Multi-line input
Button	Toolbar actions
Border	Card styling with rounded corners
CheckBox	Completion toggle
BoxView	Visual separators

License

MIT License - See repository root for details.

3.5 KiB Raw Permalink Blame History