Dave Friedel
01270c6938
Complete ShellDemo application demonstrating all MAUI controls: - App/AppShell: Shell navigation with flyout menu - HomePage: Feature cards, theme toggle, quick actions - ButtonsPage: Button styles, states, variations, event logging - TextInputPage: Entry, Editor, SearchBar with keyboard shortcuts - SelectionPage: CheckBox, Switch, Slider with colored variants - PickersPage: Picker, DatePicker, TimePicker demos - ListsPage: CollectionView with fruits, colors, contacts - ProgressPage: ProgressBar, ActivityIndicator, interactive demo - GridsPage: Grid layouts - auto/star/absolute sizing, spans, nesting - AboutPage: OpenMaui Linux information - DetailPage: Push/pop navigation demo All pages use proper XAML with code-behind following MAUI patterns. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
258 lines
12 KiB
XML
258 lines
12 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
|
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
|
x:Class="ShellDemo.Pages.HomePage"
|
|
Title="Home"
|
|
BackgroundColor="{StaticResource PageBackground}">
|
|
|
|
<ScrollView>
|
|
<VerticalStackLayout Padding="20" Spacing="20">
|
|
|
|
<!-- Title -->
|
|
<Label Text="OpenMaui Linux"
|
|
FontSize="32"
|
|
FontAttributes="Bold,Italic"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
|
|
<Label Text="Controls Demo"
|
|
FontSize="20"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
|
|
<!-- Placeholder Box -->
|
|
<BoxView HeightRequest="60"
|
|
BackgroundColor="#E0E0E0"
|
|
CornerRadius="4" />
|
|
|
|
<!-- Welcome Text -->
|
|
<Label Text="Welcome to the comprehensive controls demonstration for OpenMaui Linux. This app showcases all the major UI controls available in the framework."
|
|
FontSize="14"
|
|
TextColor="{StaticResource TextPrimary}"
|
|
LineBreakMode="WordWrap"
|
|
HorizontalTextAlignment="Center" />
|
|
|
|
<!-- Toggle Theme Section -->
|
|
<Border BackgroundColor="{StaticResource ThemeToggleBackground}"
|
|
Padding="20"
|
|
StrokeThickness="0">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<HorizontalStackLayout Spacing="12" VerticalOptions="Center">
|
|
<Label Text="☀"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<Label Text="Toggle Theme"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}"
|
|
VerticalOptions="Center" />
|
|
<Switch x:Name="ThemeSwitch"
|
|
Toggled="OnThemeToggled"
|
|
VerticalOptions="Center" />
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Feature Cards Grid -->
|
|
<Grid ColumnDefinitions="*,*"
|
|
RowDefinitions="Auto,Auto,Auto"
|
|
ColumnSpacing="12"
|
|
RowSpacing="12">
|
|
|
|
<!-- Buttons Card -->
|
|
<Border Grid.Row="0" Grid.Column="0"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnButtonsCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="👆"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Buttons"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="Various button styles"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Text Input Card -->
|
|
<Border Grid.Row="0" Grid.Column="1"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnTextInputCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="Tt"
|
|
FontSize="24"
|
|
FontAttributes="Bold"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Text Input"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="Entry, Editor, SearchBar"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Selection Card -->
|
|
<Border Grid.Row="1" Grid.Column="0"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnSelectionCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="☑"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Selection"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="CheckBox, Switch, Slider"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Pickers Card -->
|
|
<Border Grid.Row="1" Grid.Column="1"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnPickersCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="📅"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Pickers"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="Date, Time, Picker"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Lists Card -->
|
|
<Border Grid.Row="2" Grid.Column="0"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnListsCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="☰"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Lists"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="CollectionView"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
|
|
<!-- Progress Card -->
|
|
<Border Grid.Row="2" Grid.Column="1"
|
|
BackgroundColor="{StaticResource CardBackground}"
|
|
Stroke="{StaticResource BorderColor}"
|
|
StrokeThickness="1"
|
|
Padding="16">
|
|
<Border.StrokeShape>
|
|
<RoundRectangle CornerRadius="8" />
|
|
</Border.StrokeShape>
|
|
<Border.GestureRecognizers>
|
|
<TapGestureRecognizer Tapped="OnProgressCardTapped" />
|
|
</Border.GestureRecognizers>
|
|
<HorizontalStackLayout Spacing="12">
|
|
<Label Text="⌛"
|
|
FontSize="24"
|
|
VerticalOptions="Center" />
|
|
<VerticalStackLayout>
|
|
<Label Text="Progress"
|
|
FontSize="16"
|
|
FontAttributes="Bold"
|
|
TextColor="{StaticResource PrimaryColor}" />
|
|
<Label Text="ProgressBar"
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}" />
|
|
</VerticalStackLayout>
|
|
</HorizontalStackLayout>
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Footer Text -->
|
|
<Label Text="Use the flyout menu to navigate between different control demos."
|
|
FontSize="12"
|
|
TextColor="{StaticResource TextSecondary}"
|
|
HorizontalTextAlignment="Center" />
|
|
|
|
<!-- Quick Actions -->
|
|
<Label Text="Quick Actions"
|
|
FontSize="18"
|
|
FontAttributes="Bold"
|
|
HorizontalOptions="Center"
|
|
Margin="0,10,0,0" />
|
|
|
|
<HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
|
|
<Button Text="Try Buttons"
|
|
BackgroundColor="{StaticResource PrimaryColor}"
|
|
TextColor="White"
|
|
Clicked="OnTryButtonsClicked" />
|
|
<Button Text="Try Lists"
|
|
BackgroundColor="{StaticResource SuccessColor}"
|
|
TextColor="White"
|
|
Clicked="OnTryListsClicked" />
|
|
</HorizontalStackLayout>
|
|
|
|
</VerticalStackLayout>
|
|
</ScrollView>
|
|
</ContentPage>
|