maui-linux-samples/TodoApp

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:

1. TodoListPage - Shows all tasks with completion status indicators
2. NewTodoPage - Create a new task with title and notes
3. 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.