open-maui/OpenMaui
2
0
Fork 0
Code Issues Releases 1

Add ShellDemo sample with comprehensive XAML controls showcase

Browse Source 
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>
This commit is contained in:
David H. Friedel Jr.
2026-01-01 20:02:24 -05:00
parent 18ab0abe97
commit 01270c6938
27 changed files with 2152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
samples/ShellDemo/App.xaml Normal file
View File

@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ShellDemo.App">
<Application.Resources>
<ResourceDictionary>
<!-- Primary Colors -->
<Color x:Key="PrimaryColor">#03A9F4</Color>
<Color x:Key="PrimaryDarkColor">#0288D1</Color>
<!-- Semantic Colors -->
<Color x:Key="SuccessColor">#4CAF50</Color>
<Color x:Key="WarningColor">#FF9800</Color>
<Color x:Key="DangerColor">#F44336</Color>
<Color x:Key="PurpleColor">#9C27B0</Color>
<Color x:Key="DeepPurpleColor">#673AB7</Color>
<!-- Background Colors -->
<Color x:Key="PageBackground">#F5F5F5</Color>
<Color x:Key="CardBackground">#FFFFFF</Color>
<Color x:Key="ThemeToggleBackground">#E1F5FE</Color>
<!-- Text Colors -->
<Color x:Key="TextPrimary">#212121</Color>
<Color x:Key="TextSecondary">#757575</Color>
<!-- Border Colors -->
<Color x:Key="BorderColor">#E0E0E0</Color>
</ResourceDictionary>
</Application.Resources>
</Application>

12
samples/ShellDemo/App.xaml.cs Normal file
View File

@@ -0,0 +1,12 @@
using Microsoft.Maui.Controls;
namespace ShellDemo;
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new AppShell();
}
}

48
samples/ShellDemo/AppShell.xaml Normal file
View File

@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:ShellDemo.Pages"
x:Class="ShellDemo.AppShell"
Title="OpenMaui Controls Demo"
FlyoutBehavior="Flyout"
Shell.BackgroundColor="{StaticResource PrimaryColor}"
Shell.ForegroundColor="White"
Shell.TitleColor="White">
<FlyoutItem Title="Home" Route="Home">
<ShellContent ContentTemplate="{DataTemplate pages:HomePage}" />
</FlyoutItem>
<FlyoutItem Title="Buttons" Route="Buttons">
<ShellContent ContentTemplate="{DataTemplate pages:ButtonsPage}" />
</FlyoutItem>
<FlyoutItem Title="Text Input" Route="TextInput">
<ShellContent ContentTemplate="{DataTemplate pages:TextInputPage}" />
</FlyoutItem>
<FlyoutItem Title="Selection" Route="Selection">
<ShellContent ContentTemplate="{DataTemplate pages:SelectionPage}" />
</FlyoutItem>
<FlyoutItem Title="Pickers" Route="Pickers">
<ShellContent ContentTemplate="{DataTemplate pages:PickersPage}" />
</FlyoutItem>
<FlyoutItem Title="Lists" Route="Lists">
<ShellContent ContentTemplate="{DataTemplate pages:ListsPage}" />
</FlyoutItem>
<FlyoutItem Title="Progress" Route="Progress">
<ShellContent ContentTemplate="{DataTemplate pages:ProgressPage}" />
</FlyoutItem>
<FlyoutItem Title="Grids" Route="Grids">
<ShellContent ContentTemplate="{DataTemplate pages:GridsPage}" />
</FlyoutItem>
<FlyoutItem Title="About" Route="About">
<ShellContent ContentTemplate="{DataTemplate pages:AboutPage}" />
</FlyoutItem>
</Shell>

12
samples/ShellDemo/AppShell.xaml.cs Normal file
View File

@@ -0,0 +1,12 @@
using Microsoft.Maui.Controls;
namespace ShellDemo;
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute("detail", typeof(Pages.DetailPage));
}
}

24
samples/ShellDemo/MauiProgram.cs Normal file
View File

@@ -0,0 +1,24 @@
using Microsoft.Maui;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Platform.Linux.Hosting;
namespace ShellDemo;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseLinuxPlatform()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}

115
samples/ShellDemo/Pages/AboutPage.xaml Normal file
View File

@@ -0,0 +1,115 @@
<?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.AboutPage"
Title="About"
BackgroundColor="{StaticResource PageBackground}">
<ScrollView>
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="OpenMaui Linux"
FontSize="32"
FontAttributes="Bold"
TextColor="#1A237E"
HorizontalOptions="Center" />
<Label Text="Version 1.0.0"
FontSize="16"
TextColor="{StaticResource TextSecondary}"
HorizontalOptions="Center" />
<BoxView HeightRequest="1" Color="LightGray" />
<Label Text="OpenMaui Linux brings .NET MAUI to Linux desktops using SkiaSharp for rendering. It provides a native Linux experience while maintaining compatibility with MAUI's cross-platform API."
FontSize="14"
LineBreakMode="WordWrap" />
<!-- Info Cards -->
<Border BackgroundColor="#F5F5F5" Padding="15" StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout>
<Label Text="Platform:" FontAttributes="Bold" WidthRequest="100" />
<Label Text="Linux (X11/Wayland)" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</Border>
<Border BackgroundColor="#F5F5F5" Padding="15" StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout>
<Label Text="Rendering:" FontAttributes="Bold" WidthRequest="100" />
<Label Text="SkiaSharp" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</Border>
<Border BackgroundColor="#F5F5F5" Padding="15" StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout>
<Label Text="Framework:" FontAttributes="Bold" WidthRequest="100" />
<Label Text=".NET MAUI" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</Border>
<Border BackgroundColor="#F5F5F5" Padding="15" StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout>
<Label Text="License:" FontAttributes="Bold" WidthRequest="100" />
<Label Text="MIT License" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</Border>
<BoxView HeightRequest="1" Color="LightGray" />
<Label Text="Features"
FontSize="20"
FontAttributes="Bold" />
<!-- Feature Items -->
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="Full XAML support with styles and resources" FontSize="14" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="Shell navigation with flyout menus" FontSize="14" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="All standard MAUI controls" FontSize="14" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="Data binding and MVVM" FontSize="14" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="Keyboard and mouse input" FontSize="14" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Label Text="&#x2713;" TextColor="#4CAF50" FontSize="16" />
<Label Text="High DPI support" FontSize="14" />
</HorizontalStackLayout>
<BoxView HeightRequest="1" Color="LightGray" />
<Label Text="https://github.com/pablotoledo/OpenMaui-Linux"
FontSize="12"
TextColor="Blue"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>

