Skip to content

Commit

Permalink
Native WinUI 3 Blazor Hybrid Sample
Browse files Browse the repository at this point in the history
  • Loading branch information
egvijayanand committed Sep 5, 2024
1 parent b13ba52 commit 216ea41
Show file tree
Hide file tree
Showing 66 changed files with 2,302 additions and 22 deletions.
43 changes: 21 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down
5 changes: 5 additions & 0 deletions src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Imports.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
global using WinUIBlazor;
global using WinUIBlazor.Views;

// Static
global using static Microsoft.Maui.Graphics.Colors;
10 changes: 10 additions & 0 deletions src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Main.razor
Original file line number Diff line number Diff line change
@@ -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>
51 changes: 51 additions & 0 deletions src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/MyApp.xaml
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/MyApp.xaml.cs
Original file line number Diff line number Diff line change
@@ -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" };
}
}
67 changes: 67 additions & 0 deletions src/NET_9/WinUIBlazor/WinUIBlazor.MauiLib/Resources/Colors.xaml
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 216ea41

Please sign in to comment.