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:
157
ShellDemo/README.md
Normal file
157
ShellDemo/README.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# ShellDemo Sample
|
||||
|
||||
A comprehensive control showcase application demonstrating all OpenMaui Linux controls with Shell navigation and flyout menu.
|
||||
|
||||
## Features
|
||||
|
||||
- **Shell Navigation** - Flyout menu with multiple pages
|
||||
- **Route-Based Navigation** - Push navigation with registered routes
|
||||
- **All Core Controls** - Button, Entry, Editor, CheckBox, Switch, Slider, Picker, etc.
|
||||
- **CollectionView** - Lists with selection and data binding
|
||||
- **Progress Indicators** - ProgressBar and ActivityIndicator with animations
|
||||
- **Grid Layouts** - Complex multi-column/row layouts
|
||||
- **Event Logging** - Real-time event feedback panel
|
||||
|
||||
## Pages
|
||||
|
||||
| Page | Controls Demonstrated |
|
||||
|------|----------------------|
|
||||
| **Home** | Welcome screen, navigation overview |
|
||||
| **Buttons** | Button styles, colors, states, click/press/release events |
|
||||
| **Text Input** | Entry, Editor, SearchBar, password fields, keyboard types |
|
||||
| **Selection** | CheckBox, Switch, Slider with colors and states |
|
||||
| **Pickers** | Picker, DatePicker, TimePicker with styling |
|
||||
| **Lists** | CollectionView with selection, custom items |
|
||||
| **Progress** | ProgressBar, ActivityIndicator, animated demos |
|
||||
| **Grids** | Grid layouts with row/column definitions |
|
||||
| **About** | App information |
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
ShellDemo/
|
||||
├── App.cs # AppShell definition with flyout
|
||||
├── Program.cs # Linux platform bootstrap
|
||||
├── MauiProgram.cs # MAUI app builder
|
||||
└── Pages/
|
||||
├── HomePage.cs # Welcome page
|
||||
├── ButtonsPage.cs # Button demonstrations
|
||||
├── TextInputPage.cs # Entry, Editor, SearchBar
|
||||
├── SelectionPage.cs # CheckBox, Switch, Slider
|
||||
├── PickersPage.cs # Picker, DatePicker, TimePicker
|
||||
├── ListsPage.cs # CollectionView demos
|
||||
├── ProgressPage.cs # ProgressBar, ActivityIndicator
|
||||
├── GridsPage.cs # Grid layout demos
|
||||
├── DetailPage.cs # Push navigation target
|
||||
└── AboutPage.cs # About information
|
||||
```
|
||||
|
||||
## Shell Configuration
|
||||
|
||||
```csharp
|
||||
public class AppShell : Shell
|
||||
{
|
||||
public AppShell()
|
||||
{
|
||||
FlyoutBehavior = FlyoutBehavior.Flyout;
|
||||
Title = "OpenMaui Controls Demo";
|
||||
|
||||
// Register routes for push navigation
|
||||
Routing.RegisterRoute("detail", typeof(DetailPage));
|
||||
|
||||
// Add flyout items
|
||||
Items.Add(CreateFlyoutItem("Home", typeof(HomePage)));
|
||||
Items.Add(CreateFlyoutItem("Buttons", typeof(ButtonsPage)));
|
||||
// ...more items
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Control Demonstrations
|
||||
|
||||
### Buttons Page
|
||||
- Default, styled, and transparent buttons
|
||||
- Color variations (Primary, Success, Warning, Danger)
|
||||
- Enabled/disabled state toggling
|
||||
- Wide, tall, and round button shapes
|
||||
- Pressed, clicked, released event handling
|
||||
|
||||
### Text Input Page
|
||||
- Entry with placeholder and text change events
|
||||
- Password entry with hidden text
|
||||
- Email keyboard type
|
||||
- SearchBar with search button
|
||||
- Multi-line Editor
|
||||
- Keyboard shortcuts guide
|
||||
|
||||
### Selection Page
|
||||
- CheckBox with colors and disabled state
|
||||
- Switch with OnColor customization
|
||||
- Slider with min/max range and track colors
|
||||
|
||||
### Pickers Page
|
||||
- Picker with items and selection events
|
||||
- DatePicker with date range limits
|
||||
- TimePicker with time selection
|
||||
- Styled pickers with custom colors
|
||||
|
||||
### Lists Page
|
||||
- CollectionView with string items
|
||||
- CollectionView with custom data types (ColorItem, ContactItem)
|
||||
- Selection handling and event feedback
|
||||
|
||||
### Progress Page
|
||||
- ProgressBar at various percentages
|
||||
- Colored progress bars
|
||||
- ActivityIndicator running/stopped states
|
||||
- Colored activity indicators
|
||||
- Interactive slider-controlled progress
|
||||
- Animated progress simulation
|
||||
|
||||
## Building and Running
|
||||
|
||||
```bash
|
||||
# From the maui-linux-push directory
|
||||
cd samples/ShellDemo
|
||||
dotnet publish -c Release -r linux-arm64
|
||||
|
||||
# Run on Linux
|
||||
./bin/Release/net9.0/linux-arm64/publish/ShellDemo
|
||||
```
|
||||
|
||||
## Event Logging
|
||||
|
||||
Each page features an event log panel that displays control interactions in real-time:
|
||||
|
||||
```
|
||||
[14:32:15] 3. Button clicked: Primary
|
||||
[14:32:12] 2. Slider value: 75
|
||||
[14:32:08] 1. CheckBox: Checked
|
||||
```
|
||||
|
||||
## Controls Reference
|
||||
|
||||
| Control | Properties Demonstrated |
|
||||
|---------|------------------------|
|
||||
| Button | Text, BackgroundColor, TextColor, CornerRadius, IsEnabled, WidthRequest, HeightRequest |
|
||||
| Entry | Placeholder, Text, IsPassword, Keyboard, FontSize |
|
||||
| Editor | Placeholder, Text, HeightRequest |
|
||||
| SearchBar | Placeholder, Text, SearchButtonPressed |
|
||||
| CheckBox | IsChecked, Color, IsEnabled |
|
||||
| Switch | IsToggled, OnColor, IsEnabled |
|
||||
| Slider | Minimum, Maximum, Value, MinimumTrackColor, MaximumTrackColor, ThumbColor |
|
||||
| Picker | Title, Items, SelectedIndex, TextColor, TitleColor |
|
||||
| DatePicker | Date, MinimumDate, MaximumDate, TextColor |
|
||||
| TimePicker | Time, TextColor |
|
||||
| CollectionView | ItemsSource, SelectionMode, SelectionChanged, HeightRequest |
|
||||
| ProgressBar | Progress, ProgressColor |
|
||||
| ActivityIndicator | IsRunning, Color |
|
||||
| Label | Text, FontSize, FontAttributes, TextColor |
|
||||
| Frame | CornerRadius, Padding, BackgroundColor |
|
||||
| Grid | RowDefinitions, ColumnDefinitions, RowSpacing, ColumnSpacing |
|
||||
| StackLayout | Spacing, Padding, Orientation |
|
||||
| ScrollView | Content scrolling |
|
||||
|
||||
## License
|
||||
|
||||
MIT License - See repository root for details.
|
||||
Reference in New Issue
Block a user