11
samples/ShellDemo/Pages/AboutPage.xaml.cs Normal file
View File

@@ -0,0 +1,11 @@
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class AboutPage : ContentPage
{
public AboutPage()
{
InitializeComponent();
}
}

176
samples/ShellDemo/Pages/ButtonsPage.xaml Normal file
View File

@@ -0,0 +1,176 @@
<?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.ButtonsPage"
Title="Buttons"
BackgroundColor="{StaticResource PageBackground}">
<Grid RowDefinitions="*,Auto">
<!-- Main Content -->
<ScrollView Grid.Row="0">
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="Button Styles &amp; Events"
FontSize="24"
FontAttributes="Bold" />
<!-- Basic Buttons Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="12">
<Label Text="Basic Buttons"
FontSize="16"
FontAttributes="Bold" />
<Button x:Name="DefaultButton"
Text="Default Button"
BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White"
Clicked="OnDefaultButtonClicked"
Pressed="OnDefaultButtonPressed"
Released="OnDefaultButtonReleased" />
<Button Text="Text Only"
BackgroundColor="Transparent"
TextColor="{StaticResource PrimaryColor}"
Clicked="OnTextButtonClicked" />
</VerticalStackLayout>
</Border>
<!-- Styled Buttons Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="12">
<Label Text="Styled Buttons"
FontSize="16"
FontAttributes="Bold" />
<HorizontalStackLayout Spacing="8">
<Button Text="Primary"
BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White"
CornerRadius="5"
Clicked="OnPrimaryClicked" />
<Button Text="Success"
BackgroundColor="{StaticResource SuccessColor}"
TextColor="White"
CornerRadius="5"
Clicked="OnSuccessClicked" />
<Button Text="Warning"
BackgroundColor="{StaticResource WarningColor}"
TextColor="White"
CornerRadius="5"
Clicked="OnWarningClicked" />
<Button Text="Danger"
BackgroundColor="{StaticResource DangerColor}"
TextColor="White"
CornerRadius="5"
Clicked="OnDangerClicked" />
<Button Text="Purple"
BackgroundColor="{StaticResource PurpleColor}"
TextColor="White"
CornerRadius="5"
Clicked="OnPurpleClicked" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Button States Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="12">
<Label Text="Button States"
FontSize="16"
FontAttributes="Bold" />
<Button Text="Enabled Button"
BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White"
IsEnabled="True"
Clicked="OnEnabledClicked" />
<Button x:Name="DisabledButton"
Text="Disabled Button"
IsEnabled="False" />
<Button Text="Toggle Above Button"
BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White"
Clicked="OnToggleClicked" />
</VerticalStackLayout>
</Border>
<!-- Button Variations Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="12">
<Label Text="Button Variations"
FontSize="16"
FontAttributes="Bold" />
<Button Text="Wide Button"
BackgroundColor="{StaticResource DeepPurpleColor}"
TextColor="White"
HorizontalOptions="Fill"
Clicked="OnWideClicked" />
<Button Text="Tall Button"
BackgroundColor="#009688"
TextColor="White"
HeightRequest="60"
Clicked="OnTallClicked" />
<Button Text="Round"
BackgroundColor="#E91E63"
TextColor="White"
WidthRequest="80"
HeightRequest="80"
CornerRadius="40"
HorizontalOptions="Start"
Clicked="OnRoundClicked" />
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
<!-- Event Log Panel -->
<Border Grid.Row="1"
BackgroundColor="#F5F5F5"
Padding="12"
StrokeThickness="0">
<VerticalStackLayout>
<Label Text="Event Log:"
FontSize="12"
FontAttributes="Bold" />
<ScrollView HeightRequest="60">
<Label x:Name="EventLog"
Text="Events will appear here..."
FontSize="11"
TextColor="{StaticResource TextSecondary}"
LineBreakMode="WordWrap" />
</ScrollView>
</VerticalStackLayout>
</Border>
</Grid>
</ContentPage>

93
samples/ShellDemo/Pages/ButtonsPage.xaml.cs Normal file
View File

@@ -0,0 +1,93 @@
using System;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class ButtonsPage : ContentPage
{
private int _eventCount = 0;
public ButtonsPage()
{
InitializeComponent();
}
private void LogEvent(string message)
{
_eventCount++;
var timestamp = DateTime.Now.ToString("HH:mm:ss");
EventLog.Text = $"[{timestamp}] {_eventCount}. {message}\n{EventLog.Text}";
}
private void OnDefaultButtonClicked(object? sender, EventArgs e)
{
LogEvent("Default Button clicked");
}
private void OnDefaultButtonPressed(object? sender, EventArgs e)
{
LogEvent("Default Button pressed");
}
private void OnDefaultButtonReleased(object? sender, EventArgs e)
{
LogEvent("Default Button released");
}
private void OnTextButtonClicked(object? sender, EventArgs e)
{
LogEvent("Text Button clicked");
}
private void OnPrimaryClicked(object? sender, EventArgs e)
{
LogEvent("Primary button clicked");
}
private void OnSuccessClicked(object? sender, EventArgs e)
{
LogEvent("Success button clicked");
}
private void OnWarningClicked(object? sender, EventArgs e)
{
LogEvent("Warning button clicked");
}
private void OnDangerClicked(object? sender, EventArgs e)
{
LogEvent("Danger button clicked");
}
private void OnPurpleClicked(object? sender, EventArgs e)
{
LogEvent("Purple button clicked");
}
private void OnEnabledClicked(object? sender, EventArgs e)
{
LogEvent("Enabled button clicked");
}
private void OnToggleClicked(object? sender, EventArgs e)
{
DisabledButton.IsEnabled = !DisabledButton.IsEnabled;
DisabledButton.Text = DisabledButton.IsEnabled ? "Now Enabled!" : "Disabled Button";
LogEvent($"Toggled button to: {(DisabledButton.IsEnabled ? "Enabled" : "Disabled")}");
}
private void OnWideClicked(object? sender, EventArgs e)
{
LogEvent("Wide button clicked");
}
private void OnTallClicked(object? sender, EventArgs e)
{
LogEvent("Tall button clicked");
}
private void OnRoundClicked(object? sender, EventArgs e)
{
LogEvent("Round button clicked");
}
}

47
samples/ShellDemo/Pages/DetailPage.xaml Normal file
View File

