How to check if a razor component is called by WPF-Blazor hybrid or Blazor application?

Question

As a razor component can be called in a WPF blazor hybrid or Blazor server/wasm project. Is it able to check if current running application is WPF or Blazor in the razor component?

Thanks!

Answer 1

you can also just use jsinterop to check if window.location is a local file (file://) vs network request.

Answer 2

Hi @William Liu

As a razor component can be called in a WPF blazor hybrid or Blazor server/wasm project. Is it able to check if current running application is WPF or Blazor in the razor component?

In the Blazor component, you can't directly determine whether the hosting application is a WPF Blazor hybrid, Blazor Server, or Blazor WebAssembly. However, we can infer certain conditions based on the environment or context in which your component is running.

For example:

In the WPF-Blazor Hybrid application (you can refer to this article), we can add an appsettings.json file to the root of the project with the following content (set the IsHybridas true).

{
  "IsHybrid": true
}

In the MainWindow.xaml.cs file,

    public partial class MainWindow : Window
    {
        public IConfiguration Configuration { get; }
        public MainWindow()
        {
            Configuration = new ConfigurationBuilder()  //configure the configuration.
            .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
            .Build();
            InitializeComponent();
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddSingleton<IConfiguration>(Configuration);  //register the IConfiguration.
            serviceCollection.AddWpfBlazorWebView();
            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }
    }

Then, in the razor component, inject the IConfiguration and get the value from the Configuration(appsettings.json).

@using Microsoft.Extensions.Configuration
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@if (IsHybridApplication)
{
    <p>This is a WPF-Blazor hybrid application.</p>
}
else
{
    <p>This is a standalone Blazor application.</p>
}
 
@code {
    private int currentCount = 0; 
    [Inject]
    private IConfiguration Configuration { get; set; }
    bool IsHybridApplication { get; set; } 
    protected override void OnInitialized()
    {
        if (Configuration != null)
            IsHybridApplication = Configuration.GetValue<bool>("IsHybrid");
    }
    private void IncrementCount()
    {
        currentCount++;
    }
}

After running the application, the result as below:

In the Blazor Server or Blazor WebAssembly application, we can set the IsHybrid to false,

Then, in the razor component (Counter.razor), we can use the following code:

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@if (IsHybridApplication)
{
    <p>This is a WPF-Blazor hybrid application.</p>
}
else
{
    <p>This is a standalone Blazor application.</p>
}
@code {
    private int currentCount = 0;
    [Inject]
    private IConfiguration Configuration { get; set; }
    bool IsHybridApplication { get; set; }
    protected override async Task OnInitializedAsync()
    {
        if (Configuration != null)
            IsHybridApplication = Configuration.GetValue<bool>("IsHybrid");
    }
    private void IncrementCount()
    {
        currentCount++;
    }
}

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion