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

72
ShellDemo/AppShell.xaml
View File

@@ -44,92 +44,56 @@
</Shell.FlyoutHeader>
<!-- Home -->
<FlyoutItem Title="Home" Route="Home">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F3E0;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Home" Route="Home"
Icon="{AppThemeBinding Light=home_light.svg, Dark=home_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
</FlyoutItem>
<!-- Buttons -->
<FlyoutItem Title="Buttons" Route="Buttons">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F518;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Buttons" Route="Buttons"
Icon="{AppThemeBinding Light=smart_button_light.svg, Dark=smart_button_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:ButtonsPage}" />
</FlyoutItem>
<!-- Text Input -->
<FlyoutItem Title="Text Input" Route="TextInput">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F4DD;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Text Input" Route="TextInput"
Icon="{AppThemeBinding Light=edit_note_light.svg, Dark=edit_note_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:TextInputPage}" />
</FlyoutItem>
<!-- Selection -->
<FlyoutItem Title="Selection" Route="Selection">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x2611;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Selection" Route="Selection"
Icon="{AppThemeBinding Light=check_box_light.svg, Dark=check_box_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:SelectionPage}" />
</FlyoutItem>
<!-- Pickers -->
<FlyoutItem Title="Pickers" Route="Pickers">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F4C5;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Pickers" Route="Pickers"
Icon="{AppThemeBinding Light=calendar_month_light.svg, Dark=calendar_month_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:PickersPage}" />
</FlyoutItem>
<!-- Lists -->
<FlyoutItem Title="Lists" Route="Lists">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F4CB;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Lists" Route="Lists"
Icon="{AppThemeBinding Light=format_list_bulleted_light.svg, Dark=format_list_bulleted_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:ListsPage}" />
</FlyoutItem>
<!-- Progress -->
<FlyoutItem Title="Progress" Route="Progress">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x23F3;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Progress" Route="Progress"
Icon="{AppThemeBinding Light=hourglass_empty_light.svg, Dark=hourglass_empty_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:ProgressPage}" />
</FlyoutItem>
<!-- Grids -->
<FlyoutItem Title="Grids" Route="Grids">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x1F4CA;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="Grids" Route="Grids"
Icon="{AppThemeBinding Light=grid_view_light.svg, Dark=grid_view_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:GridsPage}" />
</FlyoutItem>
<!-- About -->
<FlyoutItem Title="About" Route="About">
<FlyoutItem.Icon>
<FontImageSource Glyph="&#x2139;"
FontFamily="Default"
Color="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource PrimaryColor}}" />
</FlyoutItem.Icon>
<FlyoutItem Title="About" Route="About"
Icon="{AppThemeBinding Light=info_light.svg, Dark=info_dark.svg}">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

1
ShellDemo/Pages/HomePage.xaml.cs
View File

@@ -1,6 +1,7 @@
// HomePage - Welcome page for the demo
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Shapes;
using Microsoft.Maui.Graphics;
using Microsoft.Maui.Platform.Linux.Hosting;

1
ShellDemo/Resources/Images/calendar_month_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="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

1
ShellDemo/Resources/Images/calendar_month_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="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 927 B

1
ShellDemo/Resources/Images/check_box_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="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

1
ShellDemo/Resources/Images/check_box_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="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

1
ShellDemo/Resources/Images/edit_note_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="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

1
ShellDemo/Resources/Images/edit_note_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="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

1
ShellDemo/Resources/Images/format_list_bulleted_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="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

1
ShellDemo/Resources/Images/format_list_bulleted_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="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

1
ShellDemo/Resources/Images/grid_view_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-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
ShellDemo/Resources/Images/grid_view_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-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

1
ShellDemo/Resources/Images/home_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="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

1
ShellDemo/Resources/Images/home_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="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

1
ShellDemo/Resources/Images/hourglass_empty_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-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

1
ShellDemo/Resources/Images/hourglass_empty_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-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

1
ShellDemo/Resources/Images/info_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="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

1
ShellDemo/Resources/Images/info_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="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

1
ShellDemo/Resources/Images/smart_button_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="M160-280q-33 0-56.5-23.5T80-360v-240q0-33 23.5-56.5T160-680h640q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280h-40v-80h40v-240H160v240h240v80H160Zm420 80-44-96-96-44 96-44 44-96 44 96 96 44-96 44-44 96Zm100-200-25-55-55-25 55-25 25-55 25 55 55 25-55 25-25 55Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

