Changed to MAUI Blazor

I18N Commander/UI MAUI/App.xaml

@@ -5,10 +5,22 @@
              x:Class="UI_MAUI.App">
     <Application.Resources>
         <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
+
-                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+            <Color x:Key="PageBackgroundColor">#512bdf</Color>
-                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            <Color x:Key="PrimaryTextColor">White</Color>
-            </ResourceDictionary.MergedDictionaries>
+
+            <Style TargetType="Label">
+                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
+                <Setter Property="FontFamily" Value="OpenSansRegular" />
+            </Style>
+
+            <Style TargetType="Button">
+                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
+                <Setter Property="FontFamily" Value="OpenSansRegular" />
+                <Setter Property="BackgroundColor" Value="#2b0b98" />
+                <Setter Property="Padding" Value="14,10" />
+            </Style>
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>

I18N Commander/UI MAUI/App.xaml.cs

@@ -5,6 +5,6 @@ public partial class App : Application
 	public App()
 	{
 		this.InitializeComponent();
-        this.MainPage = new AppShell();
+		this.MainPage = new MainPage();
 	}
 }

I18N Commander/UI MAUI/AppShell.xaml

@@ -1,71 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<Shell
-    x:Class="UI_MAUI.AppShell"
-    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-    xmlns:local="clr-namespace:UI_MAUI"
-    xmlns:pages="using:UI_MAUI.Pages"
-    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
-    TabBarBackgroundColor="AliceBlue"
-    TabBarForegroundColor="Black"
-    TabBarDisabledColor="LightBlue"
-    TabBarTitleColor="Chocolate"
-    TabBarUnselectedColor="Gray"
-    FlyoutBackgroundColor="AliceBlue"
-    FlyoutBehavior="{OnIdiom Desktop=Locked, Tablet=Disabled, Phone=Disabled}"
-    FlyoutWidth="{Binding CurrentFlyoutWidth, Mode=OneWay}"
-    BindingContext="{Binding Source={RelativeSource Self}}"
->
-
-    <Shell.ItemTemplate>
-        <DataTemplate>
-            <Grid ColumnDefinitions="50,*" Padding="10">
-                <Image Source="{Binding Icon}" HeightRequest="45" WidthRequest="45" />
-                <Label Grid.Column="1" Text="{Binding Title}" TextColor="Black" FontAttributes="Bold" VerticalTextAlignment="Center" />
-            </Grid>
-        </DataTemplate>
-    </Shell.ItemTemplate>
-
-    <Shell.MenuItemTemplate>
-        <DataTemplate>
-            <Grid ColumnDefinitions="50,*" Padding="10">
-                <Image Source="{Binding Icon}" HeightRequest="45" WidthRequest="45" />
-                <Label Grid.Column="1" Text="{Binding Text}" TextColor="Black" FontAttributes="Bold" VerticalTextAlignment="Center" />
-            </Grid>
-        </DataTemplate>
-    </Shell.MenuItemTemplate>
-
-    <FlyoutItem IsVisible="{OnIdiom Phone=false, Tablet=false, Desktop=true}" Icon="load.png" Title="{Binding TextLoadProject}">
-        <Tab>
-            <ShellContent ContentTemplate="{DataTemplate pages:LoadProjectPage}" Route="Load" />
-        </Tab>
-    </FlyoutItem>
-    
-    <FlyoutItem IsVisible="{OnIdiom Phone=false, Tablet=false, Desktop=true}" Icon="translation.png" Title="{Binding TextTranslations}">
-        <Tab>
-            <ShellContent ContentTemplate="{DataTemplate pages:TranslationPage}" Route="Translation" />
-        </Tab>
-    </FlyoutItem>
-    
-    <FlyoutItem IsVisible="{OnIdiom Phone=false, Tablet=false, Desktop=true}" Icon="settings.png" Title="{Binding TextSettings}">
-        <Tab>
-            <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" Route="Settings" />
-        </Tab>
-    </FlyoutItem>
-
-    <MenuItem IconImageSource="expand.png" Clicked="MenuItemToggle_OnClicked" Text="{Binding TextToggle}" />
-    
-    <TabBar IsVisible="{OnIdiom Desktop=false, Phone=true, Tablet=true}">
-        <Tab Icon="load.png" Title="{Binding TextLoadProject}">
-            <ShellContent ContentTemplate="{DataTemplate pages:LoadProjectPage}" Route="Load" />
-        </Tab>
-    
-        <Tab Icon="translation.png" Title="{Binding TextTranslations}">
-            <ShellContent ContentTemplate="{DataTemplate pages:TranslationPage}" Route="Translation" />
-        </Tab>
-    
-        <Tab Icon="settings.png" Title="{Binding TextSettings}">
-            <ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}" Route="Settings" />
-        </Tab>
-    </TabBar>
-</Shell>

I18N Commander/UI MAUI/AppShell.xaml.cs

