diff --git a/doc/Overview/Maui/ThirdParty-DevExpress.md b/doc/Overview/Maui/ThirdParty-DevExpress.md new file mode 100644 index 0000000000..263c708876 --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-DevExpress.md @@ -0,0 +1,29 @@ +--- +uid: Overview.Maui.ThirdParty.DevExpress +--- +# .NET MAUI Embedding - DevExpress + +The YYYY controls from DevExpress can be used in an Uno Platform application via .NET MAUI Embedding. + +## Installation + +In order to use the YYYY controls, you first need to [instructions and link]. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/DevExpressApp) + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. + + +## Adding ControlZZZ + +1. \ No newline at end of file diff --git a/doc/Overview/Maui/ThirdParty-EsriMaps.md b/doc/Overview/Maui/ThirdParty-EsriMaps.md new file mode 100644 index 0000000000..e3433f0b35 --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-EsriMaps.md @@ -0,0 +1,29 @@ +--- +uid: Overview.Maui.ThirdParty.EsriMaps +--- +# .NET MAUI Embedding - EsriMaps + +The YYYY controls from EsriMaps can be used in an Uno Platform application via .NET MAUI Embedding. + +## Installation + +In order to use the YYYY controls, you first need to [instructions and link]. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/ArcGisApp) + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. + + +## Adding ControlZZZ + +1. \ No newline at end of file diff --git a/doc/Overview/Maui/GrapeCity.md b/doc/Overview/Maui/ThirdParty-GrapeCity.md similarity index 69% rename from doc/Overview/Maui/GrapeCity.md rename to doc/Overview/Maui/ThirdParty-GrapeCity.md index 6bdf856205..94742bc896 100644 --- a/doc/Overview/Maui/GrapeCity.md +++ b/doc/Overview/Maui/ThirdParty-GrapeCity.md @@ -1,10 +1,14 @@ --- -uid: Overview.Maui.GrapeCity +uid: Overview.Maui.ThirdParty.GrapeCity --- # .NET MAUI Embedding - GrapeCity The ComponentOne FlexGrid and Calendar controls from GrapeCity can be used in an Uno Platform application via .NET MAUI Embedding. +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/MauiEmbeddingApp) + ## Installation In order to use the ComponentOne controls, you first need to install the ComponentOne ControlPanel following [these instructions](https://www.grapecity.com/componentone/docs/maui/online-maui/get-started.html). @@ -14,12 +18,12 @@ In order to use the ComponentOne controls, you first need to install the Compone 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`). ``` - dotnet new unoapp -preset blank -maui -o GrapeCityApp + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp ``` -1. Remove the `net7.0` (or `net8.0`) target framework from both the GrapeCityApp and GrapeCityApp.MauiControls projects. +1. Remove the `net7.0` target framework from both the MauiEmbeddingApp and MauiEmbeddingApp.MauiControls projects. -1. Next, add a reference to the C1 .NET MAUI NuGet packages to the GrapeCityApp.MauiControls library. If you want to use the FlexGrid, add a reference to [`C1.Maui.Grid`](https://www.nuget.org/packages/C1.Maui.Grid); if you want to use the Calendar, add a reference to [`C1.Maui.Calendar`](https://www.nuget.org/packages/C1.Maui.Calendar). +1. Next, add a reference to the C1 .NET MAUI NuGet packages to the MauiEmbeddingApp.MauiControls project. If you want to use the FlexGrid, add a reference to [`C1.Maui.Grid`](https://www.nuget.org/packages/C1.Maui.Grid); if you want to use the Calendar, add a reference to [`C1.Maui.Calendar`](https://www.nuget.org/packages/C1.Maui.Calendar). 1. In the `AppBuilderExtensions` class, update the `UseMauiControls` extension method to call either, or both, the `RegisterFlexGridControls` or `RegisterCalendarControls` methods. @@ -27,7 +31,7 @@ In order to use the ComponentOne controls, you first need to install the Compone using C1.Maui.Grid; using C1.Maui.Calendar; - namespace GrapeCityApp; + namespace MauiEmbeddingApp; public static class AppBuilderExtensions { @@ -37,8 +41,8 @@ In order to use the ComponentOne controls, you first need to install the Compone .RegisterCalendarControls() .ConfigureFonts(fonts => { - fonts.AddFont("GrapeCityApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); - fonts.AddFont("GrapeCityApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); }); } ``` @@ -57,8 +61,3 @@ In order to use the ComponentOne controls, you first need to install the Compone 1. Follow the [Calendar Quick Start](https://www.grapecity.com/componentone/docs/maui/online-maui/calendarquickstart.html) by applying XAML to the EmbeddedControl.xaml. 1. In order for the Calendar control to render correctly on all platforms you should set both `HeightRequest` and `WidthRequest` attributes on the Calendar control. - - -## Sample - -A sample application that features GrapeCity controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/dev/master/UI/MauiEmbedding/GrapeCityApp). The samples requires the ComponentOne ControlPanel to be installed. diff --git a/doc/Overview/Maui/ThirdParty-GrialKit.md b/doc/Overview/Maui/ThirdParty-GrialKit.md new file mode 100644 index 0000000000..d802901461 --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-GrialKit.md @@ -0,0 +1,197 @@ +--- +uid: Overview.Maui.ThirdParty.GrialKit +--- +# .NET MAUI Embedding - Grial UI Kit + +The controls from Grial UI Kit can be used in an Uno Platform application via .NET MAUI Embedding. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/GrialKitApp) + +## Installation + +In order to use the Grial UI Kit controls, you first need to [sign up](https://admin.grialkit.com/secure/grial/front/signup). + +After signing up, when you login to the [admin portal](https://admin.grialkit.com), you'll be prompted to create a Grial app by entering the name of the application. Once you've created the Grial app, go to the Download tab and select `Download Kickoff Solution` - at this point you'll be prompted to purchase a license, which you'll need in order to proceed with using Grial. + +Extract the downloaded zip file and locate the GrialLicense file. We'll add this file into the Uno application. Also in the zip file, open the csproj file and retrieve the ApplicationTitle and ApplicationId property values. + +```xml + +[ApplicationTitle] + +[ApplicationId] +``` +The last thing we'll need from the zip file is the nuget.config file. This file will also be added to the Uno application. + + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. Remove the `net7.0`, `net7.0-maccatalyst` and `net7.0-windows10.0.19041.0` target frameworks from both the MauiEmbeddingApp and MauiEmbeddingApp.MauiControls projects. + +1. Remove the `net7.0-windows10.0.19041.0` target framework from the MauiEmbeddingApp.Mobile project. + +1. Remove the `MauiEmbeddingApp.Windows` project from the solution. + +1. Add the `GrailLicense` file to the MauiEmbeddingApp.MauiControls project as an `EmbeddedResource` + +1. Add the nuget.config file to the solution folder and make sure that the `packageSourceCredentials` section includes username and password. If you're missing credentials, go to the [profile page](https://admin.grialkit.com/secure/grial/front/profile) in the admin portal and click on the Nuget tab where you can create credentials for your account. + +```xml + + + + + + + + + + + + + + +``` + +1. In the project file (csproj) for MauiEmbeddingApp.Mobile update the `ApplicationTitle` and `ApplicationId` properties with those retrieved earlier from the zip file. + +1. Expand out the MauiEmbeddingApp.Mobile project and locate the Main.Android.cs file. Change the Label property of the ApplicationAttribute from `@string/ApplicationName` to the ApplicationTitle retrieved earlier from the zip file. + +```cs +[global::Android.App.ApplicationAttribute( + Label = "ApplicationTitle", + Icon = "@mipmap/iconapp", + LargeHeap = true, + HardwareAccelerated = true, + Theme = "@style/AppTheme" +)] +public class Application : Microsoft.UI.Xaml.NativeApplication +``` + +1. Add a reference to the UXDivers.GrialMaui NuGet packages to the MauiEmbeddingApp.MauiControls project. + +1. In the `AppBuilderExtensions` class, update the `UseMauiControls` extension method to call the `GrialKit.Init` and `UseGrial` methods. + +```cs +using UXDivers.Grial; + +namespace GrialSampleApp; +public static class AppBuilderExtensions +{ + public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder) + { +#if __IOS__ + var theme = new ThemeColorsBase(new Dictionary + { + { "AccentColor", Color.FromArgb("#FF3F75FF") } + }); + + GrialKit.Init(theme, "MauiEmbeddingApp.MauiControls.GrialLicense"); +#else + GrialKit.Init("MauiEmbeddingApp.MauiControls.GrialLicense"); +#endif + return builder + .UseGrial() + .ConfigureFonts(fonts => + { + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); + }); + } +} +``` + +## Adding a PieChart + +The PieChart is one of many controls that's available in the Grial UI Kit. More information about the PieChart and other controls is available in the [Grial UI Kit Documentation](https://docs.grialkit.com/charts/pie-chart) + +1. Update the EmbeddedControl.xaml with the following XAML that includes the PieChart + +```xml + + + + + + + + + + + + + + + + + + + + +``` + +1. Update the EmbeddedControl.xaml.cs with the following code that sets the `BindingContext` for the chart (the PieChart) to be a basic set of data. + +```cs +namespace GrialSampleApp.MauiControls; + +public partial class EmbeddedControl : ContentView +{ + public EmbeddedControl() + { + InitializeComponent(); + + chart.BindingContext = new[] + { + new { + Value = 521.02, + }, + new { + Value = 62.56, + }, + new { + Value = 245.52, + }, + new { + Value = 33.26, + }, + new { + Value = 33.26, + }, + new { + Value = 78.95, + } + }; + } +} +``` \ No newline at end of file diff --git a/doc/Overview/Maui/ThirdParty-MauiCommunityToolkit.md b/doc/Overview/Maui/ThirdParty-MauiCommunityToolkit.md new file mode 100644 index 0000000000..44487033f0 --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-MauiCommunityToolkit.md @@ -0,0 +1,146 @@ +--- +uid: Overview.Maui.ThirdParty.MauiCommunityToolkit +--- +# .NET MAUI Embedding - MauiCommunityToolkit + +The controls from MauiCommunityToolkit can be used in an Uno Platform application via .NET MAUI Embedding. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/MauiCommunityToolkitApp) + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. Remove the `net7.0` target framework from both the MauiEmbeddingApp and MauiEmbeddingApp.MauiControls projects. + +1. Next, add a reference to the [CommunityToolkit.Maui NuGet package](https://www.nuget.org/packages/CommunityToolkit.Maui) to the MauiEmbeddingApp.MauiControls project. + +1. In the `AppBuilderExtensions` class, on `MauiEmbeddingApp.MauiControls` project, update the `UseMauiControls` extension method to call the `UseMauiCommunityToolkit` method. + + ```cs + using CommunityToolkit.Maui; + + namespace MauiEmbeddingApp; + + public static class AppBuilderExtensions + { + public static MauiAppBuilder UseMauiControls(this MauiAppBuilder builder) + => builder + .UseMauiCommunityToolkit() + .ConfigureFonts(fonts => + { + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansRegular.ttf", "OpenSansRegular"); + fonts.AddFont("MauiEmbeddingApp/Assets/Fonts/OpenSansSemibold.ttf", "OpenSansSemibold"); + }); + } + ``` + +## Adding DrawingView + +1. On `MauiEmbeddingApp.MauiControls` project, add a new Xaml file that has `ContentView` as the root. Then add the `DrawingView` control, as shown in the snippet below. + + ```xml + + + + + ``` + + > [!NOTE] + > You may noticed that the `Binding` markup extension is used on some properties. The `MauiEmbedding` can handle bindings between Maui Controls and UnoPlatform, just make > > sure to use the name on your ViewModel. + +1. On `MauiEmbeddingApp` project, find the `MainPage.xaml` file there you may find the `embed:MauiHost` control. This control will hold any `MauiControl` that you've on your `MauiEmbeddingApp.MauiControls` project. Update the `Source` property to reflect the `DrawingViewControl` that you've created on the previous step. You can see how the `MauiHost` control will look like. + + ```xml + + ``` + + > [!NOTE] + > The usage of `MinWidth` and `MinHeight` is optional + +1. Now let's create the controls that will control the `DrawingView.IsMultiLineModeEnabled` and `DrawingView.ShouldClearOnFinish` properties. The final layout will be soemthing like this: + + ```xml + + + + + + + + ``` + +1. It's time to create the ViewModel that will hold the properties that will be binded to the `DrawingView` control. On `MauiEmbeddingApp` project, create a new folder called `ViewModels` and add a new class called `MainPageViewModel`. This class will have the following code: + + ```cs + namespace MauiEmbeddingApp.ViewModels; + partial class DrawingViewViewModel : ObservableObject + { + [ObservableProperty] + bool isMultiLineModeEnabled; + + [ObservableProperty] + bool shouldCleanOnFinish; + } + ``` + + > [!IMPORTANT] + > This sample is using the CommunityToolkit.MVVM, we recommend it to avoid a lot of boiler plate code, you can fid the package [here](https://www.nuget.org/packages/CommunityToolkit.Mvvm). + +1. The final step is to add the `DrawingViewViewModel` as the `DataContext` of the `MainPage.xaml`. Here's all your `MainPage.xaml` should look + + ```xml + + + + + + + + + + + + + + ``` + +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. \ No newline at end of file diff --git a/doc/Overview/Maui/ThirdParty-Synfusion.md b/doc/Overview/Maui/ThirdParty-Synfusion.md new file mode 100644 index 0000000000..17300fbfa6 --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-Synfusion.md @@ -0,0 +1,29 @@ +--- +uid: Overview.Maui.ThirdParty.Syncfusion +--- +# .NET MAUI Embedding - Syncfusion + +The YYYY controls from Syncfusion can be used in an Uno Platform application via .NET MAUI Embedding. + +## Installation + +In order to use the YYYY controls, you first need to [instructions and link]. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/SyncfusionApp) + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. + + +## Adding ControlZZZ + +1. \ No newline at end of file diff --git a/doc/Overview/Maui/ThirdParty-Telerik.md b/doc/Overview/Maui/ThirdParty-Telerik.md new file mode 100644 index 0000000000..a2e5a886cc --- /dev/null +++ b/doc/Overview/Maui/ThirdParty-Telerik.md @@ -0,0 +1,29 @@ +--- +uid: Overview.Maui.ThirdParty.Telerik +--- +# .NET MAUI Embedding - Telerik + +The YYYY controls from Telerik can be used in an Uno Platform application via .NET MAUI Embedding. + +## Installation + +In order to use the YYYY controls, you first need to [instructions and link]. + +## Sample App + +An existing sample app that showcases the controls is available [here](https://github.com/unoplatform/Uno.Samples/tree/master/UI/MauiEmbedding/TelerikApp) + +## 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`). + + ``` + dotnet new unoapp -preset blank -maui -o MauiEmbeddingApp + ``` + +1. + + +## Adding ControlZZZ + +1. \ No newline at end of file