1
ShellDemo/Resources/Images/smart_button_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="M160-280q-33 0-56.5-23.5T80-360v-240q0-33 23.5-56.5T160-680h640q33 0 56.5 23.5T880-600v240q0 33-23.5 56.5T800-280h-40v-80h40v-240H160v240h240v80H160Zm420 80-44-96-96-44 96-44 44-96 44 96 96 44-96 44-44 96Zm100-200-25-55-55-25 55-25 25-55 25 55 55 25-55 25-25 55Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

4
ShellDemo/ShellDemo.csproj
View File

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

21
TodoApp/App.cs
View File

@@ -1,21 +0,0 @@
// TodoApp - Main Application with NavigationPage
using Microsoft.Maui.Controls;
namespace TodoApp;
public class App : Application
{
public static NavigationPage? NavigationPage { get; private set; }
public App()
{
NavigationPage = new NavigationPage(new TodoListPage())
{
Title = "OpenMaui Todo App",
BarBackgroundColor = Color.FromArgb("#2196F3"),
BarTextColor = Colors.White
};
MainPage = NavigationPage;
}
}

76
TodoApp/App.xaml Normal file
View File

@@ -0,0 +1,76 @@
<?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="TodoApp.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="DangerColor">#EF5350</Color>
<Color x:Key="CompletedColor">#9E9E9E</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">#E8EAF6</Color>
<Color x:Key="DividerLight">#E0E0E0</Color>
<Color x:Key="AlternateRowLight">#F5F5F5</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>
<Color x:Key="DividerDark">#424242</Color>
<Color x:Key="AlternateRowDark">#2A2A2A</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="Stroke" Value="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="StrokeShape">
<Setter.Value>
<RoundRectangle CornerRadius="10" />
</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="ThemedEditor" TargetType="Editor">
<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="PrimaryButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="Padding" Value="20,12" />
</Style>
<Style x:Key="DangerButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource DangerColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="Padding" Value="20,12" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

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

@@ -0,0 +1,35 @@
// TodoApp - Main Application with NavigationPage and Theme Support
using Microsoft.Maui.Controls;
namespace TodoApp;
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 TodoListPage())
{
Title = "OpenMaui Todo App",
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;
}
}

35
TodoApp/Pages/NewTodoPage.xaml
View File

@@ -3,19 +3,12 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TodoApp.NewTodoPage"
Title="New Task"
BackgroundColor="#F5F7FA">
<ContentPage.Resources>
<Color x:Key="PrimaryColor">#5C6BC0</Color>
<Color x:Key="AccentColor">#26A69A</Color>
<Color x:Key="TextPrimary">#212121</Color>
<Color x:Key="TextSecondary">#757575</Color>
<Color x:Key="CardBackground">#FFFFFF</Color>
<Color x:Key="BorderColor">#E8EAF6</Color>
</ContentPage.Resources>
BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Save" Clicked="OnSaveClicked" />
<ToolbarItem Text="Save"
IconImageSource="save_white.svg"
Clicked="OnSaveClicked" />
</ContentPage.ToolbarItems>
<Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="16" Padding="20">
@@ -24,10 +17,10 @@
<VerticalStackLayout Grid.Row="0" Spacing="4">
<Label Text="Create a new task"
FontSize="24"
TextColor="{StaticResource TextPrimary}" />
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
<Label Text="Fill in the details below"
FontSize="14"
TextColor="{StaticResource TextSecondary}" />
TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
</VerticalStackLayout>
<!-- Title Section -->
@@ -36,8 +29,8 @@
FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource PrimaryColor}" />
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
<Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1"
Padding="16,12">
<Border.StrokeShape>
@@ -46,8 +39,8 @@
<Entry x:Name="TitleEntry"
Placeholder="What needs to be done?"
FontSize="18"
TextColor="{StaticResource TextPrimary}"
PlaceholderColor="{StaticResource TextSecondary}" />
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
</Border>
</VerticalStackLayout>
@@ -60,8 +53,8 @@
<!-- Notes Section (fills remaining space) -->
<Border Grid.Row="3"
BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1"
Padding="16,12">
<Border.StrokeShape>
@@ -70,8 +63,8 @@
<Editor x:Name="NotesEditor"
Placeholder="Add notes (optional)..."
FontSize="14"
TextColor="{StaticResource TextPrimary}"
PlaceholderColor="{StaticResource TextSecondary}"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
VerticalOptions="Fill" />
</Border>

44
TodoApp/Pages/TodoDetailPage.xaml
View File