@@ -0,0 +1,47 @@
<?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.DetailPage"
Title="Detail Page"
BackgroundColor="{StaticResource PageBackground}">
<VerticalStackLayout Padding="30"
Spacing="20"
VerticalOptions="Center">
<Label Text="Pushed Page"
FontSize="28"
FontAttributes="Bold"
HorizontalOptions="Center"
TextColor="{StaticResource PurpleColor}" />
<Label x:Name="ItemLabel"
Text="You navigated to: Detail Item"
FontSize="16"
HorizontalOptions="Center" />
<Label Text="This page was pushed onto the navigation stack using Shell.Current.GoToAsync()"
FontSize="14"
TextColor="{StaticResource TextSecondary}"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap" />
<BoxView HeightRequest="2"
Color="#E0E0E0"
Margin="0,20" />
<Button Text="Go Back (Pop)"
BackgroundColor="{StaticResource PurpleColor}"
TextColor="White"
HorizontalOptions="Center"
Padding="30,10"
Clicked="OnGoBackClicked" />
<Label Text="Use the back button above or the hardware/gesture back to pop this page"
FontSize="12"
TextColor="{StaticResource TextSecondary}"
HorizontalTextAlignment="Center"
Margin="0,20,0,0" />
</VerticalStackLayout>
</ContentPage>

34
samples/ShellDemo/Pages/DetailPage.xaml.cs Normal file
View File

@@ -0,0 +1,34 @@
using System;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
[QueryProperty(nameof(ItemName), "item")]
public partial class DetailPage : ContentPage
{
private string _itemName = "Detail Item";
public string ItemName
{
get => _itemName;
set
{
_itemName = value;
Title = $"Detail: {value}";
if (ItemLabel != null)
{
ItemLabel.Text = $"You navigated to: {value}";
}
}
}
public DetailPage()
{
InitializeComponent();
}
private async void OnGoBackClicked(object? sender, EventArgs e)
{
await Shell.Current.GoToAsync("..");
}
}

195
samples/ShellDemo/Pages/GridsPage.xaml Normal file
View File

@@ -0,0 +1,195 @@
<?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.GridsPage"
Title="Grids"
BackgroundColor="{StaticResource PageBackground}">
<ScrollView Orientation="Both">
<VerticalStackLayout Spacing="25" Padding="20">
<!-- Basic Grid -->
<Label Text="Basic Grid (2x2)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" />
<Label Text="Equal columns using Star sizing" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" BackgroundColor="#F5F5F5">
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
<Label Text="Row 0, Col 0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
<Label Text="Row 0, Col 1" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
<Label Text="Row 1, Col 0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
<Label Text="Row 1, Col 1" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Column Definitions -->
<Label Text="Column Definitions" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="Auto: Sizes to content" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="Auto,Auto,Auto" BackgroundColor="#F5F5F5">
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="Auto" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="Auto Width" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="A" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<Label Text="Absolute: Fixed pixel widths (50, 100, 150)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
<Grid ColumnDefinitions="50,100,150" BackgroundColor="#F5F5F5">
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="50px" HorizontalTextAlignment="Center" FontSize="10" />
</Border>
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="100px" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="150px" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Star Sizing -->
<Label Text="Star Sizing (Proportional)" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="Star proportions: 1* | 2* | 1* = 25% | 50% | 25%" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="*,2*,*" BackgroundColor="#F5F5F5">
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="1*" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="2* (double)" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="1*" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Row & Column Spacing -->
<Label Text="Row &amp; Column Spacing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="No spacing (RowSpacing=0, ColumnSpacing=0)" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="0" ColumnSpacing="0">
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="0,0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="0,1" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="1,0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
<Label Text="1,1" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<Label Text="With spacing (RowSpacing=10, ColumnSpacing=10)" FontSize="12" TextColor="{StaticResource TextSecondary}" Margin="0,10,0,0" />
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10">
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="0,0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="0,1" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="1,0" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
<Label Text="1,1" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Row & Column Span -->
<Label Text="Row &amp; Column Span" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="Header spans 3 columns, Sidebar spans 2 rows" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="*,*,*" RowDefinitions="Auto,Auto,Auto" RowSpacing="5" ColumnSpacing="5">
<!-- Header spanning 3 columns -->
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="#1976D2" Padding="10,8" StrokeThickness="0">
<Label Text="ColumnSpan=3 (Header)" TextColor="White" HorizontalTextAlignment="Center" />
</Border>
<!-- Sidebar spanning 2 rows -->
<Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" BackgroundColor="#388E3C" Padding="10,8" StrokeThickness="0">
<Label Text="RowSpan=2&#10;(Sidebar)" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Border>
<!-- Content cells -->
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#E3F2FD" Padding="10,8" StrokeThickness="0">
<Label Text="Content 1" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="2" BackgroundColor="#E8F5E9" Padding="10,8" StrokeThickness="0">
<Label Text="Content 2" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="2" Grid.Column="1" BackgroundColor="#FFF3E0" Padding="10,8" StrokeThickness="0">
<Label Text="Content 3" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="2" Grid.Column="2" BackgroundColor="#FCE4EC" Padding="10,8" StrokeThickness="0">
<Label Text="Content 4" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Mixed Sizing -->
<Label Text="Mixed Sizing" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="Mixed: 60px | Star | Auto | 60px" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="60,*,Auto,60" ColumnSpacing="5" BackgroundColor="#F5F5F5">
<Border Grid.Column="0" BackgroundColor="#BBDEFB" Padding="10,8" StrokeThickness="0">
<Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
</Border>
<Border Grid.Column="1" BackgroundColor="#C8E6C9" Padding="10,8" StrokeThickness="0">
<Label Text="Star (fills remaining)" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="2" BackgroundColor="#FFECB3" Padding="10,8" StrokeThickness="0">
<Label Text="Auto" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Column="3" BackgroundColor="#F8BBD9" Padding="10,8" StrokeThickness="0">
<Label Text="60px" HorizontalTextAlignment="Center" FontSize="10" />
</Border>
</Grid>
<!-- Nested Grids -->
<Label Text="Nested Grids" FontSize="18" FontAttributes="Bold" TextColor="{StaticResource PrimaryColor}" Margin="0,10,0,0" />
<Label Text="Outer grid contains two nested 2x2 grids" FontSize="12" TextColor="{StaticResource TextSecondary}" />
<Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="10" ColumnSpacing="10" BackgroundColor="#E0E0E0" Padding="10">
<!-- Nested Grid 1 -->
<Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#BBDEFB" Padding="8" StrokeThickness="0">
<Label Text="A" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#90CAF9" Padding="8" StrokeThickness="0">
<Label Text="B" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#64B5F6" Padding="8" StrokeThickness="0">
<Label Text="C" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#42A5F5" Padding="8" StrokeThickness="0">
<Label Text="D" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<!-- Nested Grid 2 -->
<Grid Grid.Row="0" Grid.Column="1" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" RowSpacing="2" ColumnSpacing="2">
<Border Grid.Row="0" Grid.Column="0" BackgroundColor="#C8E6C9" Padding="8" StrokeThickness="0">
<Label Text="1" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="0" Grid.Column="1" BackgroundColor="#A5D6A7" Padding="8" StrokeThickness="0">
<Label Text="2" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="#81C784" Padding="8" StrokeThickness="0">
<Label Text="3" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
<Border Grid.Row="1" Grid.Column="1" BackgroundColor="#66BB6A" Padding="8" StrokeThickness="0">
<Label Text="4" FontSize="10" HorizontalTextAlignment="Center" />
</Border>
</Grid>
<Label Grid.Row="1" Grid.Column="0" Text="Outer Grid Row 1" HorizontalOptions="Center" />
<Label Grid.Row="1" Grid.Column="1" Text="Spans both columns" HorizontalOptions="Center" />
</Grid>
<BoxView HeightRequest="20" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>

