Merge pull request #70 from egvijayanand/working

HybridRclApp - An hybrid demo solution

README.md

@@ -16,6 +16,7 @@ Available under the `src` directory:
   - ViewModels implemented with [CommunityToolkit.Mvvm](https://www.nuget.org/packages/CommunityToolkit.Mvvm/8.0.0-preview3) NuGet package
 * `MauiBlazorApp` - .NET MAUI Blazor sample
   - App Theming
+  - State sharing between .NET MAUI and Razor Components
   - Components from shared Razor Class Library (RCL)
 * `MauiAppCS` - .NET MAUI C# Markup based Sample
 * `UnifiedDateCalculator`
@@ -28,6 +29,10 @@ Available under the `src` directory:
 * `MauiHotReload` - Sample project to demonstrate **C# Hot Reload** feature supported via [MetadataUpdateHandler](https://learn.microsoft.com/en-us/dotnet/api/system.reflection.metadata.metadataupdatehandlerattribute?view=net-6.0) (refer to HotReloadService.cs). Core logic is abstracted into a base page named `MauiPage`, inherit the content pages from it and implement the UI logic in the override of the abstract `Build()` method. Source is available in the `src\MauiHotReload` folder.
 * `WindowsUnpackagedApp` - Sample project to demonstrate running Windows targeted WinUI 3 project as Unpackaged app type.
 * `PopupDialogs` - Sample project to demonstrate the custom dialogs implemented with [VijayAnand.MauiToolkit.Pro](https://www.nuget.org/packages/VijayAnand.MauiToolkit.Pro) NuGet package.
+* `HybridRclApp` - `BlazorWebView` hybrid sample
+  - A hybrid solution demonstrating the capabilities of `BlazorWebView` control
+  - Loaded with `.NET MAUI`, `Windows Forms` and `WPF` projects in a single solution
+  - Razor components abstracted in a shared Razor Class Library (RCL)
 
 * C# Samples - C# version of the [.NET MAUI UI Challenge](https://aka.ms/maui/UIChallenge) - [Awesome UIs](https://github.com/jsuarezruiz/dotnet-maui-showcase) without any XAML usage - Stay tuned for more samples ...
   - Made available under the `src/C#-Samples/` folder

src/HybridRclApp/HybridRclApp.RazorLib/Data/WeatherForecast.cs

@@ -0,0 +1,13 @@
+namespace HybridRclApp.RazorLib.Data
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string? Summary { get; set; }
+    }
+}

src/HybridRclApp/HybridRclApp.RazorLib/Data/WeatherForecastService.cs

@@ -0,0 +1,20 @@
+namespace HybridRclApp.RazorLib.Data
+{
+    public class WeatherForecastService
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+        {
+            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = startDate.AddDays(index),
+                TemperatureC = Random.Shared.Next(-20, 55),
+                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+            }).ToArray());
+        }
+    }
+}

src/HybridRclApp/HybridRclApp.RazorLib/HybridRclApp.RazorLib.csproj

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+
+        <!-- Project Options -->
+        <Nullable>enable</Nullable>
+        <LangVersion>latest</LangVersion>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <RootNamespace>HybridRclApp.RazorLib</RootNamespace>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <SupportedPlatform Include="browser" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0-preview.2.*" />
+    </ItemGroup>
+</Project>

src/HybridRclApp/HybridRclApp.RazorLib/Pages/Counter.razor

