112 lines
3.5 KiB
Markdown
112 lines
3.5 KiB
Markdown
# 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
|
|
```xml
|
|
<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
|
|
```xml
|
|
<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)
|
|
```xml
|
|
<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
|
|
|
|
```bash
|
|
# 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.
|