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

Improvements

Browse Source
This commit is contained in:
David H. Friedel Jr.
2026-01-17 05:42:44 +00:00
parent fc113166d6
commit 71f6aa1179
10 changed files with 269 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ShellDemo/App.xaml.cs
View File

@@ -9,6 +9,10 @@ public partial class App : Application
public App()
{
InitializeComponent();
MainPage = new AppShell();
}
protected override Window CreateWindow(IActivationState? activationState)
{
return new Window(new AppShell());
}
}

6
ShellDemo/Pages/ListsPage.xaml
View File

@@ -30,7 +30,7 @@
BackgroundColor="{AppThemeBinding Light=#FAFAFA, Dark=#2C2C2C}"
SelectionChanged="OnFruitsSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<DataTemplate x:DataType="x:String">
<Label Text="{Binding}"
Padding="10"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
@@ -58,7 +58,7 @@
BackgroundColor="{AppThemeBinding Light=White, Dark=#1E1E1E}"
SelectionChanged="OnColorsSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<DataTemplate x:DataType="x:String">
<Label Text="{Binding}"
Padding="10"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
@@ -86,7 +86,7 @@
BackgroundColor="{AppThemeBinding Light=White, Dark=#1E1E1E}"
SelectionChanged="OnContactsSelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<DataTemplate x:DataType="x:String">
<Label Text="{Binding}"
Padding="10"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />

20
ShellDemo/ShellDemo.csproj
View File

@@ -6,12 +6,32 @@
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
<!-- Application Info -->
<ApplicationTitle>OpenMaui Shell Demo</ApplicationTitle>
<ApplicationId>com.openmaui.shelldemo</ApplicationId>
<ApplicationVersion>1.0.0</ApplicationVersion>
<!-- MAUI Settings -->
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<EnableDefaultXamlItems>true</EnableDefaultXamlItems>
<!-- Linux Runtime -->
<RuntimeIdentifiers>linux-x64;linux-arm64</RuntimeIdentifiers>
</PropertyGroup>
<ItemGroup>
<!-- OpenMaui Linux Platform (local development reference) -->
<ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
<!-- XAML Files -->
<ItemGroup>
<MauiXaml Update="**/*.xaml" />
</ItemGroup>
<!-- Embedded Resources (icons) -->
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>

9
TodoApp/App.xaml.cs
View File

@@ -11,9 +11,12 @@ public partial class App : Application
public App()
{
InitializeComponent();
}
protected override Window CreateWindow(IActivationState? activationState)
{
// Determine current theme for navigation bar colors
var isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
var isDarkMode = Current?.RequestedTheme == AppTheme.Dark;
var barBackground = isDarkMode ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
NavigationPage = new NavigationPage(new TodoListPage())
@@ -24,12 +27,12 @@ public partial class App : Application
};
// Update navigation bar when theme changes
Application.Current!.RequestedThemeChanged += (s, e) =>
Current!.RequestedThemeChanged += (s, e) =>
{
var dark = e.RequestedTheme == AppTheme.Dark;
NavigationPage.BarBackgroundColor = dark ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
};
MainPage = NavigationPage;
return new Window(NavigationPage);
}
}

20
TodoApp/TodoApp.csproj
View File

@@ -6,12 +6,32 @@
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
<!-- Application Info -->
<ApplicationTitle>OpenMaui Todo</ApplicationTitle>
<ApplicationId>com.openmaui.todoapp</ApplicationId>
<ApplicationVersion>1.0.0</ApplicationVersion>
<!-- MAUI Settings -->
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<EnableDefaultXamlItems>true</EnableDefaultXamlItems>
<!-- Linux Runtime -->
<RuntimeIdentifiers>linux-x64;linux-arm64</RuntimeIdentifiers>
</PropertyGroup>
<ItemGroup>
<!-- OpenMaui Linux Platform (local development reference) -->
<ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
<!-- XAML Files -->
<ItemGroup>
<MauiXaml Update="**/*.xaml" />
</ItemGroup>
<!-- Embedded Resources (icons) -->
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>

9
WebViewDemo/App.xaml.cs
View File

