Initial samples: TodoApp and ShellDemo
Two sample applications demonstrating OpenMaui Linux: TodoApp: - Full task manager with NavigationPage - CollectionView with XAML data binding - DisplayAlert dialogs - Grid layouts with star sizing ShellDemo: - Comprehensive control showcase - Shell with flyout navigation - All core MAUI controls demonstrated - Real-time event logging Both samples reference OpenMaui.Controls.Linux via NuGet. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
111
TodoApp/README.md
Normal file
111
TodoApp/README.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user