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

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

@@ -1,6 +1,7 @@
// HomePage - Welcome page for the demo // HomePage - Welcome page for the demo
using Microsoft.Maui.Controls; using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Shapes;
using Microsoft.Maui.Graphics; using Microsoft.Maui.Graphics;
using Microsoft.Maui.Platform.Linux.Hosting; 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" /> <ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>
</Project> </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" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TodoApp.NewTodoPage" x:Class="TodoApp.NewTodoPage"
Title="New Task" Title="New Task"
BackgroundColor="#F5F7FA"> BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<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>
<ContentPage.ToolbarItems> <ContentPage.ToolbarItems>
<ToolbarItem Text="Save" Clicked="OnSaveClicked" /> <ToolbarItem Text="Save"
IconImageSource="save_white.svg"
Clicked="OnSaveClicked" />
</ContentPage.ToolbarItems> </ContentPage.ToolbarItems>
<Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="16" Padding="20"> <Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="16" Padding="20">
@@ -24,10 +17,10 @@
<VerticalStackLayout Grid.Row="0" Spacing="4"> <VerticalStackLayout Grid.Row="0" Spacing="4">
<Label Text="Create a new task" <Label Text="Create a new task"
FontSize="24" FontSize="24"
TextColor="{StaticResource TextPrimary}" /> TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}" />
<Label Text="Fill in the details below" <Label Text="Fill in the details below"
FontSize="14" FontSize="14"
TextColor="{StaticResource TextSecondary}" /> TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
</VerticalStackLayout> </VerticalStackLayout>
<!-- Title Section --> <!-- Title Section -->
@@ -36,8 +29,8 @@
FontSize="13" FontSize="13"
FontAttributes="Bold" FontAttributes="Bold"
TextColor="{StaticResource PrimaryColor}" /> TextColor="{StaticResource PrimaryColor}" />
<Border BackgroundColor="{StaticResource CardBackground}" <Border BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{StaticResource BorderColor}" Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1" StrokeThickness="1"
Padding="16,12"> Padding="16,12">
<Border.StrokeShape> <Border.StrokeShape>
@@ -46,8 +39,8 @@
<Entry x:Name="TitleEntry" <Entry x:Name="TitleEntry"
Placeholder="What needs to be done?" Placeholder="What needs to be done?"
FontSize="18" FontSize="18"
TextColor="{StaticResource TextPrimary}" TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{StaticResource TextSecondary}" /> PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}" />
</Border> </Border>
</VerticalStackLayout> </VerticalStackLayout>
@@ -60,8 +53,8 @@
<!-- Notes Section (fills remaining space) --> <!-- Notes Section (fills remaining space) -->
<Border Grid.Row="3" <Border Grid.Row="3"
BackgroundColor="{StaticResource CardBackground}" BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
Stroke="{StaticResource BorderColor}" Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}"
StrokeThickness="1" StrokeThickness="1"
Padding="16,12"> Padding="16,12">
<Border.StrokeShape> <Border.StrokeShape>
@@ -70,8 +63,8 @@
<Editor x:Name="NotesEditor" <Editor x:Name="NotesEditor"
Placeholder="Add notes (optional)..." Placeholder="Add notes (optional)..."
FontSize="14" FontSize="14"
TextColor="{StaticResource TextPrimary}" TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{StaticResource TextSecondary}" PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
VerticalOptions="Fill" /> VerticalOptions="Fill" />
</Border> </Border>

44
TodoApp/Pages/TodoDetailPage.xaml
View File

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

22
TodoApp/Pages/TodoListPage.xaml
View File

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

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