@@ -1,34 +0,0 @@
-using System.ComponentModel;
-
-namespace UI_MAUI;
-
-public partial class AppShell : Shell, INotifyPropertyChanged
-{
-    private bool isOpen = DeviceInfo.Idiom == DeviceIdiom.Phone || DeviceInfo.Idiom == DeviceIdiom.Tablet;
-
-    public double CurrentFlyoutWidth => this.isOpen ? 200 : 90;
-    
-    public string TextLoadProject => this.isOpen  ? "Load Project" : string.Empty;
-
-    public string TextSettings => this.isOpen ? "Settings" : string.Empty;
-
-    public string TextTranslations => this.isOpen ? "Translations" : string.Empty;
-
-    public string TextToggle => this.isOpen ? "Toggle menu" : string.Empty;
-
-    public AppShell()
-    {
-        this.InitializeComponent();
-    }
-
-    private void MenuItemToggle_OnClicked(object sender, EventArgs e)
-    {
-        this.isOpen = !this.isOpen;
-        this.OnPropertyChanged(nameof(this.CurrentFlyoutWidth));
-        this.OnPropertyChanged(nameof(this.TextSettings));
-        this.OnPropertyChanged(nameof(this.TextTranslations));
-        this.OnPropertyChanged(nameof(this.TextLoadProject));
-        this.OnPropertyChanged(nameof(this.TextToggle));
-        this.InvalidateMeasure();
-    }
-}

I18N Commander/UI MAUI/Main.razor

@@ -0,0 +1,11 @@
+<Router AppAssembly="@typeof(Main).Assembly">
+	<Found Context="routeData">
+		<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+	</Found>
+	<NotFound>
+		<LayoutView Layout="@typeof(MainLayout)">
+			<p role="alert">Sorry, there's nothing at this address.</p>
+		</LayoutView>
+	</NotFound>
+</Router>

I18N Commander/UI MAUI/MainPage.xaml

@@ -1,41 +1,14 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="UI_MAUI.MainPage">
+             xmlns:local="clr-namespace:UI_MAUI"
+             x:Class="UI_MAUI.MainPage"
+             BackgroundColor="{DynamicResource PageBackgroundColor}">
 
-    <ScrollView>
+    <BlazorWebView HostPage="wwwroot/index.html">
-        <VerticalStackLayout
+        <BlazorWebView.RootComponents>
-            Spacing="25"
+            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
-            Padding="30,0"
+        </BlazorWebView.RootComponents>
-            VerticalOptions="Center">
+    </BlazorWebView>
-
-            <Image
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
-                HeightRequest="200"
-                HorizontalOptions="Center" />
-
-            <Label
-                Text="Hello, World!"
-                SemanticProperties.HeadingLevel="Level1"
-                FontSize="32"
-                HorizontalOptions="Center" />
-
-            <Label
-                Text="Welcome to .NET Multi-platform App UI"
-                SemanticProperties.HeadingLevel="Level2"
-                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
-                FontSize="18"
-                HorizontalOptions="Center" />
-
-            <Button
-                x:Name="CounterBtn"
-                Text="Click me"
-                SemanticProperties.Hint="Counts the number of times you click"
-                Clicked="OnCounterClicked"
-                HorizontalOptions="Center" />
-
-        </VerticalStackLayout>
-    </ScrollView>
 
 </ContentPage>

I18N Commander/UI MAUI/MainPage.xaml.cs

@@ -2,22 +2,8 @@
 
 public partial class MainPage : ContentPage
 {
-    int count = 0;
-
 	public MainPage()
 	{
 		this.InitializeComponent();
 	}
-
-    private void OnCounterClicked(object sender, EventArgs e)
-    {
-        this.count++;
-
-        if (this.count == 1)
-            this.CounterBtn.Text = $"Clicked {this.count} time";
-        else
-            this.CounterBtn.Text = $"Clicked {this.count} times";
-
-        SemanticScreenReader.Announce(this.CounterBtn.Text);
-    }
 }

I18N Commander/UI MAUI/MauiProgram.cs

@@ -1,22 +1,23 @@
-using CommunityToolkit.Maui;
+namespace UI_MAUI;
-using CommunityToolkit.Maui.Markup;
-
-namespace UI_MAUI;
 
 public static class MauiProgram
 {
 	public static MauiApp CreateMauiApp()
 	{
 		var builder = MauiApp.CreateBuilder();
-        builder.UseMauiApp<App>();
+		builder
-        builder.UseMauiCommunityToolkit();
+			.UseMauiApp<App>()
-        builder.UseMauiCommunityToolkitMarkup();
+			.ConfigureFonts(fonts =>
-        builder.ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
-            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
 			});
 
+		builder.Services.AddMauiBlazorWebView();
+		
+#if DEBUG
+		builder.Services.AddBlazorWebViewDeveloperTools();
+#endif
+
 		return builder.Build();
 	}
 }

I18N Commander/UI MAUI/Pages/Index.razor

@@ -0,0 +1,7 @@
+@page "/"
+
+<h1>Hello, world!</h1>
+
+<button class="btn btn-primary" @onclick="this.OpenFile">Open a project</button>
+<button class="btn btn-primary" @onclick="this.System">System</button>
+<div>@label</div>