11
samples/ShellDemo/Pages/GridsPage.xaml.cs Normal file
View File

@@ -0,0 +1,11 @@
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class GridsPage : ContentPage
{
public GridsPage()
{
InitializeComponent();
}
}

257
samples/ShellDemo/Pages/HomePage.xaml Normal file
View File

@@ -0,0 +1,257 @@
<?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="&#x2600;"
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="&#x1F446;"
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="&#x2611;"
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="&#x1F4C5;"
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="&#x2630;"
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="&#x231B;"
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>

62
samples/ShellDemo/Pages/HomePage.xaml.cs Normal file
View File

@@ -0,0 +1,62 @@
using System;
using Microsoft.Maui.ApplicationModel;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class HomePage : ContentPage
{
public HomePage()
{
InitializeComponent();
ThemeSwitch.IsToggled = Application.Current?.UserAppTheme == AppTheme.Dark;
}
private void OnThemeToggled(object? sender, ToggledEventArgs e)
{
if (Application.Current != null)
{
Application.Current.UserAppTheme = e.Value ? AppTheme.Dark : AppTheme.Light;
}
}
private async void OnButtonsCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//Buttons");
}
private async void OnTextInputCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//TextInput");
}
private async void OnSelectionCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//Selection");
}
private async void OnPickersCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//Pickers");
}
private async void OnListsCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//Lists");
}
private async void OnProgressCardTapped(object? sender, TappedEventArgs e)
{
await Shell.Current.GoToAsync("//Progress");
}
private async void OnTryButtonsClicked(object? sender, EventArgs e)
{
await Shell.Current.GoToAsync("//Buttons");
}
private async void OnTryListsClicked(object? sender, EventArgs e)
{
await Shell.Current.GoToAsync("//Lists");
}
}

98
samples/ShellDemo/Pages/ListsPage.xaml Normal file
View File

@@ -0,0 +1,98 @@
<?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"
xmlns:local="clr-namespace:ShellDemo.Pages"
x:Class="ShellDemo.Pages.ListsPage"
Title="Lists"
BackgroundColor="{StaticResource PageBackground}">
<Grid RowDefinitions="*,Auto">
<ScrollView Grid.Row="0">
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="List Controls" FontSize="24" FontAttributes="Bold" />
<!-- Fruits CollectionView -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="10">
<Label Text="CollectionView - Fruits" FontSize="16" FontAttributes="Bold" />
<CollectionView x:Name="FruitsCollectionView"
HeightRequest="200"
SelectionMode="Single"
BackgroundColor="#FAFAFA"
SelectionChanged="OnFruitSelected" />
<Label x:Name="FruitSelectedLabel" Text="Tap a fruit to select" TextColor="{StaticResource TextSecondary}" />
</VerticalStackLayout>
</Border>
<!-- Colors CollectionView -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="10">
<Label Text="CollectionView - Colors" FontSize="16" FontAttributes="Bold" />
<CollectionView x:Name="ColorsCollectionView"
HeightRequest="180"
SelectionMode="Single"
BackgroundColor="White"
SelectionChanged="OnColorSelected" />
<Label Text="Scroll to see all colors" FontSize="11" TextColor="{StaticResource TextSecondary}" />
</VerticalStackLayout>
</Border>
<!-- Contacts CollectionView -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="10">
<Label Text="CollectionView - Contacts" FontSize="16" FontAttributes="Bold" />
<CollectionView x:Name="ContactsCollectionView"
HeightRequest="200"
SelectionMode="Single"
BackgroundColor="White"
SelectionChanged="OnContactSelected" />
<HorizontalStackLayout Spacing="10">
<Button Text="Add Contact"
BackgroundColor="Green"
TextColor="White"
Clicked="OnAddContactClicked" />
<Button Text="Delete Selected"
BackgroundColor="Red"
TextColor="White"
Clicked="OnDeleteContactClicked" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
<!-- Event Log Panel -->
<Border Grid.Row="1" BackgroundColor="#F5F5F5" Padding="12" StrokeThickness="0">
<VerticalStackLayout>
<Label Text="Event Log:" FontSize="12" FontAttributes="Bold" />
<ScrollView HeightRequest="60">
<Label x:Name="EventLog"
Text="Events will appear here..."
FontSize="11"
TextColor="{StaticResource TextSecondary}"
LineBreakMode="WordWrap" />
</ScrollView>
</VerticalStackLayout>
</Border>
</Grid>
</ContentPage>

116
samples/ShellDemo/Pages/ListsPage.xaml.cs Normal file
View File