@@ -11,9 +11,12 @@ public partial class App : Application
public App()
{
InitializeComponent();
}
protected override Window CreateWindow(IActivationState? activationState)
{
// Determine current theme for navigation bar colors
var isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
var isDarkMode = Current?.RequestedTheme == AppTheme.Dark;
var barBackground = isDarkMode ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
NavigationPage = new NavigationPage(new WebViewPage())
@@ -24,12 +27,12 @@ public partial class App : Application
};
// Update navigation bar when theme changes
Application.Current!.RequestedThemeChanged += (s, e) =>
Current!.RequestedThemeChanged += (s, e) =>
{
var dark = e.RequestedTheme == AppTheme.Dark;
NavigationPage.BarBackgroundColor = dark ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
};
MainPage = NavigationPage;
return new Window(NavigationPage);
}
}

211
WebViewDemo/Pages/WebViewPage.xaml
View File

@@ -2,147 +2,136 @@
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.WebViewPage"
Title="WebView Demo"
Title="OpenMaui Browser"
BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto" Padding="16" RowSpacing="12">
<Grid RowDefinitions="Auto,*,Auto">
<!-- Header -->
<Label Grid.Row="0"
Text="WebView Demo - WebKitGTK"
FontSize="22"
FontAttributes="Bold"
TextColor="{StaticResource PrimaryColor}"
HorizontalOptions="Center" />
<!-- Browser Toolbar -->
<Grid Grid.Row="0"
ColumnDefinitions="Auto,Auto,Auto,*,Auto,Auto,Auto"
ColumnSpacing="4"
Padding="8"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}">
<!-- Navigation Bar -->
<Border Grid.Row="1"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0"
Padding="12">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
<ImageButton x:Name="BackButton"
<!-- Back Button -->
<ImageButton Grid.Column="0"
x:Name="BackButton"
Source="{AppThemeBinding Light=arrow_back_light.svg, Dark=arrow_back_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource ButtonColor}"
CornerRadius="8"
Clicked="OnBackClicked" />
<ImageButton x:Name="ForwardButton"
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="Transparent"
Clicked="OnBackClicked"
ToolTipProperties.Text="Go Back" />
<!-- Forward Button -->
<ImageButton Grid.Column="1"
x:Name="ForwardButton"
Source="{AppThemeBinding Light=arrow_forward_light.svg, Dark=arrow_forward_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource ButtonColor}"
CornerRadius="8"
Clicked="OnForwardClicked" />
<ImageButton x:Name="ReloadButton"
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="Transparent"
Clicked="OnForwardClicked"
ToolTipProperties.Text="Go Forward" />
<!-- Reload Button -->
<ImageButton Grid.Column="2"
x:Name="ReloadButton"
Source="{AppThemeBinding Light=refresh_light.svg, Dark=refresh_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource ButtonColor}"
CornerRadius="8"
Clicked="OnReloadClicked" />
</HorizontalStackLayout>
</Border>
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="Transparent"
Clicked="OnReloadClicked"
ToolTipProperties.Text="Reload Page" />
<!-- URL Bar -->
<Border Grid.Row="2"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0"
Padding="12">
<Border Grid.Column="3"
BackgroundColor="{AppThemeBinding Light=#F0F0F0, Dark=#2A2A2A}"
StrokeThickness="1"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
Padding="8,4"
Margin="4,0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
<RoundRectangle CornerRadius="18" />
</Border.StrokeShape>
<Grid ColumnDefinitions="*,Auto" ColumnSpacing="8">
<Entry x:Name="UrlEntry"
Grid.Column="0"
Placeholder="Enter URL..."
Placeholder="Enter URL or search..."
Text="https://dotnet.microsoft.com"
FontSize="14"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
BackgroundColor="Transparent"
VerticalOptions="Center"
Completed="OnUrlSubmitted" />
<ImageButton x:Name="GoButton"
Grid.Column="1"
Source="{AppThemeBinding Light=send_light.svg, Dark=send_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource AccentColor}"
CornerRadius="8"
Clicked="OnGoClicked" />
</Grid>
</Border>
<!-- WebView -->
<Border Grid.Row="3"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="1"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<!-- Go Button -->
<ImageButton Grid.Column="4"
x:Name="GoButton"
Source="{AppThemeBinding Light=send_light.svg, Dark=send_dark.svg}"
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="{StaticResource AccentColor}"
CornerRadius="18"
Clicked="OnGoClicked"
ToolTipProperties.Text="Navigate" />
<WebView x:Name="MainWebView"
<!-- Load HTML Demo Button -->
<ImageButton Grid.Column="5"
x:Name="LoadHtmlButton"
Source="{AppThemeBinding Light=code_light.svg, Dark=code_dark.svg}"
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="Transparent"
Clicked="OnLoadHtmlClicked"
ToolTipProperties.Text="Load Demo HTML" />
<!-- Eval JS Demo Button -->
<ImageButton Grid.Column="6"
x:Name="EvalJsButton"
Source="{AppThemeBinding Light=play_arrow_light.svg, Dark=play_arrow_dark.svg}"
WidthRequest="36"
HeightRequest="36"
Padding="8"
BackgroundColor="Transparent"
Clicked="OnEvalJsClicked"
ToolTipProperties.Text="Run JavaScript" />
</Grid>
<!-- Loading Progress Bar -->
<ProgressBar Grid.Row="1"
x:Name="LoadingProgress"
VerticalOptions="Start"
HeightRequest="3"
ProgressColor="{StaticResource AccentColor}"
Progress="0"
IsVisible="False"
ZIndex="1" />
<!-- WebView - Main Content Area -->
<WebView Grid.Row="1"
x:Name="MainWebView"
VerticalOptions="Fill"
HorizontalOptions="Fill"
Navigating="OnNavigating"
Navigated="OnNavigated" />
</Border>
<!-- Action Buttons -->
<Border Grid.Row="4"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0"
Padding="12">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
<HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
<ImageButton x:Name="LoadHtmlButton"
Source="{AppThemeBinding Light=code_light.svg, Dark=code_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource PrimaryColor}"
CornerRadius="8"
Clicked="OnLoadHtmlClicked" />
<ImageButton x:Name="EvalJsButton"
Source="{AppThemeBinding Light=play_arrow_light.svg, Dark=play_arrow_dark.svg}"
WidthRequest="44"
HeightRequest="44"
Padding="10"
BackgroundColor="{StaticResource PrimaryColor}"
CornerRadius="8"
Clicked="OnEvalJsClicked" />
</HorizontalStackLayout>
</Border>
<!-- Status Bar -->
<Border Grid.Row="5"
BackgroundColor="{StaticResource PrimaryDarkColor}"
StrokeThickness="0"
Padding="12,8">
<Border.StrokeShape>
<RoundRectangle CornerRadius="6" />
</Border.StrokeShape>
<Grid Grid.Row="2"
Padding="8,4"
BackgroundColor="{AppThemeBinding Light=#E8E8E8, Dark=#1A1A1A}">
<Label x:Name="StatusLabel"
Text="Ready"
FontSize="13"
TextColor="White"
HorizontalOptions="Center" />
</Border>
FontSize="12"
TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
VerticalOptions="Center" />
</Grid>
</Grid>
</ContentPage>

