AppTheming and XAML
This commit is contained in:
158
WebViewDemo/Pages/WebViewPage.xaml
Normal file
158
WebViewDemo/Pages/WebViewPage.xaml
Normal file
@@ -0,0 +1,158 @@
|
||||
<?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="WebViewDemo.WebViewPage"
|
||||
Title="WebView Demo"
|
||||
BackgroundColor="#F5F7FA">
|
||||
|
||||
<ContentPage.Resources>
|
||||
<ResourceDictionary>
|
||||
<Color x:Key="PrimaryColor">#5C6BC0</Color>
|
||||
<Color x:Key="PrimaryDark">#3949AB</Color>
|
||||
<Color x:Key="AccentColor">#26A69A</Color>
|
||||
<Color x:Key="ButtonColor">#667EEA</Color>
|
||||
<Color x:Key="TextPrimary">#212121</Color>
|
||||
<Color x:Key="TextSecondary">#757575</Color>
|
||||
<Color x:Key="CardBackground">#FFFFFF</Color>
|
||||
</ResourceDictionary>
|
||||
</ContentPage.Resources>
|
||||
|
||||
<Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto" Padding="16" RowSpacing="12">
|
||||
|
||||
<!-- Header -->
|
||||
<Label Grid.Row="0"
|
||||
Text="WebView Demo - WebKitGTK"
|
||||
FontSize="22"
|
||||
FontAttributes="Bold"
|
||||
TextColor="{StaticResource PrimaryColor}"
|
||||
HorizontalOptions="Center" />
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<Border Grid.Row="1"
|
||||
BackgroundColor="{StaticResource CardBackground}"
|
||||
StrokeThickness="0"
|
||||
Padding="12">
|
||||
<Border.StrokeShape>
|
||||
<RoundRectangle CornerRadius="8" />
|
||||
</Border.StrokeShape>
|
||||
|
||||
<HorizontalStackLayout Spacing="8" HorizontalOptions="Center">
|
||||
<Button x:Name="BackButton"
|
||||
Text="Back"
|
||||
WidthRequest="70"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource ButtonColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnBackClicked" />
|
||||
<Button x:Name="ForwardButton"
|
||||
Text="Forward"
|
||||
WidthRequest="80"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource ButtonColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnForwardClicked" />
|
||||
<Button x:Name="ReloadButton"
|
||||
Text="Reload"
|
||||
WidthRequest="70"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource ButtonColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnReloadClicked" />
|
||||
</HorizontalStackLayout>
|
||||
</Border>
|
||||
|
||||
<!-- URL Bar -->
|
||||
<Border Grid.Row="2"
|
||||
BackgroundColor="{StaticResource CardBackground}"
|
||||
StrokeThickness="0"
|
||||
Padding="12">
|
||||
<Border.StrokeShape>
|
||||
<RoundRectangle CornerRadius="8" />
|
||||
</Border.StrokeShape>
|
||||
|
||||
<Grid ColumnDefinitions="*,Auto" ColumnSpacing="8">
|
||||
<Entry x:Name="UrlEntry"
|
||||
Grid.Column="0"
|
||||
Placeholder="Enter URL..."
|
||||
Text="https://dotnet.microsoft.com"
|
||||
FontSize="14"
|
||||
VerticalOptions="Center"
|
||||
Completed="OnUrlSubmitted" />
|
||||
<Button x:Name="GoButton"
|
||||
Grid.Column="1"
|
||||
Text="Go"
|
||||
WidthRequest="60"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource AccentColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnGoClicked" />
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- WebView -->
|
||||
<Border Grid.Row="3"
|
||||
BackgroundColor="{StaticResource CardBackground}"
|
||||
StrokeThickness="1"
|
||||
Stroke="#E0E0E0">
|
||||
<Border.StrokeShape>
|
||||
<RoundRectangle CornerRadius="8" />
|
||||
</Border.StrokeShape>
|
||||
|
||||
<WebView x:Name="MainWebView"
|
||||
VerticalOptions="Fill"
|
||||
HorizontalOptions="Fill"
|
||||
Navigating="OnNavigating"
|
||||
Navigated="OnNavigated" />
|
||||
</Border>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<Border Grid.Row="4"
|
||||
BackgroundColor="{StaticResource CardBackground}"
|
||||
StrokeThickness="0"
|
||||
Padding="12">
|
||||
<Border.StrokeShape>
|
||||
<RoundRectangle CornerRadius="8" />
|
||||
</Border.StrokeShape>
|
||||
|
||||
<HorizontalStackLayout Spacing="8" HorizontalOptions="Center">
|
||||
<Button x:Name="LoadHtmlButton"
|
||||
Text="Load HTML"
|
||||
WidthRequest="110"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource PrimaryColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnLoadHtmlClicked" />
|
||||
<Button x:Name="EvalJsButton"
|
||||
Text="Run JS"
|
||||
WidthRequest="90"
|
||||
HeightRequest="36"
|
||||
FontSize="13"
|
||||
BackgroundColor="{StaticResource PrimaryColor}"
|
||||
TextColor="White"
|
||||
Clicked="OnEvalJsClicked" />
|
||||
</HorizontalStackLayout>
|
||||
</Border>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<Border Grid.Row="5"
|
||||
BackgroundColor="{StaticResource PrimaryDark}"
|
||||
StrokeThickness="0"
|
||||
Padding="12,8">
|
||||
<Border.StrokeShape>
|
||||
<RoundRectangle CornerRadius="6" />
|
||||
</Border.StrokeShape>
|
||||
|
||||
<Label x:Name="StatusLabel"
|
||||
Text="Ready"
|
||||
FontSize="13"
|
||||
TextColor="White"
|
||||
HorizontalOptions="Center" />
|
||||
</Border>
|
||||
|
||||
</Grid>
|
||||
</ContentPage>
|
||||
178
WebViewDemo/Pages/WebViewPage.xaml.cs
Normal file
178
WebViewDemo/Pages/WebViewPage.xaml.cs
Normal file
@@ -0,0 +1,178 @@
|
||||
// WebViewPage - Main page demonstrating WebView with WebKitGTK
|
||||
|
||||
using Microsoft.Maui.Controls;
|
||||
|
||||
namespace WebViewDemo;
|
||||
|
||||
public partial class WebViewPage : ContentPage
|
||||
{
|
||||
public WebViewPage()
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Constructor starting");
|
||||
InitializeComponent();
|
||||
|
||||
// Set initial URL
|
||||
MainWebView.Source = new UrlWebViewSource { Url = "https://dotnet.microsoft.com" };
|
||||
|
||||
Console.WriteLine("[WebViewPage] Constructor finished");
|
||||
}
|
||||
|
||||
private void OnBackClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Back button clicked");
|
||||
if (MainWebView.CanGoBack)
|
||||
{
|
||||
MainWebView.GoBack();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnForwardClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Forward button clicked");
|
||||
if (MainWebView.CanGoForward)
|
||||
{
|
||||
MainWebView.GoForward();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnReloadClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Reload button clicked");
|
||||
MainWebView.Reload();
|
||||
}
|
||||
|
||||
private void OnGoClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Navigate();
|
||||
}
|
||||
|
||||
private void OnUrlSubmitted(object? sender, EventArgs e)
|
||||
{
|
||||
Navigate();
|
||||
}
|
||||
|
||||
private void Navigate()
|
||||
{
|
||||
var url = UrlEntry.Text?.Trim();
|
||||
if (string.IsNullOrEmpty(url))
|
||||
return;
|
||||
|
||||
// Add https:// if not present
|
||||
if (!url.StartsWith("http://") && !url.StartsWith("https://"))
|
||||
url = "https://" + url;
|
||||
|
||||
Console.WriteLine($"[WebViewPage] Navigating to: {url}");
|
||||
MainWebView.Source = new UrlWebViewSource { Url = url };
|
||||
UrlEntry.Text = url;
|
||||
}
|
||||
|
||||
private void OnNavigating(object? sender, WebNavigatingEventArgs e)
|
||||
{
|
||||
StatusLabel.Text = $"Loading: {e.Url}";
|
||||
Console.WriteLine($"[WebViewPage] Navigating to: {e.Url}");
|
||||
}
|
||||
|
||||
private void OnNavigated(object? sender, WebNavigatedEventArgs e)
|
||||
{
|
||||
StatusLabel.Text = e.Result == WebNavigationResult.Success
|
||||
? $"Loaded: {e.Url}"
|
||||
: $"Failed: {e.Result}";
|
||||
|
||||
UrlEntry.Text = e.Url;
|
||||
Console.WriteLine($"[WebViewPage] Navigated: {e.Result} - {e.Url}");
|
||||
}
|
||||
|
||||
private void OnLoadHtmlClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Load HTML button clicked");
|
||||
|
||||
var html = @"
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenMaui WebView</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
margin: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.feature-list {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
li {
|
||||
margin: 10px 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
button {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
font-size: 1.1em;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
button:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello from OpenMaui Linux!</h1>
|
||||
<p>This HTML content is rendered by WebKitGTK inside your .NET MAUI application.</p>
|
||||
|
||||
<div class='feature-list'>
|
||||
<h2>WebView Features:</h2>
|
||||
<ul>
|
||||
<li>Full HTML5 support</li>
|
||||
<li>CSS3 animations and transitions</li>
|
||||
<li>JavaScript execution</li>
|
||||
<li>Navigation history (back/forward)</li>
|
||||
<li>WebGL and canvas support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button onclick=""alert('Hello from JavaScript!')"">Click Me!</button>
|
||||
|
||||
<p style='margin-top: 30px; opacity: 0.8;'>
|
||||
Powered by WebKitGTK - the same engine used by GNOME Web (Epiphany)
|
||||
</p>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
MainWebView.Source = new HtmlWebViewSource { Html = html };
|
||||
StatusLabel.Text = "Loaded custom HTML";
|
||||
}
|
||||
|
||||
private async void OnEvalJsClicked(object? sender, EventArgs e)
|
||||
{
|
||||
Console.WriteLine("[WebViewPage] Run JS button clicked");
|
||||
|
||||
try
|
||||
{
|
||||
var result = await MainWebView.EvaluateJavaScriptAsync("document.title");
|
||||
StatusLabel.Text = $"JS Result: {result ?? "(null)"}";
|
||||
Console.WriteLine($"[WebViewPage] JS Eval result: {result}");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
StatusLabel.Text = $"JS Error: {ex.Message}";
|
||||
Console.WriteLine($"[WebViewPage] JS Error: {ex.Message}");
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user