@@ -0,0 +1,116 @@
using System;
using System.Collections.Generic;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class ListsPage : ContentPage
{
private int _eventCount = 0;
public ListsPage()
{
InitializeComponent();
LoadData();
}
private void LoadData()
{
// Fruits
var fruits = new List<string>
{
"Apple", "Banana", "Cherry", "Date", "Elderberry",
"Fig", "Grape", "Honeydew", "Kiwi", "Lemon",
"Mango", "Nectarine", "Orange", "Papaya", "Quince"
};
FruitsCollectionView.ItemsSource = fruits;
// Colors
var colors = new List<ColorItem>
{
new("Red", "#F44336"),
new("Pink", "#E91E63"),
new("Purple", "#9C27B0"),
new("Deep Purple", "#673AB7"),
new("Indigo", "#3F51B5"),
new("Blue", "#2196F3"),
new("Cyan", "#00BCD4"),
new("Teal", "#009688"),
new("Green", "#4CAF50"),
new("Light Green", "#8BC34A"),
new("Lime", "#CDDC39"),
new("Yellow", "#FFEB3B"),
new("Amber", "#FFC107"),
new("Orange", "#FF9800"),
new("Deep Orange", "#FF5722")
};
ColorsCollectionView.ItemsSource = colors;
// Contacts
var contacts = new List<ContactItem>
{
new("Alice Johnson", "alice@example.com", "Engineering"),
new("Bob Smith", "bob@example.com", "Marketing"),
new("Carol Williams", "carol@example.com", "Design"),
new("David Brown", "david@example.com", "Sales"),
new("Eva Martinez", "eva@example.com", "Engineering"),
new("Frank Lee", "frank@example.com", "Support"),
new("Grace Kim", "grace@example.com", "HR"),
new("Henry Wilson", "henry@example.com", "Finance")
};
ContactsCollectionView.ItemsSource = contacts;
}
private void LogEvent(string message)
{
_eventCount++;
var timestamp = DateTime.Now.ToString("HH:mm:ss");
EventLog.Text = $"[{timestamp}] {_eventCount}. {message}\n{EventLog.Text}";
}
private void OnFruitSelected(object? sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection.Count > 0)
{
var item = e.CurrentSelection[0]?.ToString();
FruitSelectedLabel.Text = $"Selected: {item}";
LogEvent($"Fruit selected: {item}");
}
}
private void OnColorSelected(object? sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection.Count > 0 && e.CurrentSelection[0] is ColorItem item)
{
LogEvent($"Color selected: {item.Name} ({item.Hex})");
}
}
private void OnContactSelected(object? sender, SelectionChangedEventArgs e)
{
if (e.CurrentSelection.Count > 0 && e.CurrentSelection[0] is ContactItem contact)
{
LogEvent($"Contact: {contact.Name} - {contact.Department}");
}
}
private void OnAddContactClicked(object? sender, EventArgs e)
{
LogEvent("Add contact clicked");
}
private void OnDeleteContactClicked(object? sender, EventArgs e)
{
LogEvent("Delete contact clicked");
}
}
public record ColorItem(string Name, string Hex)
{
public override string ToString() => Name;
}
public record ContactItem(string Name, string Email, string Department)
{
public override string ToString() => $"{Name} ({Department})";
}

142
samples/ShellDemo/Pages/PickersPage.xaml Normal file
View File

@@ -0,0 +1,142 @@
<?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.PickersPage"
Title="Pickers"
BackgroundColor="{StaticResource PageBackground}">
<Grid RowDefinitions="*,Auto">
<ScrollView Grid.Row="0">
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="Picker Controls" FontSize="24" FontAttributes="Bold" />
<!-- Picker Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="Picker" FontSize="16" FontAttributes="Bold" />
<Picker x:Name="FruitPicker"
Title="Select a fruit"
SelectedIndexChanged="OnFruitPickerChanged">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Apple</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Date</x:String>
<x:String>Elderberry</x:String>
<x:String>Fig</x:String>
<x:String>Grape</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<Label x:Name="FruitSelectedLabel" Text="Selected: (none)" TextColor="{StaticResource TextSecondary}" />
<Label Text="With Default Selection:" FontSize="12" Margin="0,10,0,0" />
<Picker x:Name="ColorPicker"
Title="Select a color"
SelectedIndex="2"
SelectedIndexChanged="OnColorPickerChanged">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Red</x:String>
<x:String>Green</x:String>
<x:String>Blue</x:String>
<x:String>Yellow</x:String>
<x:String>Purple</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<Label Text="Styled Picker:" FontSize="12" Margin="0,10,0,0" />
<Picker Title="Select size"
TextColor="DarkBlue"
TitleColor="Gray"
SelectedIndexChanged="OnSizePickerChanged">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Small</x:String>
<x:String>Medium</x:String>
<x:String>Large</x:String>
<x:String>Extra Large</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</VerticalStackLayout>
</Border>
<!-- DatePicker Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="DatePicker" FontSize="16" FontAttributes="Bold" />
<DatePicker x:Name="BasicDatePicker" DateSelected="OnDateSelected" />
<Label x:Name="DateSelectedLabel" Text="Selected date will appear here" TextColor="{StaticResource TextSecondary}" />
<Label Text="With Date Range (this month only):" FontSize="12" Margin="0,10,0,0" />
<DatePicker x:Name="RangeDatePicker" DateSelected="OnRangeDateSelected" />
<Label Text="Styled DatePicker:" FontSize="12" Margin="0,10,0,0" />
<DatePicker TextColor="DarkGreen" DateSelected="OnStyledDateSelected" />
</VerticalStackLayout>
</Border>
<!-- TimePicker Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="TimePicker" FontSize="16" FontAttributes="Bold" />
<TimePicker x:Name="BasicTimePicker" PropertyChanged="OnTimeChanged" />
<Label x:Name="TimeSelectedLabel" Text="Selected time will appear here" TextColor="{StaticResource TextSecondary}" />
<Label Text="Styled TimePicker:" FontSize="12" Margin="0,10,0,0" />
<TimePicker Time="14:30:00" TextColor="DarkBlue" PropertyChanged="OnStyledTimeChanged" />
<Label Text="Alarm Time:" FontSize="12" Margin="0,10,0,0" />
<HorizontalStackLayout Spacing="10">
<TimePicker x:Name="AlarmTimePicker" Time="07:00:00" />
<Button Text="Set Alarm"
BackgroundColor="Orange"
TextColor="White"
Clicked="OnSetAlarmClicked" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
<!-- Event Log Panel -->
<Border Grid.Row="1" BackgroundColor="#F5F5F5" Padding="12" StrokeThickness="0">
<VerticalStackLayout>
<Label Text="Event Log:" FontSize="12" FontAttributes="Bold" />
<ScrollView HeightRequest="60">
<Label x:Name="EventLog"
Text="Events will appear here..."
FontSize="11"
TextColor="{StaticResource TextSecondary}"
LineBreakMode="WordWrap" />
</ScrollView>
</VerticalStackLayout>
</Border>
</Grid>
</ContentPage>

92
samples/ShellDemo/Pages/PickersPage.xaml.cs Normal file
View File

