Native WinUI 3 Blazor Hybrid Sample

README.md

@@ -6,35 +6,30 @@ Join me on [**Developer Thoughts**](https://egvijayanand.in/), an exclusive blog
 
 _Note: Samples are in the process of migrating to the latest framework version, so there would be a change in the directory structure. Kindly bear with this._
 
+### .NET MAUI 8 Samples
+
 Made available in the `src\NET_8\` directory:
-* `EmbeddedWindows` - .NET MAUI Page embedded in a Native WinUI 3 App, targeting .NET 8 (`net8.0-windows10.0.19041.0`)
-  - Refer to this [article](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) for working with this sample
-* `MapsApp` - .NET MAUI Maps embedded in a Native WinUI 3 App, targeting .NET 8 (`net8.0-windows10.0.19041.0`)
-  - Refer to this [article](https://egvijayanand.in/2024/03/07/dotnet-maui-community-toolkit-maps-in-winui-3-app/) for working with this sample
-* `ThemedApp` - Sample app for .NET MAUI App Theming
-  - Refer to this [article](https://egvijayanand.in/2024/07/03/dotnet-maui-developer-tips-app-theming/) for further details
-* `DateCalculator`
-  - MVVM Sample
-  - Xamarin Forms and .NET MAUI in a single solution
-  - WPF and WinUI projects to illustrate the reuse of ViewModels across UI frameworks
-  - WinForms project to illustrate the reuse of ViewModels across non-XAML UI framework too
-  - Shared business logic as a separate library project
-  - ViewModels implemented with [CommunityToolkit.Mvvm](https://www.nuget.org/packages/CommunityToolkit.Mvvm) NuGet package
-* `UnifiedDateCalculator`
-  - Shared class library sample
-  - UI, ViewModel, Model, and Business logic all from shared project
-  - Head projects serve as an app container
-  - Both Xamarin.Forms and .NET MAUI from a single project - `DateCalculator.UI`
+
+|Solution Title|Description|
+|:---:|:---|
+|`EmbeddedWindows`|.NET MAUI Page embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
+|`MapsApp`|.NET MAUI Maps embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI Community Toolkit Maps in WinUI 3 App](https://egvijayanand.in/2024/03/07/dotnet-maui-community-toolkit-maps-in-winui-3-app/) article for working with this sample|
+|`ThemedApp`|Sample app for .NET MAUI App Theming <br /> Refer to this [.NET MAUI - App Theming](https://egvijayanand.in/2024/07/03/dotnet-maui-developer-tips-app-theming/) article for further details|
+|`DateCalculator`|<ul><li>MVVM Sample</li><li>Xamarin Forms and .NET MAUI in a single solution</li><li>WPF and WinUI projects to illustrate the reuse of ViewModels across UI frameworks</li><li>WinForms project to illustrate the reuse of ViewModels across non-XAML UI framework too</li><li>Shared business logic as a separate library project</li><li>ViewModels implemented with [CommunityToolkit.Mvvm](https://www.nuget.org/packages/CommunityToolkit.Mvvm) (aka Microsoft MVVM Toolkit) NuGet package</li></ul>|
+|`UnifiedDateCalculator`|<ul><li>Shared class library sample</li><li>UI, ViewModel, Model, and Business logic all from shared project</li><li>Head projects serve as an app container</li><li>Both Xamarin.Forms and .NET MAUI UI definition from a single project - `DateCalculator.UI`</li><li>ViewModels implemented with [CommunityToolkit.Mvvm](https://www.nuget.org/packages/CommunityToolkit.Mvvm) (aka Microsoft MVVM Toolkit) NuGet package</li></ul>|
+
+### .NET MAUI 9 Samples
 
 Made available in the `src\NET_9\` directory:
 
 |Solution Title|Description|
 |:---:|:---|
-|`EmbeddedAndroid`|.NET MAUI Page embedded in a .NET 9 for Android App, targeting .NET 9 <br /> Refer to this [article](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) for working with this sample|
-|`EmbeddediOS`|.NET MAUI Page embedded in a .NET 9 for iOS App, targeting .NET 9 <br /> Refer to this [article](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) for working with this sample|
-|`EmbeddedWindows`|.NET MAUI Page embedded in a Native WinUI 3 App, targeting .NET 9 <br /> Refer to this [article](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) for working with this sample|
-|`MapsApp`|Using .NET MAUI [CommunityToolkit.Maui.Maps](https://www.nuget.org/packages/CommunityToolkit.Maui.Maps) embedded in a Native WinUI 3 App, targeting .NET 9 <br /> Refer to this [article](https://egvijayanand.in/2024/03/07/dotnet-maui-community-toolkit-maps-in-winui-3-app/) for working with this sample|
+|`EmbeddedAndroid`|.NET MAUI Page embedded in a .NET 9 for Android App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
+|`EmbeddediOS`|.NET MAUI Page embedded in a .NET 9 for iOS App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
+|`EmbeddedWindows`|.NET MAUI Page embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI - Native Embedding](https://egvijayanand.in/2024/02/29/dotnet-maui-native-embedding/) article for working with this sample|
+|`MapsApp`|Using .NET MAUI [CommunityToolkit.Maui.Maps](https://www.nuget.org/packages/CommunityToolkit.Maui.Maps) embedded in a Native WinUI 3 App <br /> Refer to this [.NET MAUI Community Toolkit Maps in WinUI 3 App](https://egvijayanand.in/2024/03/07/dotnet-maui-community-toolkit-maps-in-winui-3-app/) article for working with this sample|
 |`HybridWebViewApp`|A sample .NET MAUI App showcasing the features of the new [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/whats-new/dotnet-9?view=net-maui-9.0#hybridwebview) control.|
+|`WinUIBlazor`|.NET MAUI `BlazorWebView` embedded in a Native WinUI 3 App, making it as a Blazor Hybrid app <br /> Refer to this [.NET MAUI - Blazor Hybrid - WinUI 3](https://egvijayanand.in/2023/03/29/dotnet-maui-blazor-hybrid-winui-3/) article for working with this sample|
 
 Made available in the the `src\` directory:
 
@@ -63,6 +58,8 @@ Made available in the the `src\` directory:
 **Error message:**
 Unable to load DLL 'Microsoft.ui.xaml.dll' or one of its dependencies: The specified module could not be found. (0x8007007E)
 
+### .NET MAUI UI Challenge - C# Version
+
 * 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 [C#-Samples](/src/C%23-Samples/) folder
   - Design credit to their respective owners
@@ -87,6 +84,8 @@ Unable to load DLL 'Microsoft.ui.xaml.dll' or one of its dependencies: The speci
   - [MAUI Pets](https://github.com/BryanOroxon/MAUIPETS)
   - [SpaceX History](https://github.com/EduardoReisDev/SpaceXhistory)
 
+### .NET MAUI - F# Samples
+
 * F# Samples
   - Made available under the [F#-Samples](/src/F%23-Samples/) folder developed with Fabulous
   - FSApp - A F# sample app (with DI option)

src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Imports.cs

@@ -0,0 +1,5 @@
+global using WinUIBlazor;
+global using WinUIBlazor.Views;
+
+// Static
+global using static Microsoft.Maui.Graphics.Colors;

src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Main.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@GetType().Assembly" AdditionalAssemblies="[ typeof(Counter).Assembly ]">
+	<Found Context="routeData">
+		<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+	</Found>
+	<NotFound>
+		<LayoutView Layout="@typeof(MainLayout)">
+			<p>Sorry, there's nothing at this address.</p>
+		</LayoutView>
+	</NotFound>
+</Router>

src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/MyApp.xaml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Application
+    x:Class="WinUIBlazor.MyApp"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
+    xmlns:local="clr-namespace:WinUIBlazor"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Additional Styles -->
+            <x:Double x:Key="ItemSpacing">10</x:Double>
+
+            <Style
+                ApplyToDerivedTypes="True"
+                TargetType="StackBase">
+                <Setter Property="Spacing" Value="{StaticResource ItemSpacing}" />
+            </Style>
+
+            <Style
+                x:Key="MauiLabel"
+                TargetType="Label">
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource White}, Light={StaticResource Primary}}" />
+            </Style>
+
+            <Style
+                x:Key="Action"
+                TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource BackgroundDark}, Light={StaticResource BackgroundLight}}" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Dark={StaticResource TextDark}, Light={StaticResource TextLight}}" />
+                <Setter Property="FontFamily" Value="{StaticResource AppFont}" />
+                <Setter Property="FontSize" Value="{StaticResource AppFontSize}" />
+                <Setter Property="Padding" Value="14,10" />
+            </Style>
+
+            <Style
+                x:Key="PrimaryAction"
+                BasedOn="{StaticResource Action}"
+                TargetType="Button">
+                <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="TextColor" Value="{StaticResource White}" />
+            </Style>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/MyApp.xaml.cs

@@ -0,0 +1,14 @@
+namespace WinUIBlazor
+{
+    public partial class MyApp : Application
+    {
+        public MyApp()
+        {
+            InitializeComponent();
+            UserAppTheme = PlatformAppTheme;
+        }
+
+        protected override Window CreateWindow(IActivationState? activationState)
+            => new Window(new MainPage()) { Title = "WinUIBlazor" };
+    }
+}

src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Resources/Colors.xaml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<?xaml-comp compile="true" ?>
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:local="clr-namespace:WinUIBlazor"
+    mc:Ignorable="d">
+
+    <Color x:Key="Primary">#512BD4</Color>
+    <Color x:Key="Secondary">#DFD8F7</Color>
+    <Color x:Key="Tertiary">#2B0B98</Color>
+    <Color x:Key="White">White</Color>
+    <Color x:Key="Black">Black</Color>
+    <Color x:Key="Gray100">#E1E1E1</Color>
+    <Color x:Key="Gray200">#C8C8C8</Color>
+    <Color x:Key="Gray300">#ACACAC</Color>
+    <Color x:Key="Gray400">#919191</Color>
+    <Color x:Key="Gray500">#6E6E6E</Color>
+    <Color x:Key="Gray600">#404040</Color>
+    <Color x:Key="Gray900">#212121</Color>
+    <Color x:Key="Gray950">#141414</Color>
+
+    <Color x:Key="Light">#DFD8F7</Color>
+    <Color x:Key="Dark">#2B0B98</Color>
+    <Color x:Key="LightGray">#E5E5E1</Color>
+    <Color x:Key="MidGray">#969696</Color>
+    <Color x:Key="DarkGray">#505050</Color>
+
+    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
+    <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
+    <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>
+    <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}"/>
+    <SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}"/>
+    <SolidColorBrush x:Key="Gray100Brush" Color="{StaticResource Gray100}"/>
+    <SolidColorBrush x:Key="Gray200Brush" Color="{StaticResource Gray200}"/>
+    <SolidColorBrush x:Key="Gray300Brush" Color="{StaticResource Gray300}"/>
+    <SolidColorBrush x:Key="Gray400Brush" Color="{StaticResource Gray400}"/>
+    <SolidColorBrush x:Key="Gray500Brush" Color="{StaticResource Gray500}"/>
+    <SolidColorBrush x:Key="Gray600Brush" Color="{StaticResource Gray600}"/>
+    <SolidColorBrush x:Key="Gray900Brush" Color="{StaticResource Gray900}"/>
+    <SolidColorBrush x:Key="Gray950Brush" Color="{StaticResource Gray950}"/>
+
+    <SolidColorBrush x:Key="LightBrush" Color="{StaticResource Light}" />
+    <SolidColorBrush x:Key="DarkBrush" Color="{StaticResource Dark}" />
+    <SolidColorBrush x:Key="LightGrayBrush" Color="{StaticResource LightGray}" />
+    <SolidColorBrush x:Key="MidGrayBrush" Color="{StaticResource MidGray}" />
+    <SolidColorBrush x:Key="DarkGrayBrush" Color="{StaticResource DarkGray}" />
+
+    <!-- Dark and Light App Theme -->
+    <Color x:Key="BackgroundDark">#121212</Color>
+    <Color x:Key="BackgroundLight">White</Color>
+    <Color x:Key="TextDark">White</Color>
+    <Color x:Key="TextLight">Black</Color>
+
+    <Color x:Key="Yellow100Accent">#F7B548</Color>
+    <Color x:Key="Yellow200Accent">#FFD590</Color>
+    <Color x:Key="Yellow300Accent">#FFE5B9</Color>
+    <Color x:Key="Cyan100Accent">#28C2D1</Color>
+    <Color x:Key="Cyan200Accent">#7BDDEF</Color>
+    <Color x:Key="Cyan300Accent">#C3F2F4</Color>
+    <Color x:Key="Blue100Accent">#3E8EED</Color>
+    <Color x:Key="Blue200Accent">#72ACF1</Color>
+    <Color x:Key="Blue300Accent">#A7CBF6</Color>
+
+</ResourceDictionary>