Blazor Hybrid WinForms tutorial (PR3) #24989

guardrex · 2022-02-14T14:41:33Z

Addresses #24956

Naming ...

The final app naming is "Windows Forms" before "Blazor" to match what we have in the .NET MAUI case. ".NET MAUI Blazor app" ... so ... "Windows Forms Blazor app" is the way that I went. Obviously (and given our earlier discussion on official names of Blazor Hybrid apps still a bit of a WIP), I'm just trying to maintain consistency.
WRT "WinForms" vs "Windows Forms," I checked the Windows Forms doc set to see what they do. They highly prefer the formal name "Windows Forms." They don't totally avoid "WinForms." They use it rarely ... e.g., in some sample app scenarios. I took the same approach here. "WinForms" is used in sample naming but not in the topic, which consistently goes with "Windows Forms."

danroth27

Thanks for putting this together, @guardrex.

I would prefer to simplify this tutorial to setup a single Razor component instead of the entire default Blazor project template. That should allow us to give inline instructions instead of copying from other projects.

Here are the high-level steps that I'd like to use:

Create a new Windows Forms app
Install the Microsoft.AspNetCore.Components.WebView.WindowsForms using the NuGet package manager
Update the .csproj file to change the SDK to Microsoft.NET.Sdk.Razor
Add an _Imports.razor file with @using Microsoft.AspNetCore.Components.Web
Add a wwwroot folder
Add wwwroot\index.html with the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsApp1</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsApp1.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

Add wwwroot/css/app.css with the following

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Update the .csproj file to copy wwwroot\** to the output directory:

I'm following up on how we can get rid of this step but for now I think it's needed.

<ItemGroup>
  <Content Update="wwwroot\**" CopyToOutputDirectory="PreserveNewest" />
</ItemGroup>

Add a Counter.razor file with the default Counter component code.

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Double-click on Form1.cs to open the designer.
Use View > Toolbox, and find BlazorWebView
Drag BlazorWebView into the Form1 designer.
Right-click on this new item and choose Properties. Change its Dock value to Fill by clicking on the central rectangle:
Inside the Form1 constructor, underneath InitializeComponent(), add the following code:

var services = new ServiceCollection();
services.AddBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

Run the app.

aspnetcore/blazor/hybrid/tutorials/windows-forms.md

guardrex · 2022-02-15T00:50:34Z

I would prefer to simplify this tutorial to setup a single Razor component instead of the entire default Blazor project template. That should allow us to give inline instructions instead of copying from other projects.

Sure thing. 👍

Due to the need to rewrite this, I probably won't have the WPF tutorial up until Wednesday morning. When I reach it, I'll write the WPF tutorial in the same vein as the rewrite guidance.

guardrex · 2022-02-15T14:48:32Z

❓s on the updates ...

Do you want to include any further namespaces in the _Imports.razor file?
Is it ok to name the project WinFormsBlazor (on the PR)? Seems nicer to me than WinFormsApp1. btw- If we keep this naming here, I'll update the MAUI tutorial later to use MauiBlazor (or similar naming). It's currently using kind'a crappy-er-ish 😄 MauiApp1 default naming.
Leave the stylesheet link for WinFormsBlazor.styles.css in index.html?
Do you want to send me a rounded-corners image for running-app.png? If so, please snap it with a little extra space around the image on a white or black background to facilitate the Photoshopping step.

danroth27 · 2022-02-15T17:56:05Z

Do you want to include any further namespaces in the _Imports.razor file?

I don't believe other namespaces are required, so let's keep it minimalistic.

Is it ok to name the project WinFormsBlazor (on the PR)? Seems nicer to me than WinFormsApp1. btw- If we keep this naming here, I'll update the MAUI tutorial later to use MauiBlazor (or similar naming). It's currently using kind'a crappy-er-ish 😄 MauiApp1 default naming.

Sure, WinFormsBlazor is fine.

Leave the stylesheet link for WinFormsBlazor.styles.css in index.html?

Yeah, let's leave it. It is a bit weird that it doesn't get generated if you don't have any component specific styles, but I think you'll need it pretty quickly.

Do you want to send me a rounded-corners image for running-app.png? If so, please snap it with a little extra space around the image on a white or black background to facilitate the Photoshopping step.

Nah, your Win10 snapshots are fine.

guardrex · 2022-02-15T18:16:52Z

I'll be on stand-by for feedback and updates.

I'm around the 🏠 all day right into the evening ... WELL ... until the US Curling Teams get on the ice!

Go Team Tabitha!

Go Team Shuster!

aspnetcore/blazor/hybrid/tutorials/windows-forms.md

danroth27

Co-authored-by: Daniel Roth <daroth@microsoft.com>

Blazor Hybrid WinForms tutorial (PR3)

57435d7

guardrex mentioned this pull request Feb 14, 2022

Blazor Hybrid tracking #24956

Closed

25 tasks

Updates

762db2c

guardrex requested review from danroth27 and mkArtakMSFT February 14, 2022 14:57

danroth27 requested changes Feb 15, 2022

View reviewed changes

danroth27 reviewed Feb 15, 2022

View reviewed changes

aspnetcore/blazor/hybrid/tutorials/windows-forms.md Outdated Show resolved Hide resolved

danroth27 reviewed Feb 15, 2022

View reviewed changes

aspnetcore/blazor/hybrid/tutorials/windows-forms.md Outdated Show resolved Hide resolved

guardrex added 2 commits February 15, 2022 08:23

Updates

58a78cf

Updates

faf3532

Updates

600c4cf

danroth27 reviewed Feb 15, 2022

View reviewed changes

aspnetcore/blazor/hybrid/tutorials/windows-forms.md Outdated Show resolved Hide resolved

danroth27 approved these changes Feb 15, 2022

View reviewed changes

Update aspnetcore/blazor/hybrid/tutorials/windows-forms.md

b099344

Co-authored-by: Daniel Roth <daroth@microsoft.com>

guardrex merged commit c8e50a3 into main Feb 15, 2022

guardrex deleted the guardrex/blazor-hybrid-pr3 branch February 15, 2022 18:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blazor Hybrid WinForms tutorial (PR3) #24989

Blazor Hybrid WinForms tutorial (PR3) #24989

guardrex commented Feb 14, 2022 •

edited by danroth27

Loading

danroth27 left a comment •

edited

Loading

guardrex commented Feb 15, 2022 •

edited

Loading

guardrex commented Feb 15, 2022 •

edited

Loading

danroth27 commented Feb 15, 2022

guardrex commented Feb 15, 2022

danroth27 left a comment

Blazor Hybrid WinForms tutorial (PR3) #24989

Blazor Hybrid WinForms tutorial (PR3) #24989

Conversation

guardrex commented Feb 14, 2022 • edited by danroth27 Loading

danroth27 left a comment • edited Loading

Choose a reason for hiding this comment

guardrex commented Feb 15, 2022 • edited Loading

guardrex commented Feb 15, 2022 • edited Loading

danroth27 commented Feb 15, 2022

guardrex commented Feb 15, 2022

Go Team Tabitha!

Go Team Shuster!

danroth27 left a comment

Choose a reason for hiding this comment

guardrex commented Feb 14, 2022 •

edited by danroth27

Loading

danroth27 left a comment •

edited

Loading

guardrex commented Feb 15, 2022 •

edited

Loading

guardrex commented Feb 15, 2022 •

edited

Loading