@@ -3,21 +3,15 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TodoApp.TodoDetailPage"
Title="Task Details"
BackgroundColor="#F5F7FA">
<ContentPage.Resources>
<Color x:Key="PrimaryColor">#5C6BC0</Color>
<Color x:Key="AccentColor">#26A69A</Color>
<Color x:Key="DangerColor">#EF5350</Color>
<Color x:Key="TextPrimary">#212121</Color>
<Color x:Key="TextSecondary">#757575</Color>
<Color x:Key="CardBackground">#FFFFFF</Color>
<Color x:Key="BorderColor">#E8EAF6</Color>
</ContentPage.Resources>
BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Delete" Clicked="OnDeleteClicked" />
<ToolbarItem Text="Save" Clicked="OnSaveClicked" />
<ToolbarItem Text="Delete"
IconImageSource="delete_white.svg"
Clicked="OnDeleteClicked" />
<ToolbarItem Text="Save"
IconImageSource="save_white.svg"
Clicked="OnSaveClicked" />
</ContentPage.ToolbarItems>
<Grid RowDefinitions="Auto,Auto,*,Auto,Auto" RowSpacing="16" Padding="20">
@@ -28,8 +22,8 @@
FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource PrimaryColor}" />
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
<Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1"
Padding="16,12">
<Border.StrokeShape>
@@ -38,8 +32,8 @@
<Entry x:Name="TitleEntry"
Placeholder="Task title"
FontSize="18"
TextColor="{StaticResource TextPrimary}"
PlaceholderColor="{StaticResource TextSecondary}" />
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
</Border>
</VerticalStackLayout>
@@ -52,8 +46,8 @@
<!-- Notes Section (fills remaining space) -->
<Border Grid.Row="2"
BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1"
Padding="16,12">
<Border.StrokeShape>
@@ -62,8 +56,8 @@
<Editor x:Name="NotesEditor"
Placeholder="Add notes here..."
FontSize="14"
TextColor="{StaticResource TextPrimary}"
PlaceholderColor="{StaticResource TextSecondary}"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
VerticalOptions="Fill" />
</Border>
@@ -73,8 +67,8 @@
FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource PrimaryColor}" />
<Border BackgroundColor="{StaticResource CardBackground}"
Stroke="{StaticResource BorderColor}"
<Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1"
Padding="16,12">
<Border.StrokeShape>
@@ -88,7 +82,7 @@
<Label x:Name="StatusLabel"
Text="In Progress"
FontSize="16"
TextColor="{StaticResource TextPrimary}"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
VerticalOptions="Center" />
</HorizontalStackLayout>
</Border>
@@ -98,7 +92,7 @@
<Label Grid.Row="4"
x:Name="CreatedLabel"
FontSize="13"
TextColor="{StaticResource TextSecondary}"
TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
HorizontalOptions="Center"
HorizontalTextAlignment="Center" />

22
TodoApp/Pages/TodoListPage.xaml
View File

@@ -4,20 +4,10 @@
xmlns:local="clr-namespace:TodoApp"
x:Class="TodoApp.TodoListPage"
Title="My Tasks"
BackgroundColor="#F5F7FA">
BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<ContentPage.Resources>
<ResourceDictionary>
<!-- Colors -->
<Color x:Key="PrimaryColor">#5C6BC0</Color>
<Color x:Key="PrimaryDark">#3949AB</Color>
<Color x:Key="AccentColor">#26A69A</Color>
<Color x:Key="TextPrimary">#212121</Color>
<Color x:Key="TextSecondary">#757575</Color>
<Color x:Key="CardBackground">#FFFFFF</Color>
<Color x:Key="DividerColor">#E0E0E0</Color>
<Color x:Key="CompletedColor">#9E9E9E</Color>
<!-- Converters -->
<local:AlternatingRowColorConverter x:Key="AlternatingRowColorConverter" />
<local:CompletedToColorConverter x:Key="CompletedToColorConverter" />
@@ -27,7 +17,9 @@
</ContentPage.Resources>
<ContentPage.ToolbarItems>
<ToolbarItem Text="+ Add" Clicked="OnAddClicked" />
<ToolbarItem Text="Add"
IconImageSource="add_white.svg"
Clicked="OnAddClicked" />
</ContentPage.ToolbarItems>
<Grid RowDefinitions="*,Auto" Padding="0">
@@ -47,11 +39,11 @@
Padding="40">
<Label Text="No tasks yet"
FontSize="22"
TextColor="{StaticResource TextSecondary}"
TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
HorizontalOptions="Center" />
<Label Text="Tap '+ Add' to create your first task"
FontSize="14"
TextColor="{StaticResource TextSecondary}"
TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
HorizontalOptions="Center"
Margin="0,8,0,0" />
</VerticalStackLayout>
@@ -62,7 +54,7 @@
<!-- Card-style item -->
<Grid Padding="0,6" BackgroundColor="Transparent">
<Border StrokeThickness="0"
BackgroundColor="{StaticResource CardBackground}"
BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Padding="16,14"
Opacity="{Binding IsCompleted, Converter={StaticResource CompletedToOpacityConverter}}">
<Border.StrokeShape>

