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

Icon work - and apptheming

Browse Source
This commit is contained in:
David H. Friedel Jr.
2026-01-11 13:34:36 -05:00
parent 50cc186d6d
commit 8531f2b972
50 changed files with 441 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
WebViewDemo/App.cs
View File

@@ -1,21 +0,0 @@
// App.cs - Main Application with NavigationPage
using Microsoft.Maui.Controls;
namespace WebViewDemo;
public class App : Application
{
public static NavigationPage? NavigationPage { get; private set; }
public App()
{
NavigationPage = new NavigationPage(new WebViewPage())
{
Title = "OpenMaui WebView Demo",
BarBackgroundColor = Color.FromArgb("#5C6BC0"),
BarTextColor = Colors.White
};
MainPage = NavigationPage;
}
}

71
WebViewDemo/App.xaml Normal file
View File

@@ -0,0 +1,71 @@
<?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="WebViewDemo.App">
<Application.Resources>
<ResourceDictionary>
<!-- Primary Brand Colors -->
<Color x:Key="PrimaryColor">#5C6BC0</Color>
<Color x:Key="PrimaryDarkColor">#3949AB</Color>
<Color x:Key="AccentColor">#26A69A</Color>
<Color x:Key="ButtonColor">#667EEA</Color>
<!-- Light Theme Colors -->
<Color x:Key="PageBackgroundLight">#F5F7FA</Color>
<Color x:Key="CardBackgroundLight">#FFFFFF</Color>
<Color x:Key="TextPrimaryLight">#212121</Color>
<Color x:Key="TextSecondaryLight">#757575</Color>
<Color x:Key="BorderLight">#E0E0E0</Color>
<!-- Dark Theme Colors -->
<Color x:Key="PageBackgroundDark">#121212</Color>
<Color x:Key="CardBackgroundDark">#1E1E1E</Color>
<Color x:Key="TextPrimaryDark">#FFFFFF</Color>
<Color x:Key="TextSecondaryDark">#B0B0B0</Color>
<Color x:Key="BorderDark">#424242</Color>
<!-- Navigation Bar Colors -->
<Color x:Key="NavBarBackgroundLight">#5C6BC0</Color>
<Color x:Key="NavBarBackgroundDark">#3949AB</Color>
<!-- Themed Styles -->
<Style x:Key="ThemedCard" TargetType="Border">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}" />
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="Padding" Value="12" />
<Setter Property="StrokeShape">
<Setter.Value>
<RoundRectangle CornerRadius="8" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ThemedEntry" TargetType="Entry">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
<Setter Property="BackgroundColor" Value="Transparent" />
</Style>
<Style x:Key="NavButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="HeightRequest" Value="36" />
<Setter Property="FontSize" Value="13" />
</Style>
<Style x:Key="PrimaryButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="HeightRequest" Value="36" />
<Setter Property="FontSize" Value="13" />
</Style>
<Style x:Key="AccentButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="HeightRequest" Value="36" />
<Setter Property="FontSize" Value="13" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

35
WebViewDemo/App.xaml.cs Normal file
View File

@@ -0,0 +1,35 @@
// App.xaml.cs - Main Application with NavigationPage and Theme Support
using Microsoft.Maui.Controls;
namespace WebViewDemo;
public partial class App : Application
{
public static NavigationPage? NavigationPage { get; private set; }
public App()
{
InitializeComponent();
// Determine current theme for navigation bar colors
var isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
var barBackground = isDarkMode ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
NavigationPage = new NavigationPage(new WebViewPage())
{
Title = "OpenMaui WebView Demo",
BarBackgroundColor = barBackground,
BarTextColor = Colors.White
};
// Update navigation bar when theme changes
Application.Current!.RequestedThemeChanged += (s, e) =>
{
var dark = e.RequestedTheme == AppTheme.Dark;
NavigationPage.BarBackgroundColor = dark ? Color.FromArgb("#3949AB") : Color.FromArgb("#5C6BC0");
};
MainPage = NavigationPage;
}
}

130
WebViewDemo/Pages/WebViewPage.xaml
View File

@@ -3,19 +3,7 @@
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>
BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto" Padding="16" RowSpacing="12">
@@ -29,44 +17,44 @@
<!-- Navigation Bar -->
<Border Grid.Row="1"
BackgroundColor="{StaticResource CardBackground}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
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 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="{StaticResource CardBackground}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0"
Padding="12">
<Border.StrokeShape>
@@ -79,25 +67,27 @@
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" />
<Button x:Name="GoButton"
Grid.Column="1"
Text="Go"
WidthRequest="60"
HeightRequest="36"
FontSize="13"
BackgroundColor="{StaticResource AccentColor}"
TextColor="White"
Clicked="OnGoClicked" />
<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="{StaticResource CardBackground}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="1"
Stroke="#E0E0E0">
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8" />
</Border.StrokeShape>
@@ -111,36 +101,36 @@
<!-- Action Buttons -->
<Border Grid.Row="4"
BackgroundColor="{StaticResource CardBackground}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
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 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 PrimaryDark}"
BackgroundColor="{StaticResource PrimaryDarkColor}"
StrokeThickness="0"
Padding="12,8">
<Border.StrokeShape>

1
WebViewDemo/Resources/Images/arrow_back_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

1
WebViewDemo/Resources/Images/arrow_back_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 185 B

1
WebViewDemo/Resources/Images/arrow_forward_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

1
WebViewDemo/Resources/Images/arrow_forward_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

1
WebViewDemo/Resources/Images/code_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

1
WebViewDemo/Resources/Images/code_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

1
WebViewDemo/Resources/Images/play_arrow_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

1
WebViewDemo/Resources/Images/play_arrow_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 186 B

1
WebViewDemo/Resources/Images/refresh_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

1
WebViewDemo/Resources/Images/refresh_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 329 B

1
WebViewDemo/Resources/Images/send_dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#FFFFFF" d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

1
WebViewDemo/Resources/Images/send_light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#212121" d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

4
WebViewDemo/WebViewDemo.csproj
View File

@@ -12,4 +12,8 @@
<ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>
</Project>