From a5df19f96428647d826a3a6541a1e603adfef618 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Thu, 6 Jun 2024 09:17:54 -0400 Subject: [PATCH 1/5] docs: single project changes --- .../Maui/ThirdParty-MauiCommunityToolkit.md | 82 +++++++++++++++---- 1 file changed, 64 insertions(+), 18 deletions(-) diff --git a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md index fdf15f97e9..4791c5f262 100644 --- a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md +++ b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md @@ -9,22 +9,66 @@ The controls from MauiCommunityToolkit can be used in an Uno Platform applicatio An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/MauiCommunityToolkitApp). +> [!NOTE] +> For this sample you don't need to have a license, because it's just a demo and for development purposes. +> +> MauiCommunityToolkitApp SDK for .NET is currently only compatible with Windows, Android, iOS, and Mac Catalyst when used with Uno Platform. + ## Getting Started 1. Create a new application using the `unoapp` template, enabling .NET MAUI Embedding. In this case, we're going to use the Blank template (`-preset blank`) and include .NET MAUI Embedding support (`-maui`). ```dotnetcli - dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + dotnet new unoapp -preset blank -maui -o MauiCommunityToolkitApp ``` +### [Visual Studio](#tab/vs) +> [!NOTE] +> If you don't have the **Uno Platform Extension for Visual Studio** installed, follow [these instructions](xref:Uno.GetStarted.vs2022). + +- Launch **Visual Studio** and click on **Create new project** on the Start Window. Alternatively, if you're already in Visual Studio, click **New, Project** from the **File** menu. + +- Type `Uno Platform` in the search box + +- Click **Uno Platform App**, then **Next** + +- Name the project `MauiCommunityToolkitApp` and click **Create** + +At this point you'll enter the **Uno Platform Template Wizard**, giving you options to customize the generated application. + +- Select **Blank** in **Presets** selection + +- Select the **Platforms** tab and unselect **Desktop** and **Web Assembly** platforms + +- Select the **Features** tab and click on **.NET MAUI Embedding** + + Click **Create** to complete the wizard -1. Add a reference to the [CommunityToolkit.Maui NuGet package](https://www.nuget.org/packages/CommunityToolkit.Maui) to the MauiEmbeddingApp.MauiControls project. +The template will create a solution with a single cross-platform project, named `MauiCommunityToolkitApp`, ready to run. -1. In the `AppBuilderExtensions` class, on `MauiEmbeddingApp.MauiControls` project, update the `UseMauiControls` extension method to call the `UseMauiCommunityToolkit` method. +For more information on all the template options, see [Using the Uno Platform Template](xref:Uno.GettingStarted.UsingWizard). + +### [Command Line](#tab/cli) + +> [!NOTE] +> If you don't have the **Uno Platform dotnet new templates** installed, follow [dotnet new templates for Uno Platform](xref:Uno.GetStarted.dotnet-new). +Create a new application using the `unoapp` template, enabling .NET MAUI Embedding. In this case, we're going to use the Blank template (`-preset blank`) and include .NET MAUI Embedding support (`-maui`). + +```bash +dotnet new unoapp -preset blank -maui -platforms "android" -platforms "ios" -platforms "maccatalyst" -platforms "windows" -o MauiCommunityToolkitApp +``` + +This will create a new folder called **MauiCommunityToolkitApp** containing the new application. + +--- + +1. Add a reference to the [MauiCommunityToolkitApp.Maui NuGet package](https://www.nuget.org/packages/CommunityToolkit.Maui) to the MauiCommunityToolkitApp.MauiControls project. + +1. In the `AppBuilderExtensions` class, on `MauiCommunityToolkitApp.MauiControls` project, update the `UseMauiControls` extension method to call the `UseMauiCommunityToolkit` method. ```cs - using CommunityToolkit.Maui; + using MauiCommunityToolkitApp.Maui; - namespace MauiEmbeddingApp; + namespace MauiCommunityToolkitApp; public static class AppBuilderExtensions { @@ -33,8 +77,8 @@ An existing sample app that showcases the controls is available [here](https://g .UseMauiCommunityToolkit() .ConfigureFonts(fonts => { - fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); - fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); + fonts.AddFont("MauiCommunityToolkitApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); + fonts.AddFont("MauiCommunityToolkitApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); }); } ``` @@ -48,7 +92,7 @@ An existing sample app that showcases the controls is available [here](https://g - @@ -107,10 +151,10 @@ An existing sample app that showcases the controls is available [here](https://g ``` -1. It's time to create the ViewModel that will hold the properties that will be data bound to the `DrawingView` control. On `MauiEmbeddingApp` project, create a new folder called `ViewModels` and add a new class called `MainViewModel`. This class will have the following code: +1. It's time to create the ViewModel that will hold the properties that will be data bound to the `DrawingView` control. On `MauiCommunityToolkitApp` project, create a new folder called `ViewModels` and add a new class called `MainViewModel`. This class will have the following code: ```cs -namespace MauiEmbeddingApp.ViewModels; +namespace MauiCommunityToolkitApp.ViewModels; partial class MainViewModel : ObservableObject { @@ -122,15 +166,15 @@ partial class MainViewModel : ObservableObject } ``` -1. The `MainViewModel` uses the `ObservableObject` base class that comes from the `CommunityToolkit.MVVM` NuGet package. This significantly reduces the amount of boilerplate code required. Add a reference to the [CommunityToolkit.Mvvm NuGet package](https://www.nuget.org/packages/CommunityToolkit.Mvvm) to the MauiEmbeddingApp project. +1. The `MainViewModel` uses the `ObservableObject` base class that comes from the `CommunityToolkit.MVVM` NuGet package. This significantly reduces the amount of boilerplate code required. Add a reference to the [CommunityToolkit.Mvvm NuGet package](https://www.nuget.org/packages/CommunityToolkit.Mvvm) to the MauiCommunityToolkitApp project. 1. The final step is to add the `MainViewModel` as the `DataContext` of the `Page` in the `MainPage.xaml` file. Here's how the final xaml should look. ```xml - - @@ -162,6 +206,8 @@ partial class MainViewModel : ObservableObject 1. Now the project is good to go! Press F5 and you should see the `DrawingView` control working as expected. And tweaking the `ToggleSwitch` controls should change the `DrawingView` behavior. +For more detailed instructions specific to each platform, refer to the [Debug the App](xref:Uno.GettingStarted.CreateAnApp.VS2022#debug-the-app) documentation. + **App Render Output** - **Android:** From e5bdeaf5925ae9757bcb69c107c6f7de78467ee0 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Fri, 7 Jun 2024 11:34:24 -0400 Subject: [PATCH 2/5] docs: resolving PR comments --- doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md index 4791c5f262..3b43ec8fe1 100644 --- a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md +++ b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md @@ -10,8 +10,6 @@ The controls from MauiCommunityToolkit can be used in an Uno Platform applicatio An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/MauiCommunityToolkitApp). > [!NOTE] -> For this sample you don't need to have a license, because it's just a demo and for development purposes. -> > MauiCommunityToolkitApp SDK for .NET is currently only compatible with Windows, Android, iOS, and Mac Catalyst when used with Uno Platform. ## Getting Started @@ -77,8 +75,8 @@ This will create a new folder called **MauiCommunityToolkitApp** containing the .UseMauiCommunityToolkit() .ConfigureFonts(fonts => { - fonts.AddFont("MauiCommunityToolkitApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); - fonts.AddFont("MauiCommunityToolkitApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); + fonts.AddFont("Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); + fonts.AddFont("Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); }); } ``` From 1191acdbbe6e33e22931ae8b8cda925616e7855b Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Fri, 7 Jun 2024 12:56:01 -0400 Subject: [PATCH 3/5] docs: resolving PR comments --- doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md index 3b43ec8fe1..9d4db10635 100644 --- a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md +++ b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md @@ -83,7 +83,7 @@ This will create a new folder called **MauiCommunityToolkitApp** containing the ## Adding DrawingView -1. Update the EmbeddedControl.xaml in the `MauiEmbedding.MauiControls` project with the following XAML that includes the `DrawingView` control +1. Update the EmbeddedControl.xaml in the `MauiCommunityToolkitApp.MauiControls` project with the following XAML that includes the `DrawingView` control ```xml From 03b2acc2bdc49aadcfd3973c44591b53d20ee531 Mon Sep 17 00:00:00 2001 From: Kunal Shah <37922021+Kunal22shah@users.noreply.github.com> Date: Mon, 17 Jun 2024 12:11:54 -0400 Subject: [PATCH 4/5] docs: resolving PR comments Co-authored-by: Steve Bilogan --- doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md index 9ca3e3427d..1ce5de14b2 100644 --- a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md +++ b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md @@ -59,12 +59,12 @@ This will create a new folder called **MauiCommunityToolkitApp** containing the --- -1. Add a reference to the [MauiCommunityToolkitApp.Maui NuGet package](https://www.nuget.org/packages/CommunityToolkit.Maui) to the MauiCommunityToolkitApp.MauiControls project. +1. Add a reference to the [CommunityToolkitApp.Maui NuGet package](https://www.nuget.org/packages/CommunityToolkit.Maui) to the MauiCommunityToolkitApp.MauiControls project. 1. In the `AppBuilderExtensions` class, on `MauiCommunityToolkitApp.MauiControls` project, update the `UseMauiControls` extension method to call the `UseMauiCommunityToolkit` method. ```cs - using MauiCommunityToolkitApp.Maui; + using CommunityToolkitApp.Maui; namespace MauiCommunityToolkitApp; From 6849b084495cd87b6c12b1d2d9ad09a2eebffc0b Mon Sep 17 00:00:00 2001 From: Kunal Shah <37922021+Kunal22shah@users.noreply.github.com> Date: Tue, 18 Jun 2024 09:35:34 -0400 Subject: [PATCH 5/5] docs: resolving PR comments Co-authored-by: Steve Bilogan --- doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md index 1ce5de14b2..dbf65358e4 100644 --- a/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md +++ b/doc/Learn/Maui/ThirdParty-MauiCommunityToolkit.md @@ -64,7 +64,7 @@ This will create a new folder called **MauiCommunityToolkitApp** containing the 1. In the `AppBuilderExtensions` class, on `MauiCommunityToolkitApp.MauiControls` project, update the `UseMauiControls` extension method to call the `UseMauiCommunityToolkit` method. ```cs - using CommunityToolkitApp.Maui; + using CommunityToolkit.Maui; namespace MauiCommunityToolkitApp;