32
TodoApp/Pages/TodoListPage.xaml.cs
View File

@@ -80,17 +80,23 @@ public partial class TodoListPage : ContentPage
}
/// <summary>
/// Converter for alternating row background colors.
/// Converter for alternating row background colors with Light/Dark mode support.
/// </summary>
public class AlternatingRowColorConverter : IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
if (value is int index)
{
if (isDarkMode)
{
return index % 2 == 0 ? Color.FromArgb("#1E1E1E") : Color.FromArgb("#2A2A2A");
}
return index % 2 == 0 ? Colors.White : Color.FromArgb("#F5F5F5");
}
return Colors.White;
return isDarkMode ? Color.FromArgb("#1E1E1E") : Colors.White;
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
@@ -100,21 +106,25 @@ public class AlternatingRowColorConverter : IValueConverter
}
/// <summary>
/// Converter for completed task text color and indicator color.
/// Converter for completed task text color and indicator color with Light/Dark mode support.
/// </summary>
public class CompletedToColorConverter : IValueConverter
{
// Define colors
private static readonly Color PrimaryColor = Color.FromArgb("#5C6BC0");
// Light theme colors
private static readonly Color AccentColor = Color.FromArgb("#26A69A");
private static readonly Color CompletedColor = Color.FromArgb("#9E9E9E");
private static readonly Color TextPrimary = Color.FromArgb("#212121");
private static readonly Color TextSecondary = Color.FromArgb("#757575");
private static readonly Color TextPrimaryLight = Color.FromArgb("#212121");
private static readonly Color TextSecondaryLight = Color.FromArgb("#757575");
// Dark theme colors
private static readonly Color TextPrimaryDark = Color.FromArgb("#FFFFFF");
private static readonly Color TextSecondaryDark = Color.FromArgb("#B0B0B0");
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
bool isCompleted = value is bool b && b;
string param = parameter as string ?? "";
bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
// Indicator bar color
if (param == "indicator")
@@ -122,14 +132,18 @@ public class CompletedToColorConverter : IValueConverter
return isCompleted ? CompletedColor : AccentColor;
}
// Text colors
// Text colors with theme support
if (isCompleted)
{
return CompletedColor;
}
else
{
return param == "notes" ? TextSecondary : TextPrimary;
if (param == "notes")
{
return isDarkMode ? TextSecondaryDark : TextSecondaryLight;
}
return isDarkMode ? TextPrimaryDark : TextPrimaryLight;
}
}

1
TodoApp/Resources/Images/add_white.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="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 178 B

1
TodoApp/Resources/Images/delete_white.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="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

1
TodoApp/Resources/Images/save_white.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="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 174 B

6
TodoApp/TodoApp.csproj
View File

@@ -9,7 +9,11 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="OpenMaui.Controls.Linux" Version="1.0.0-preview.*" />
<ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>
</Project>

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>

36
maui-linux-samples.sln Normal file
View File

@@ -0,0 +1,36 @@
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.5.2.0
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WebViewDemo", "WebViewDemo\WebViewDemo.csproj", "{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ShellDemo", "ShellDemo\ShellDemo.csproj", "{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TodoApp", "TodoApp\TodoApp.csproj", "{5480FAA2-4085-4140-B92A-C61C23E9C67A}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Debug|Any CPU.Build.0 = Debug|Any CPU
{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Release|Any CPU.ActiveCfg = Release|Any CPU
{B618D6BA-4BF5-E05A-6F0B-01B7A34C9773}.Release|Any CPU.Build.0 = Release|Any CPU
{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Debug|Any CPU.Build.0 = Debug|Any CPU
{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Release|Any CPU.ActiveCfg = Release|Any CPU
{A49DDD9B-45BF-6D60-C334-CBC81254F8BE}.Release|Any CPU.Build.0 = Release|Any CPU
{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Debug|Any CPU.Build.0 = Debug|Any CPU
{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Release|Any CPU.ActiveCfg = Release|Any CPU
{5480FAA2-4085-4140-B92A-C61C23E9C67A}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {84FA1771-C9A8-4550-AD7F-0EA3DACCC3B7}
EndGlobalSection
EndGlobal