@@ -0,0 +1,16 @@
+@page "/counter"
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+	private int currentCount = 0;
+
+	private void IncrementCount()
+	{
+		currentCount++;
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Pages/FetchData.razor

@@ -0,0 +1,48 @@
+@page "/fetchdata"
+
+@inject WeatherForecastService ForecastService
+
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from a service.</p>
+
+@if (forecasts == null)
+{
+	<p><em>Loading...</em></p>
+}
+else
+{
+	<table class="@tableStyle">
+		<thead>
+			<tr>
+				<th>Date</th>
+				<th>Temp. (C)</th>
+				<th>Temp. (F)</th>
+				<th>Summary</th>
+			</tr>
+		</thead>
+		<tbody>
+			@foreach (var forecast in forecasts)
+			{
+				<tr>
+					<td>@forecast.Date.ToShortDateString()</td>
+					<td>@forecast.TemperatureC</td>
+					<td>@forecast.TemperatureF</td>
+					<td>@forecast.Summary</td>
+				</tr>
+			}
+		</tbody>
+	</table>
+}
+
+@code {
+	private WeatherForecast[]? forecasts;
+
+	private string? tableStyle;
+
+	protected override async Task OnInitializedAsync()
+	{
+		tableStyle = "table";
+		forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Pages/Index.razor

@@ -0,0 +1,7 @@
+@page "/"
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<SurveyPrompt Title="How is Blazor working for you?" />

src/HybridRclApp/HybridRclApp.RazorLib/Shared/MainLayout.razor

@@ -0,0 +1,28 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+	<div class="sidebar">
+		<NavMenu />
+	</div>
+
+	<main>
+		<div class="top-row px-4" style="@divStyle">
+			<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+		</div>
+
+		<article class="content px-4">
+			@Body
+		</article>
+	</main>
+</div>
+
+@code {
+	private string? divStyle;
+
+	protected override void OnInitialized()
+	{
+		base.OnInitialized();
+
+		divStyle = "background-color: #f7f7f7;";
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Shared/MainLayout.razor.css

@@ -0,0 +1,70 @@
+.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 .btn-link {
+		white-space: nowrap;
+		margin-left: 1.5rem;
+	}
+
+	.top-row 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 a, .top-row .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;
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Shared/NavMenu.razor

@@ -0,0 +1,39 @@
+<div class="top-row ps-3 navbar navbar-dark">
+	<div class="container-fluid">
+		<a class="navbar-brand" href="">HybridRclApp</a>
+		<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+	</div>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+	<nav class="flex-column">
+		<div class="nav-item px-3">
+			<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+				<span class="oi oi-home" aria-hidden="true"></span> Home
+			</NavLink>
+		</div>
+		<div class="nav-item px-3">
+			<NavLink class="nav-link" href="counter">
+				<span class="oi oi-plus" aria-hidden="true"></span> Counter
+			</NavLink>
+		</div>
+		<div class="nav-item px-3">
+			<NavLink class="nav-link" href="fetchdata">
+				<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+			</NavLink>
+		</div>
+	</nav>
+</div>
+
+@code {
+	private bool collapseNavMenu = true;
+
+	private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+	private void ToggleNavMenu()
+	{
+		collapseNavMenu = !collapseNavMenu;
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Shared/NavMenu.razor.css

@@ -0,0 +1,62 @@
+.navbar-toggler {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+	height: 3.5rem;
+	background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+	font-size: 1.1rem;
+}
+
+.oi {
+	width: 2rem;
+	font-size: 1.1rem;
+	vertical-align: text-top;
+	top: -2px;
+}
+
+.nav-item {
+	font-size: 0.9rem;
+	padding-bottom: 0.5rem;
+}
+
+	.nav-item:first-of-type {
+		padding-top: 1rem;
+	}
+
+	.nav-item:last-of-type {
+		padding-bottom: 1rem;
+	}
+
+	.nav-item ::deep a {
+		color: #d7d7d7;
+		border-radius: 4px;
+		height: 3rem;
+		display: flex;
+		align-items: center;
+		line-height: 3rem;
+	}
+
+.nav-item ::deep a.active {
+	background-color: rgba(255,255,255,0.25);
+	color: white;
+}
+
+.nav-item ::deep a:hover {
+	background-color: rgba(255,255,255,0.1);
+	color: white;
+}
+
+@media (min-width: 641px) {
+	.navbar-toggler {
+		display: none;
+	}
+
+	.collapse {
+		/* Never collapse the sidebar for wide screens */
+		display: block !important;
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/Shared/SurveyPrompt.razor

@@ -0,0 +1,29 @@
+<div class="@alertStyle">
+	<div class="card-text p-3">
+		<p>
+			<span class="oi oi-pencil me-2" aria-hidden="true" style="display: inline;"></span>
+	<strong>@Title</strong>
+		</p>
+		<p>
+			<span class="text-nowrap" style="display: inline;">
+		Please take our
+				<a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2149017">brief
+					survey</a>
+	</span>
+	and tell us what you think.
+		</p>
+	</div>
+</div>
+
+@code {
+	// Demonstrates how a parent component can supply parameters
+	[Parameter]
+	public string? Title { get; set; }
+
+	private string? alertStyle;
+
+	protected override void OnInitialized()
+	{
+		alertStyle = "card bg-light text-dark mt-3";
+	}
+}

src/HybridRclApp/HybridRclApp.RazorLib/_Imports.razor

@@ -0,0 +1,11 @@
+@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 HybridRclApp.RazorLib
+@using HybridRclApp.RazorLib.Data
+@using HybridRclApp.RazorLib.Pages
+@using HybridRclApp.RazorLib.Shared