Trying to add Synfusion Blazor to a Blazor-Hybrid (WPF) project

[Twalker]

I followed the directions here, https://docs.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/wpf?view=aspnetcore-6.0 to create a WPF -Blazor app and now I want to add Syncfusion, and since it is just a test, I randomly picked the navigation related to add to a page.

InvalidOperationException: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Navigations.SfMenu`1[[Syncfusion.Blazor.Navigations.MenuItem, Syncfusion.Blazor, Version=20.2.0.39, Culture=neutral, PublicKeyToken=null]]'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.

I have added the line of code that registers the license, and I have also added the service, since the error says it cannot find it, but when I try to registrer syncfusion  then I get an exception System.ArgumentException: 'Item has already been added. Key in dictionary: 'services' Key being added: 'services''

I have tried several things including installing different packages, and it doesn't seem to matter I always get the same error.

I have also searched around quite a bit, and there doesn't seem to be anything for how to do this when using WPF, though I did find something with Maui.

How can I install Synfusion on a Wpf-Blazor hybrid app?

thanks

[YuvanShankar Arunagiri]

Hi Twalker,

Sorry for the delay. We are validating your query and will update you the details on or before 29th July 2022.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Twalker,

Greetings from Syncfusion.

We have validated the reported issue at our end. Unfortunately, we are unable to replicate the issue, we have prepared sample and run, sample runs successfully without any issues. Please refer the below steps

1. Prepare a Blazor WPF hybrid application referring to the Blazor WPF hybrid tutorial .

2. Now, install the required Syncfusion Blazor Nuget package in the application.

3. Register Syncfusion services in the application in “MainWindow.xaml.cs” file in the application as below

using Microsoft.Extensions.DependencyInjection;

using Syncfusion.Blazor;

namespace WpfBlazorApp

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

var serviceCollection = new ServiceCollection();

            serviceCollection.AddWpfBlazorWebView();

serviceCollection.AddSyncfusionBlazor();

            Resources.Add("services", serviceCollection.BuildServiceProvider());

        }

    }

}

 

1. Refer Syncfusion styles and scripts in “wwwroot/index.html” file in the application. Please refer the below links

Styles: https://blazor.syncfusion.com/documentation/appearance/themes

Scripts: https://blazor.syncfusion.com/documentation/common/adding-script-references

1. Open “_Imports.razor” file and import the required namespaces for the components to be added in the application. For example, in the application we have added ListView component, so imported “Syncfusion.Blazor.Lists” namespace.

@using Microsoft.AspNetCore.Components.Web

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Lists

 

1. Add the Syncfusion component in razor page. Here, we have added ListView component.

2. Run the application, component rendered successfully without any issues. Please refer the below image for the output

Output:

1. If you want to register License Key in the application, add in the “App.xaml.cs” file in the application as below

namespace WpfBlazorApp

{

    public partial class App : Application

    {

        public App()

        {

//Register Syncfusion license

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

        }

    }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WpfBlazorApp1943300197

Kindly try with the above information and sample and get back to us if you have any queries.

Regards,

YuvanShankar A