@@ -0,0 +1,92 @@
using System;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class PickersPage : ContentPage
{
private int _eventCount = 0;
public PickersPage()
{
InitializeComponent();
// Set date range for the range picker
var startOfMonth = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
var endOfMonth = startOfMonth.AddMonths(1).AddDays(-1);
RangeDatePicker.MinimumDate = startOfMonth;
RangeDatePicker.MaximumDate = endOfMonth;
}
private void LogEvent(string message)
{
_eventCount++;
var timestamp = DateTime.Now.ToString("HH:mm:ss");
EventLog.Text = $"[{timestamp}] {_eventCount}. {message}\n{EventLog.Text}";
}
private void OnFruitPickerChanged(object? sender, EventArgs e)
{
if (FruitPicker.SelectedIndex >= 0)
{
var item = FruitPicker.ItemsSource[FruitPicker.SelectedIndex]?.ToString();
FruitSelectedLabel.Text = $"Selected: {item}";
LogEvent($"Fruit selected: {item}");
}
}
private void OnColorPickerChanged(object? sender, EventArgs e)
{
if (ColorPicker.SelectedIndex >= 0)
{
LogEvent($"Color selected: {ColorPicker.ItemsSource[ColorPicker.SelectedIndex]}");
}
}
private void OnSizePickerChanged(object? sender, EventArgs e)
{
if (sender is Picker picker && picker.SelectedIndex >= 0)
{
LogEvent($"Size selected: {picker.ItemsSource[picker.SelectedIndex]}");
}
}
private void OnDateSelected(object? sender, DateChangedEventArgs e)
{
DateSelectedLabel.Text = $"Selected: {e.NewDate:d}";
LogEvent($"Date selected: {e.NewDate:d}");
}
private void OnRangeDateSelected(object? sender, DateChangedEventArgs e)
{
LogEvent($"Date (limited): {e.NewDate:d}");
}
private void OnStyledDateSelected(object? sender, DateChangedEventArgs e)
{
LogEvent($"Styled date: {e.NewDate:d}");
}
private void OnTimeChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(TimePicker.Time))
{
var time = BasicTimePicker.Time;
TimeSelectedLabel.Text = $"Selected: {time:hh\\:mm}";
LogEvent($"Time selected: {time:hh\\:mm}");
}
}
private void OnStyledTimeChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(TimePicker.Time) && sender is TimePicker picker)
{
LogEvent($"Styled time: {picker.Time:hh\\:mm}");
}
}
private void OnSetAlarmClicked(object? sender, EventArgs e)
{
LogEvent($"Alarm set for {AlarmTimePicker.Time:hh\\:mm}");
}
}

136
samples/ShellDemo/Pages/ProgressPage.xaml Normal file
View File

@@ -0,0 +1,136 @@
<?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.ProgressPage"
Title="Progress"
BackgroundColor="{StaticResource PageBackground}">
<Grid RowDefinitions="*,Auto">
<ScrollView Grid.Row="0">
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="Progress Indicators" FontSize="24" FontAttributes="Bold" />
<!-- ProgressBar Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="ProgressBar" FontSize="16" FontAttributes="Bold" />
<!-- Various progress values -->
<HorizontalStackLayout Spacing="10">
<ProgressBar Progress="0" WidthRequest="200" />
<Label Text="0%" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<ProgressBar Progress="0.25" WidthRequest="200" />
<Label Text="25%" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<ProgressBar Progress="0.5" WidthRequest="200" />
<Label Text="50%" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<ProgressBar Progress="0.75" WidthRequest="200" />
<Label Text="75%" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<ProgressBar Progress="1" WidthRequest="200" />
<Label Text="100%" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<Label Text="Colored Progress Bars:" FontSize="12" Margin="0,10,0,0" />
<ProgressBar Progress="0.7" ProgressColor="Red" />
<ProgressBar Progress="0.7" ProgressColor="Green" />
<ProgressBar Progress="0.7" ProgressColor="Blue" />
<ProgressBar Progress="0.7" ProgressColor="Orange" />
<ProgressBar Progress="0.7" ProgressColor="Purple" />
</VerticalStackLayout>
</Border>
<!-- ActivityIndicator Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="ActivityIndicator" FontSize="16" FontAttributes="Bold" />
<HorizontalStackLayout Spacing="15">
<ActivityIndicator IsRunning="True" />
<Label Text="Loading..." VerticalOptions="Center" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="15">
<ActivityIndicator x:Name="ToggleIndicator" IsRunning="False" />
<Button Text="Start/Stop" Clicked="OnToggleIndicatorClicked" />
</HorizontalStackLayout>
<Label Text="Colored Indicators:" FontSize="12" Margin="0,10,0,0" />
<HorizontalStackLayout Spacing="20">
<ActivityIndicator IsRunning="True" Color="Red" />
<ActivityIndicator IsRunning="True" Color="Green" />
<ActivityIndicator IsRunning="True" Color="Blue" />
<ActivityIndicator IsRunning="True" Color="Orange" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Interactive Demo Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="Interactive Demo" FontSize="16" FontAttributes="Bold" />
<ProgressBar x:Name="AnimatedProgress" Progress="0.5" />
<Slider x:Name="ProgressSlider" Minimum="0" Maximum="100" Value="50" ValueChanged="OnProgressSliderChanged" />
<Label x:Name="ProgressLabel" Text="Progress: 50%" />
<HorizontalStackLayout Spacing="10" Margin="0,10,0,0">
<Button Text="Reset"
BackgroundColor="Gray"
TextColor="White"
Clicked="OnResetClicked" />
<Button Text="Animate to 100%"
BackgroundColor="Blue"
TextColor="White"
Clicked="OnAnimateClicked" />
<Button Text="Simulate Download"
BackgroundColor="Green"
TextColor="White"
Clicked="OnSimulateClicked" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
<!-- Event Log Panel -->
<Border Grid.Row="1" BackgroundColor="#F5F5F5" Padding="12" StrokeThickness="0">
<VerticalStackLayout>
<Label Text="Event Log:" FontSize="12" FontAttributes="Bold" />
<ScrollView HeightRequest="60">
<Label x:Name="EventLog"
Text="Events will appear here..."
FontSize="11"
TextColor="{StaticResource TextSecondary}"
LineBreakMode="WordWrap" />
</ScrollView>
</VerticalStackLayout>
</Border>
</Grid>
</ContentPage>

84
samples/ShellDemo/Pages/ProgressPage.xaml.cs Normal file
View File

