maui-linux-samples/WebViewDemo/Pages/WebViewPage.xaml

<?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="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <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="{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"
                             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"
                             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"
                             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>

        <!-- URL Bar -->
        <Border Grid.Row="2"
                BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
                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"
                       TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
                       PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                       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>

            <WebView 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>

            <Label x:Name="StatusLabel"
                   Text="Ready"
                   FontSize="13"
                   TextColor="White"
                   HorizontalOptions="Center" />
        </Border>

    </Grid>
</ContentPage>