@@ -80,17 +80,23 @@ public partial class TodoListPage : ContentPage
} }
/// <summary> /// <summary>
/// Converter for alternating row background colors. /// Converter for alternating row background colors with Light/Dark mode support.
/// </summary> /// </summary>
public class AlternatingRowColorConverter : IValueConverter public class AlternatingRowColorConverter : IValueConverter
{ {
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture) public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{ {
bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
if (value is int index) 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 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) public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
@@ -100,21 +106,25 @@ public class AlternatingRowColorConverter : IValueConverter
} }
/// <summary> /// <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> /// </summary>
public class CompletedToColorConverter : IValueConverter public class CompletedToColorConverter : IValueConverter
{ {
// Define colors // Light theme colors
private static readonly Color PrimaryColor = Color.FromArgb("#5C6BC0");
private static readonly Color AccentColor = Color.FromArgb("#26A69A"); private static readonly Color AccentColor = Color.FromArgb("#26A69A");
private static readonly Color CompletedColor = Color.FromArgb("#9E9E9E"); private static readonly Color CompletedColor = Color.FromArgb("#9E9E9E");
private static readonly Color TextPrimary = Color.FromArgb("#212121"); private static readonly Color TextPrimaryLight = Color.FromArgb("#212121");
private static readonly Color TextSecondary = Color.FromArgb("#757575"); 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) public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{ {
bool isCompleted = value is bool b && b; bool isCompleted = value is bool b && b;
string param = parameter as string ?? ""; string param = parameter as string ?? "";
bool isDarkMode = Application.Current?.RequestedTheme == AppTheme.Dark;
// Indicator bar color // Indicator bar color
if (param == "indicator") if (param == "indicator")
@@ -122,14 +132,18 @@ public class CompletedToColorConverter : IValueConverter
return isCompleted ? CompletedColor : AccentColor; return isCompleted ? CompletedColor : AccentColor;
} }
// Text colors // Text colors with theme support
if (isCompleted) if (isCompleted)
{ {
return CompletedColor; return CompletedColor;
} }
else 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> </PropertyGroup>
<ItemGroup> <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> </ItemGroup>
</Project> </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" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WebViewDemo.WebViewPage" x:Class="WebViewDemo.WebViewPage"
Title="WebView Demo" Title="WebView Demo"
BackgroundColor="#F5F7FA"> BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">
<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"> <Grid RowDefinitions="Auto,Auto,Auto,*,Auto,Auto" Padding="16" RowSpacing="12">
@@ -29,44 +17,44 @@
<!-- Navigation Bar --> <!-- Navigation Bar -->
<Border Grid.Row="1" <Border Grid.Row="1"
BackgroundColor="{StaticResource CardBackground}" BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0" StrokeThickness="0"
Padding="12"> Padding="12">
<Border.StrokeShape> <Border.StrokeShape>
<RoundRectangle CornerRadius="8" /> <RoundRectangle CornerRadius="8" />
</Border.StrokeShape> </Border.StrokeShape>
<HorizontalStackLayout Spacing="8" HorizontalOptions="Center"> <HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
<Button x:Name="BackButton" <ImageButton x:Name="BackButton"
Text="Back" Source="{AppThemeBinding Light=arrow_back_light.svg, Dark=arrow_back_dark.svg}"
WidthRequest="70" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource ButtonColor}" BackgroundColor="{StaticResource ButtonColor}"
TextColor="White" CornerRadius="8"
Clicked="OnBackClicked" /> Clicked="OnBackClicked" />
<Button x:Name="ForwardButton" <ImageButton x:Name="ForwardButton"
Text="Forward" Source="{AppThemeBinding Light=arrow_forward_light.svg, Dark=arrow_forward_dark.svg}"
WidthRequest="80" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource ButtonColor}" BackgroundColor="{StaticResource ButtonColor}"
TextColor="White" CornerRadius="8"
Clicked="OnForwardClicked" /> Clicked="OnForwardClicked" />
<Button x:Name="ReloadButton" <ImageButton x:Name="ReloadButton"
Text="Reload" Source="{AppThemeBinding Light=refresh_light.svg, Dark=refresh_dark.svg}"
WidthRequest="70" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource ButtonColor}" BackgroundColor="{StaticResource ButtonColor}"
TextColor="White" CornerRadius="8"
Clicked="OnReloadClicked" /> Clicked="OnReloadClicked" />
</HorizontalStackLayout> </HorizontalStackLayout>
</Border> </Border>
<!-- URL Bar --> <!-- URL Bar -->
<Border Grid.Row="2" <Border Grid.Row="2"
BackgroundColor="{StaticResource CardBackground}" BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0" StrokeThickness="0"
Padding="12"> Padding="12">
<Border.StrokeShape> <Border.StrokeShape>
@@ -79,25 +67,27 @@
Placeholder="Enter URL..." Placeholder="Enter URL..."
Text="https://dotnet.microsoft.com" Text="https://dotnet.microsoft.com"
FontSize="14" FontSize="14"
TextColor="{AppThemeBinding Light={StaticResource TextPrimaryLight}, Dark={StaticResource TextPrimaryDark}}"
PlaceholderColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
VerticalOptions="Center" VerticalOptions="Center"
Completed="OnUrlSubmitted" /> Completed="OnUrlSubmitted" />
<Button x:Name="GoButton" <ImageButton x:Name="GoButton"
Grid.Column="1" Grid.Column="1"
Text="Go" Source="{AppThemeBinding Light=send_light.svg, Dark=send_dark.svg}"
WidthRequest="60" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource AccentColor}" BackgroundColor="{StaticResource AccentColor}"
TextColor="White" CornerRadius="8"
Clicked="OnGoClicked" /> Clicked="OnGoClicked" />
</Grid> </Grid>
</Border> </Border>
<!-- WebView --> <!-- WebView -->
<Border Grid.Row="3" <Border Grid.Row="3"
BackgroundColor="{StaticResource CardBackground}" BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="1" StrokeThickness="1"
Stroke="#E0E0E0"> Stroke="{AppThemeBinding Light={StaticResource BorderLight}, Dark={StaticResource BorderDark}}">
<Border.StrokeShape> <Border.StrokeShape>
<RoundRectangle CornerRadius="8" /> <RoundRectangle CornerRadius="8" />
</Border.StrokeShape> </Border.StrokeShape>
@@ -111,36 +101,36 @@
<!-- Action Buttons --> <!-- Action Buttons -->
<Border Grid.Row="4" <Border Grid.Row="4"
BackgroundColor="{StaticResource CardBackground}" BackgroundColor="{AppThemeBinding Light={StaticResource CardBackgroundLight}, Dark={StaticResource CardBackgroundDark}}"
StrokeThickness="0" StrokeThickness="0"
Padding="12"> Padding="12">
<Border.StrokeShape> <Border.StrokeShape>
<RoundRectangle CornerRadius="8" /> <RoundRectangle CornerRadius="8" />
</Border.StrokeShape> </Border.StrokeShape>
<HorizontalStackLayout Spacing="8" HorizontalOptions="Center"> <HorizontalStackLayout Spacing="12" HorizontalOptions="Center">
<Button x:Name="LoadHtmlButton" <ImageButton x:Name="LoadHtmlButton"
Text="Load HTML" Source="{AppThemeBinding Light=code_light.svg, Dark=code_dark.svg}"
WidthRequest="110" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource PrimaryColor}" BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White" CornerRadius="8"
Clicked="OnLoadHtmlClicked" /> Clicked="OnLoadHtmlClicked" />
<Button x:Name="EvalJsButton" <ImageButton x:Name="EvalJsButton"
Text="Run JS" Source="{AppThemeBinding Light=play_arrow_light.svg, Dark=play_arrow_dark.svg}"
WidthRequest="90" WidthRequest="44"
HeightRequest="36" HeightRequest="44"
FontSize="13" Padding="10"
BackgroundColor="{StaticResource PrimaryColor}" BackgroundColor="{StaticResource PrimaryColor}"
TextColor="White" CornerRadius="8"
Clicked="OnEvalJsClicked" /> Clicked="OnEvalJsClicked" />
</HorizontalStackLayout> </HorizontalStackLayout>
</Border> </Border>
<!-- Status Bar --> <!-- Status Bar -->
<Border Grid.Row="5" <Border Grid.Row="5"
BackgroundColor="{StaticResource PrimaryDark}" BackgroundColor="{StaticResource PrimaryDarkColor}"
StrokeThickness="0" StrokeThickness="0"
Padding="12,8"> Padding="12,8">
<Border.StrokeShape> <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" /> <ProjectReference Include="../../maui-linux/OpenMaui.Controls.Linux.csproj" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<EmbeddedResource Include="Resources\Images\*.svg" />
</ItemGroup>
</Project> </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