@@ -0,0 +1,84 @@
using System;
using System.Threading.Tasks;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class ProgressPage : ContentPage
{
private int _eventCount = 0;
private bool _isAnimating = false;
public ProgressPage()
{
InitializeComponent();
}
private void LogEvent(string message)
{
_eventCount++;
var timestamp = DateTime.Now.ToString("HH:mm:ss");
EventLog.Text = $"[{timestamp}] {_eventCount}. {message}\n{EventLog.Text}";
}
private void OnToggleIndicatorClicked(object? sender, EventArgs e)
{
ToggleIndicator.IsRunning = !ToggleIndicator.IsRunning;
LogEvent($"ActivityIndicator: {(ToggleIndicator.IsRunning ? "Started" : "Stopped")}");
}
private void OnProgressSliderChanged(object? sender, ValueChangedEventArgs e)
{
var value = e.NewValue / 100.0;
AnimatedProgress.Progress = value;
ProgressLabel.Text = $"Progress: {e.NewValue:0}%";
}
private void OnResetClicked(object? sender, EventArgs e)
{
AnimatedProgress.Progress = 0;
ProgressSlider.Value = 0;
LogEvent("Progress reset to 0%");
}
private async void OnAnimateClicked(object? sender, EventArgs e)
{
if (_isAnimating) return;
_isAnimating = true;
LogEvent("Animation started");
for (int i = (int)ProgressSlider.Value; i <= 100; i += 5)
{
AnimatedProgress.Progress = i / 100.0;
ProgressSlider.Value = i;
await Task.Delay(100);
}
_isAnimating = false;
LogEvent("Animation completed");
}
private async void OnSimulateClicked(object? sender, EventArgs e)
{
if (_isAnimating) return;
_isAnimating = true;
LogEvent("Download simulation started");
AnimatedProgress.Progress = 0;
ProgressSlider.Value = 0;
var random = new Random();
double progress = 0;
while (progress < 1.0)
{
progress += random.NextDouble() * 0.1;
if (progress > 1.0) progress = 1.0;
AnimatedProgress.Progress = progress;
ProgressSlider.Value = progress * 100;
await Task.Delay(200 + random.Next(300));
}
_isAnimating = false;
LogEvent("Download simulation completed");
}
}

130
samples/ShellDemo/Pages/SelectionPage.xaml Normal file
View File

@@ -0,0 +1,130 @@
<?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.SelectionPage"
Title="Selection"
BackgroundColor="{StaticResource PageBackground}">
<Grid RowDefinitions="*,Auto">
<!-- Main Content -->
<ScrollView Grid.Row="0">
<VerticalStackLayout Padding="20" Spacing="20">
<Label Text="Selection Controls"
FontSize="24"
FontAttributes="Bold" />
<!-- CheckBox Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="CheckBox" FontSize="16" FontAttributes="Bold" />
<HorizontalStackLayout Spacing="20">
<CheckBox x:Name="Checkbox1" CheckedChanged="OnCheckbox1Changed" />
<Label Text="Option 1" VerticalOptions="Center" />
<CheckBox x:Name="Checkbox2" IsChecked="True" CheckedChanged="OnCheckbox2Changed" />
<Label Text="Option 2 (default checked)" VerticalOptions="Center" />
</HorizontalStackLayout>
<Label Text="Colored Checkboxes:" FontSize="12" />
<HorizontalStackLayout Spacing="20">
<CheckBox Color="Red" IsChecked="True" CheckedChanged="OnColoredCheckboxChanged" />
<CheckBox Color="Green" IsChecked="True" CheckedChanged="OnColoredCheckboxChanged" />
<CheckBox Color="Blue" IsChecked="True" CheckedChanged="OnColoredCheckboxChanged" />
<CheckBox Color="Purple" IsChecked="True" CheckedChanged="OnColoredCheckboxChanged" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<CheckBox IsChecked="True" IsEnabled="False" />
<Label Text="Disabled (checked)" VerticalOptions="Center" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Switch Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="Switch" FontSize="16" FontAttributes="Bold" />
<HorizontalStackLayout Spacing="15">
<Switch x:Name="BasicSwitch" Toggled="OnBasicSwitchToggled" />
<Label x:Name="SwitchStatusLabel" Text="Off" VerticalOptions="Center" WidthRequest="50" />
</HorizontalStackLayout>
<Label Text="Colored Switches:" FontSize="12" />
<HorizontalStackLayout Spacing="20">
<Switch IsToggled="True" OnColor="Green" Toggled="OnColoredSwitchToggled" />
<Switch IsToggled="True" OnColor="Orange" Toggled="OnColoredSwitchToggled" />
<Switch IsToggled="True" OnColor="Purple" Toggled="OnColoredSwitchToggled" />
</HorizontalStackLayout>
<HorizontalStackLayout Spacing="10">
<Switch IsToggled="True" IsEnabled="False" />
<Label Text="Disabled (on)" VerticalOptions="Center" TextColor="{StaticResource TextSecondary}" />
</HorizontalStackLayout>
</VerticalStackLayout>
</Border>
<!-- Slider Section -->
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
StrokeThickness="1"
Padding="16">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="15">
<Label Text="Slider" FontSize="16" FontAttributes="Bold" />
<Slider x:Name="BasicSlider" Minimum="0" Maximum="100" Value="50" ValueChanged="OnBasicSliderChanged" />
<Label x:Name="SliderValueLabel" Text="Value: 50" />
<Label Text="Temperature (0-40C):" FontSize="12" Margin="0,10,0,0" />
<Slider x:Name="TempSlider" Minimum="0" Maximum="40" Value="20" ValueChanged="OnTempSliderChanged" />
<Label x:Name="TempLabel" Text="20C" />
<Label Text="Colored Slider:" FontSize="12" Margin="0,10,0,0" />
<Slider Minimum="0" Maximum="100" Value="75"
MinimumTrackColor="Green"
MaximumTrackColor="LightGray"
ThumbColor="DarkGreen"
ValueChanged="OnColoredSliderChanged" />
<Label Text="Disabled Slider:" FontSize="12" Margin="0,10,0,0" />
<Slider Minimum="0" Maximum="100" Value="30" IsEnabled="False" />
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
<!-- Event Log Panel -->
<Border Grid.Row="1"
BackgroundColor="#F5F5F5"
Padding="12"
StrokeThickness="0">
<VerticalStackLayout>
<Label Text="Event Log:" FontSize="12" FontAttributes="Bold" />
<ScrollView HeightRequest="60">
<Label x:Name="EventLog"
Text="Events will appear here..."
FontSize="11"
TextColor="{StaticResource TextSecondary}"
LineBreakMode="WordWrap" />
</ScrollView>
</VerticalStackLayout>
</Border>
</Grid>
</ContentPage>

70
samples/ShellDemo/Pages/SelectionPage.xaml.cs Normal file
View File

