Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Adding third party instructions #1860

Merged
merged 1 commit into from
Sep 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions doc/Overview/Maui/ThirdParty-DevExpress.md
Original file line number Diff line number Diff line change
@@ -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.
29 changes: 29 additions & 0 deletions doc/Overview/Maui/ThirdParty-EsriMaps.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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).
Expand All @@ -14,20 +18,20 @@ 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.

```cs
using C1.Maui.Grid;
using C1.Maui.Calendar;

namespace GrapeCityApp;
namespace MauiEmbeddingApp;

public static class AppBuilderExtensions
{
Expand All @@ -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");
});
}
```
Expand All @@ -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.
197 changes: 197 additions & 0 deletions doc/Overview/Maui/ThirdParty-GrialKit.md
Original file line number Diff line number Diff line change
@@ -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
<!-- Display name -->
<ApplicationTitle>[ApplicationTitle]</ApplicationTitle>
<!-- App Identifier -->
<ApplicationId>[ApplicationId]</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
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSourceCredentials>
<UXDivers>
<add key="Username" value="[username]" />
<add key="ClearTextPassword" value="[password]" />
</UXDivers>
</packageSourceCredentials>
<packageSources>
<clear />
<add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
<add key="UXDivers" value="https://nuget.uxdivers.com/grial" />
</packageSources>
</configuration>
```

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<string, Color>
{
{ "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
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:grial="http://uxdivers.com/grial"
x:Class="GrialSampleApp.MauiControls.EmbeddedControl"
HorizontalOptions="Fill"
VerticalOptions="Fill">
<ContentPage.Resources>
<grial:ChartTheme x:Key="PieTheme">
<SolidColorBrush Color="#F9B300" />
<SolidColorBrush Color="#FF602E" />
<SolidColorBrush Color="#B146C2" />
<SolidColorBrush Color="#5AC8FA" />
<SolidColorBrush Color="#46C771" />
<SolidColorBrush Color="#3F75FF" />
</grial:ChartTheme>
</ContentPage.Resources>

<VerticalStackLayout Padding="30">
<grial:PieChart x:Name="chart"
HeightRequest="400"
BackgroundColor="Transparent"
IsAnimated="False"
LabelFontColor="DimGray"
LabelFontSize="12"
StrokeSize="0"
Theme="{ StaticResource PieTheme }">
<grial:PieSeries InnerRadius="{ Binding Value, Source={x:Reference radius} }"
ItemsSource="{ Binding . }"
Radius="120"
ValuePath="Value" />
</grial:PieChart>

<Label Text="{Binding Value, Source={x:Reference radius}, StringFormat='InnerRadius: {0:F2}'}" />

<Slider Maximum=".9"
Minimum="0"
Value="0.8"
x:Name="radius" />
</VerticalStackLayout>
</ContentView>
```

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,
}
};
}
}
```
Loading