78
WebViewDemo/Pages/WebViewPage.xaml.cs
View File

@@ -6,6 +6,8 @@ namespace WebViewDemo;
public partial class WebViewPage : ContentPage
{
private CancellationTokenSource? _progressCts;
public WebViewPage()
{
Console.WriteLine("[WebViewPage] Constructor starting");
@@ -70,10 +72,16 @@ public partial class WebViewPage : ContentPage
{
StatusLabel.Text = $"Loading: {e.Url}";
Console.WriteLine($"[WebViewPage] Navigating to: {e.Url}");
// Start progress animation
StartProgressAnimation();
}
private void OnNavigated(object? sender, WebNavigatedEventArgs e)
{
// Stop progress animation and complete
StopProgressAnimation(e.Result == WebNavigationResult.Success);
StatusLabel.Text = e.Result == WebNavigationResult.Success
? $"Loaded: {e.Url}"
: $"Failed: {e.Result}";
@@ -82,9 +90,68 @@ public partial class WebViewPage : ContentPage
Console.WriteLine($"[WebViewPage] Navigated: {e.Result} - {e.Url}");
}
private void OnLoadHtmlClicked(object? sender, EventArgs e)
private void StartProgressAnimation()
{
// Cancel any existing animation
_progressCts?.Cancel();
_progressCts = new CancellationTokenSource();
// Show and reset progress bar
LoadingProgress.Progress = 0;
LoadingProgress.IsVisible = true;
// Animate progress (simulated since WebView doesn't report actual progress)
var token = _progressCts.Token;
Dispatcher.Dispatch(async () =>
{
try
{
// Quick initial progress
await LoadingProgress.ProgressTo(0.3, 200, Easing.CubicOut);
if (token.IsCancellationRequested) return;
// Slower middle progress
await LoadingProgress.ProgressTo(0.6, 500, Easing.Linear);
if (token.IsCancellationRequested) return;
// Even slower as we wait
await LoadingProgress.ProgressTo(0.85, 1000, Easing.CubicIn);
}
catch (TaskCanceledException)
{
// Expected when navigation completes
}
});
}
private void StopProgressAnimation(bool success)
{
_progressCts?.Cancel();
Dispatcher.Dispatch(async () =>
{
if (success)
{
// Complete the progress bar
await LoadingProgress.ProgressTo(1.0, 150, Easing.CubicOut);
await Task.Delay(100);
}
// Hide the progress bar
LoadingProgress.IsVisible = false;
LoadingProgress.Progress = 0;
});
}
private async void OnLoadHtmlClicked(object? sender, EventArgs e)
{
Console.WriteLine("[WebViewPage] Load HTML button clicked");
StatusLabel.Text = "Loading demo HTML...";
// Show quick progress for HTML loading
LoadingProgress.Progress = 0;
LoadingProgress.IsVisible = true;
await LoadingProgress.ProgressTo(0.5, 100, Easing.CubicOut);
var html = @"
<!DOCTYPE html>
@@ -156,7 +223,14 @@ public partial class WebViewPage : ContentPage
</html>";
MainWebView.Source = new HtmlWebViewSource { Html = html };
StatusLabel.Text = "Loaded custom HTML";
// Complete progress
await LoadingProgress.ProgressTo(1.0, 100, Easing.CubicOut);
await Task.Delay(100);
LoadingProgress.IsVisible = false;
StatusLabel.Text = "Loaded demo HTML";
UrlEntry.Text = "about:demo";
}
private async void OnEvalJsClicked(object? sender, EventArgs e)

7
WebViewDemo/Program.cs
View File

@@ -43,8 +43,11 @@ class Program
// Create the MAUI app with all handlers registered
var app = MauiProgram.CreateMauiApp();
// Run on Linux platform
LinuxApplication.Run(app, args);
// Run on Linux platform with GTK mode for WebView support
LinuxApplication.Run(app, args, options =>
{
options.UseGtk = true;
});
}
catch (Exception ex)
{

20
WebViewDemo/WebViewDemo.csproj
View File

@@ -6,12 +6,32 @@
<ImplicitUsings>enable</ImplicitUsings>
<Nullable>enable</Nullable>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
<!-- Application Info -->
<ApplicationTitle>OpenMaui WebView Demo</ApplicationTitle>
<ApplicationId>com.openmaui.webviewdemo</ApplicationId>
<ApplicationVersion>1.0.0</ApplicationVersion>
<!-- MAUI Settings -->
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<EnableDefaultXamlItems>true</EnableDefaultXamlItems>
<!-- Linux Runtime -->
<RuntimeIdentifiers>linux-x64;linux-arm64</RuntimeIdentifiers>
</PropertyGroup>
<ItemGroup>
<!-- OpenMaui Linux Platform (local development reference) -->
<ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
<!-- XAML Files -->
<ItemGroup>
<MauiXaml Update="**/*.xaml" />
</ItemGroup>
<!-- Embedded Resources (icons) -->
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>