@@ -0,0 +1,70 @@
using System;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class SelectionPage : ContentPage
{
private int _eventCount = 0;
public SelectionPage()
{
InitializeComponent();
}
private void LogEvent(string message)
{
_eventCount++;
var timestamp = DateTime.Now.ToString("HH:mm:ss");
EventLog.Text = $"[{timestamp}] {_eventCount}. {message}\n{EventLog.Text}";
}
private void OnCheckbox1Changed(object? sender, CheckedChangedEventArgs e)
{
LogEvent($"Checkbox 1: {(e.Value ? "Checked" : "Unchecked")}");
}
private void OnCheckbox2Changed(object? sender, CheckedChangedEventArgs e)
{
LogEvent($"Checkbox 2: {(e.Value ? "Checked" : "Unchecked")}");
}
private void OnColoredCheckboxChanged(object? sender, CheckedChangedEventArgs e)
{
if (sender is CheckBox cb)
{
LogEvent($"{cb.Color} checkbox: {(e.Value ? "Checked" : "Unchecked")}");
}
}
private void OnBasicSwitchToggled(object? sender, ToggledEventArgs e)
{
SwitchStatusLabel.Text = e.Value ? "On" : "Off";
LogEvent($"Switch toggled: {(e.Value ? "ON" : "OFF")}");
}
private void OnColoredSwitchToggled(object? sender, ToggledEventArgs e)
{
if (sender is Switch sw)
{
LogEvent($"{sw.OnColor} switch: {(e.Value ? "ON" : "OFF")}");
}
}
private void OnBasicSliderChanged(object? sender, ValueChangedEventArgs e)
{
SliderValueLabel.Text = $"Value: {(int)e.NewValue}";
LogEvent($"Slider value: {(int)e.NewValue}");
}
private void OnTempSliderChanged(object? sender, ValueChangedEventArgs e)
{
TempLabel.Text = $"{(int)e.NewValue}C";
LogEvent($"Temperature: {(int)e.NewValue}C");
}
private void OnColoredSliderChanged(object? sender, ValueChangedEventArgs e)
{
LogEvent($"Colored slider: {(int)e.NewValue}");
}
}

91
samples/ShellDemo/Pages/TextInputPage.xaml Normal file
View File

@@ -0,0 +1,91 @@
<?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.TextInputPage"
Title="Text Input"
BackgroundColor="{StaticResource PageBackground}">
<ScrollView>
<VerticalStackLayout Padding="20" Spacing="15">
<Label Text="Text Input Controls"
FontSize="24"
FontAttributes="Bold" />
<Label Text="Click on any field and start typing. All keyboard input is handled by the framework."
FontSize="14"
TextColor="{StaticResource TextSecondary}" />
<!-- Entry Section -->
<BoxView HeightRequest="1" Color="#E0E0E0" />
<Label Text="Entry (Single Line)" FontSize="18" FontAttributes="Bold" />
<Entry x:Name="NameEntry"
Placeholder="Enter your name..."
FontSize="14"
TextChanged="OnNameEntryTextChanged" />
<Label x:Name="EntryOutput"
FontSize="12"
TextColor="{StaticResource TextSecondary}" />
<Entry Placeholder="Enter your email..."
FontSize="14"
Keyboard="Email" />
<Label Text="Email keyboard type"
FontSize="12"
TextColor="{StaticResource TextSecondary}" />
<Entry Placeholder="Enter password..."
FontSize="14"
IsPassword="True" />
<Label Text="Password field (text hidden)"
FontSize="12"
TextColor="{StaticResource TextSecondary}" />
<!-- SearchBar Section -->
<BoxView HeightRequest="1" Color="#E0E0E0" />
<Label Text="SearchBar" FontSize="18" FontAttributes="Bold" />
<SearchBar x:Name="DemoSearchBar"
Placeholder="Search for items..."
TextChanged="OnSearchTextChanged"
SearchButtonPressed="OnSearchButtonPressed" />
<Label x:Name="SearchOutput"
FontSize="12"
TextColor="{StaticResource TextSecondary}" />
<!-- Editor Section -->
<BoxView HeightRequest="1" Color="#E0E0E0" />
<Label Text="Editor (Multi-line)" FontSize="18" FontAttributes="Bold" />
<Editor x:Name="DemoEditor"
Placeholder="Enter multiple lines of text here...&#10;Press Enter to create new lines."
HeightRequest="120"
FontSize="14"
TextChanged="OnEditorTextChanged" />
<Label x:Name="EditorOutput"
FontSize="12"
TextColor="{StaticResource TextSecondary}" />
<!-- Keyboard Shortcuts Info -->
<BoxView HeightRequest="1" Color="#E0E0E0" />
<Border BackgroundColor="#E3F2FD"
Padding="15"
StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<VerticalStackLayout Spacing="5">
<Label Text="Keyboard Shortcuts" FontAttributes="Bold" />
<Label Text="Ctrl+A: Select all" />
<Label Text="Ctrl+C: Copy" />
<Label Text="Ctrl+V: Paste" />
<Label Text="Ctrl+X: Cut" />
<Label Text="Home/End: Move to start/end" />
<Label Text="Shift+Arrow: Select text" />
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</ScrollView>
</ContentPage>

33
samples/ShellDemo/Pages/TextInputPage.xaml.cs Normal file
View File

@@ -0,0 +1,33 @@
using System;
using Microsoft.Maui.Controls;
namespace ShellDemo.Pages;
public partial class TextInputPage : ContentPage
{
public TextInputPage()
{
InitializeComponent();
}
private void OnNameEntryTextChanged(object? sender, TextChangedEventArgs e)
{
EntryOutput.Text = $"You typed: {e.NewTextValue}";
}
private void OnSearchTextChanged(object? sender, TextChangedEventArgs e)
{
SearchOutput.Text = $"Searching: {e.NewTextValue}";
}
private void OnSearchButtonPressed(object? sender, EventArgs e)
{
SearchOutput.Text = $"Search submitted: {DemoSearchBar.Text}";
}
private void OnEditorTextChanged(object? sender, TextChangedEventArgs e)
{
var lineCount = string.IsNullOrEmpty(e.NewTextValue) ? 0 : e.NewTextValue.Split('\n').Length;
EditorOutput.Text = $"Lines: {lineCount}, Characters: {e.NewTextValue?.Length ?? 0}";
}
}

12
samples/ShellDemo/Program.cs Normal file
View File

@@ -0,0 +1,12 @@
using Microsoft.Maui.Platform.Linux.Hosting;
namespace ShellDemo;
public class Program
{
[STAThread]
public static void Main(string[] args)
{
LinuxProgramHost.Run(args, MauiProgram.CreateMauiApp);
}
}

20
samples/ShellDemo/ShellDemo.csproj Normal file
View File

@@ -0,0 +1,20 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
<OutputType>Exe</OutputType>
<RootNamespace>ShellDemo</RootNamespace>
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<UseMaui>true</UseMaui>
<ApplicationTitle>OpenMaui Controls Demo</ApplicationTitle>
<ApplicationId>com.openmaui.shelldemo</ApplicationId>
<ApplicationVersion>1.0</ApplicationVersion>
<SupportedOSPlatformVersion>9.0</SupportedOSPlatformVersion>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..\..\OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
</Project>