I18N Commander/UI MAUI/Pages/Index.razor.cs

@@ -0,0 +1,25 @@
+namespace UI_MAUI.Pages;
+
+public partial class Index
+{
+    private static string label = "test";
+    
+    private async Task OpenFile()
+    {
+        // Show the open file dialog:
+        var result = await FilePicker.PickAsync(new PickOptions
+        {
+            PickerTitle = "Open a project",
+        });
+
+        label = result?.FullPath;
+    }
+
+    private void System()
+    {
+        var info = new FileInfo(label);
+        var result = Directory.EnumerateDirectories(info.DirectoryName, "*");
+        var num = result.Count();
+        label = $"{num} files found.";
+    }
+}

I18N Commander/UI MAUI/Pages/LoadProjectPage.xaml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="UI_MAUI.Pages.LoadProjectPage"
->
-    <ContentPage.Content>
-        <Label>Load Project</Label>
-    </ContentPage.Content>
-</ContentPage>

I18N Commander/UI MAUI/Pages/LoadProjectPage.xaml.cs

@@ -1,9 +0,0 @@
-namespace UI_MAUI.Pages;
-
-public partial class LoadProjectPage : ContentPage
-{
-    public LoadProjectPage()
-    {
-        this.InitializeComponent();
-    }
-}

I18N Commander/UI MAUI/Pages/SettingsPage.xaml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="UI_MAUI.Pages.SettingsPage">
-    <ContentPage.Content>
-        <Label>Settings</Label>
-    </ContentPage.Content>
-</ContentPage>

I18N Commander/UI MAUI/Pages/SettingsPage.xaml.cs

@@ -1,9 +0,0 @@
-namespace UI_MAUI.Pages;
-
-public partial class SettingsPage : ContentPage
-{
-    public SettingsPage()
-    {
-        this.InitializeComponent();
-    }
-}

I18N Commander/UI MAUI/Pages/TranslationPage.xaml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="UI_MAUI.Pages.TranslationPage">
-    <ContentPage.Content>
-        <Label>Translation</Label>
-    </ContentPage.Content>
-</ContentPage>

I18N Commander/UI MAUI/Pages/TranslationPage.xaml.cs

@@ -1,9 +0,0 @@
-namespace UI_MAUI.Pages;
-
-public partial class TranslationPage : ContentPage
-{
-    public TranslationPage()
-    {
-        this.InitializeComponent();
-    }
-}

I18N Commander/UI MAUI/Shared/MainLayout.razor

@@ -0,0 +1,25 @@
+@inherits LayoutComponentBase
+
+<nav class="navbar navbar-expand-lg" style="background-color: #1cb5f9;">
+    <div class="container-fluid">
+        <div class="navbar-brand">I18N Commander</div>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">Index</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Settings</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Translations</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+@Body

I18N Commander/UI MAUI/Shared/MainLayout.razor.css

@@ -0,0 +1,75 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

I18N Commander/UI MAUI/UI MAUI.csproj

@@ -1,13 +1,15 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
 	<PropertyGroup>
 		<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
 		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
     <OutputType>Exe</OutputType>
+		<AssemblyName>I18N Commander</AssemblyName>
 		<RootNamespace>UI_MAUI</RootNamespace>
 		<UseMaui>true</UseMaui>
 		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
+		<EnableDefaultCssItems>false</EnableDefaultCssItems>
 
 		<!-- Display name -->
 		<ApplicationTitle>I18N Commander</ApplicationTitle>
@@ -45,12 +47,6 @@
 		<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
 	</ItemGroup>
 
-	<ItemGroup>
-	  <Reference Include="Microsoft.WinUI">
-	    <HintPath>..\..\..\..\..\.nuget\packages\microsoft.windowsappsdk\1.1.1\lib\net5.0-windows10.0.18362.0\Microsoft.WinUI.dll</HintPath>
-	  </Reference>
-	</ItemGroup>
-
 	<ItemGroup>
 	  <Compile Update="Properties\Resources.Designer.cs">
 	    <DesignTime>True</DesignTime>
@@ -67,9 +63,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-	  <PackageReference Include="CommunityToolkit.Common" Version="8.0.0" />
+	  <Folder Include="Pages" />
-	  <PackageReference Include="CommunityToolkit.Maui" Version="1.2.0" />
-	  <PackageReference Include="CommunityToolkit.Maui.Markup" Version="1.0.1" />
 	</ItemGroup>
 
 </Project>

I18N Commander/UI MAUI/_Imports.razor

@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using UI_MAUI
+@using UI_MAUI.Shared

I18N Commander/UI MAUI/wwwroot/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+	<title>I18N Commander</title>
+	<base href="/" />
+	<link rel="stylesheet" href="css/bootstrap.min.css" />
+	<link rel="stylesheet" href="css/app.css" />
+</head>
+
+<body>
+	<div id="app">Loading...</div>
+
+	<script src="js/bootstrap.bundle.min.js"></script>
+	<script src="_framework/blazor.webview.js" autostart="false"></script>
+</body>
+</html>