Windows Forms Designer and WPF Designer for .NET Core

Question

I have recently heard that the alpha version of .NET Core (.NET Core 3.0) supports Windows Forms and WPF. But the Visual Studio Designer (and Visual Studio) doesn't support the .NET Core version of Windows Forms and WPF.

Is there any way to make the Visual Studio Designer(and Visual Studio) work with .NET Core 3.0 or Is there any other designer or IDE that I can use to work with .NET Core 3?

Businesswoman

Using the Classic WinForms Designer in WinForms Core – Iridaceous

Windows Forms Designer Preview 1 – Iridaceous

Updates to .NET Core Windows Forms designer in Visual Studio 16.5 Preview 1 – Iridaceous

Answer 1

Windows Forms - Visual Studio 2019 (16.5 Preview 1 - .NET CORE 3.1)

Starting from Visual Studio 16.5 Preview 1, there is builtin support for Windows Forms designer in Visual Studio. To use the designer:

• You must be using Visual Studio 16.5 Preview 1 or a later version.
• You need to enable the designer in Visual Studio. Go to Tools → Options → Environment → Preview Features and select the Use the preview Windows Forms designer for .NET Core apps option.

For more information:

• Updates to .NET Core Windows Forms designer in Visual Studio 16.5 Preview 1.
• WinForms and WPF .NET CORE repositories.

Keep in mind, in this release, many controls aren’t yet supported in designer.

Workaround for Older versions

Starting from Visual Studio 16.5 Preview 1, there is builtin support for Windows Forms designer in Visual Studio. But for older versions you can use the following workaround:

At the moment, there is a workaround for using Classic .NET Windows Forms Designer for .NET CORE Windows Forms projects.

The workaround relies on having Classic WinForms App and CORE WinForms app in the same solution, having the same root namespace.

For adding new designable items, every time which you want to add new item, you need to add it to classic project, then move the 3 generated files (.cs, .designer.cs, .resx) to the CORE app, then adding them as link to the classic app.

For editing, since they are available as a link in classic app, edit them in the designer of classic app. All changes are visible to CORE app.

Prepare solution to use Windows Forms Designer for .NET Core Winforms App

1. Create a Windows Forms .NET Core App. (See the steps and requirements.)
2. Open the project in Visual Studio and save the the project including solution.
3. Right click on Solution and Add New Project → From templates, select Windows Forms project, and name it the same name as Core app + ".Designer" and click OK.
4. In properties of the Classic framework project, set default namespace to same default namespace of Core app.
5. Erase all exising files in both projects and save changes.

Adding a Form or UserControl

Every time which you want to add a new form or user control, you need to do the following steps:

1. In the classic framework project, Add New Item
2. Select Windows Form or User Control
3. Do some changes in desginer, like resizing the form, so resx file will be generated and Save.
4. In solution explorer, right click on the form and choose Cut.
5. In core app, paste all the items.(form, designer, resx).
6. In the classic app, right click and choose Add Existing Item.
7. Browse open dialog to core app folder and choose those 3 added files and click dropdown near of add button and choose Add As Link
8. Compile the solution.
9. Renest the files in the classic app using Mad Kristensen's File Nesting Extension or by editing project file.

Now, whenever you need to use the Designer on one of the Core Form or UserControl files, simply open the linked files in the Classic Framework project with the Classic Windows Forms Designer.

WPF - VS 2019 (16.0.3 .NET CORE 3.0)

The GA version of the WPF .NET Core Designer has been released at the same time as .NET Core 3.0 and it comes with Visual Studio.

Reference:

WPF Designer is completely independent of the Windows Forms Designer. We released its GA version of the WPF .NET Core Designer at the same time as .NET Core 3.0 and it comes with Visual Studio. In Visual Studio version 16.3.0 we had an issue with the Enable XAML Designer property set to false by default. That means that when you click on .xaml files, the designer doesn’t open automatically. Upgrade to the latest Visual Studio version 16.3.1 where this issue is fixed. Another option to fix it is to go to Tools -> Options -> XAML Designer and check Enable XAML Designer.

Iridaceous

@BravoYeung When you create a form like Form1, it has a From1.cs, Form1.designer.cs and Form1.resx. The first one contains the code for constructor and the event handlers and all your custom code, the second one (designer) contains InitializeComponent method and controls declaration and other designer related stuff, and the third one for resources of the form. The designer and resource file are nested under the main cs file in the solution explorer by default. But after following above steps solution explorer will show them as not nested. The 9th step is for nesting them again. – Iridaceous

It needs an update to include the 16.5.2 version. – Elmira

@Elmira I'm unaware of a major change in 16.5.2 which changes the way that you enable the designer in Windows Forms. The latest announcement that I know is this one. – Iridaceous

Answer 2

For the WinForms project you can refer to this video

How to fix WinForms Designer not support .net core 3.0 visual studio 2019

Since this video give more details we need, we can be followed step by step. It is also based on Microsoft official github project dotnet/winforms

dotnet/winforms - Using the Classic WinForms Designer in WinForms Core

The related code (VS project) made by me is already pushed to github:

.netCore-WinForms_Designer

For the WPF project you can use XAML Designer as below:

Workaround to use the designer in WPF Core App

Reference:

dotnet/samples - WPF Hello World sample with linked files

Install vs 2019 Professional/Enterprise version

Firstly, you need to Install vs 2019 Professional/Enterprise version. Then installing .net core 3.0 SDK is needed. Now you can try to create a .net core WPF application,

After setting the relevant project name and storage path, it will pop up:

Check "Use preview SDK" under .NET core in VS options

After setting done, restart vs to take effect.

Use VS build-in template, create WPF Project named "CoreHiWPF" of .net core

Under the created solution, use VS build-in template to create new WPF project "HiWPF" of .net framework type

Now the file structure of the solution is below:

Update Assembly Name of .net core WPF "CoreHiWPF", make Assembly Names of two projects are the same

Right click the project CoreHiWPF, select Properties, then change its Assembly Name to HiWPF.

Then right click the project, click "Edit CoreHiWPF.csproj".

Add code as below:

  <ItemGroup>
    <ApplicationDefinition Include="..\HiWPF\App.xaml" Link="App.xaml">
      <Generator>MSBuild:Compile</Generator>
    </ApplicationDefinition>
    <Compile Include="..\HiWPF\App.xaml.cs" Link="App.xaml.cs" />
  </ItemGroup>

  <ItemGroup>
    <Page Include="..\HiWPF\MainWindow.xaml" Link="MainWindow.xaml">
      <Generator>MSBuild:Compile</Generator>
    </Page>
    <Compile Include="..\HiWPF\MainWindow.xaml.cs" Link="MainWindow.xaml.cs" />
  </ItemGroup>

Ensure .net core WPF project CoreHiWPF is set as start up project

If the .net core WPF project CoreHiWPF is already highlighted, you can ignore then. Or, you need to select project CoreHiWPF, then right click Set As Start up project.

Try XAML Designer

Now close all opened files. Click the file MainWindow.xaml of project HiWPF. Then you can see empty WPF window in XAML designer now.

Modify the file MainWindow.xaml and related .cs if needed

Then, I add two lines to Grid of the file MainWindow.xaml: - One line is a Label which support Wrap - The other line is a Exit button.

Then I added the Click event to Exit button, added the Loaded event to Window.

After finish updating code, press F5 to run, the final UI is below:

The code is also already pushed to github:

.netCore-WPF_Designer .

You can clone it directly to have a look.

Litton

Answer 3

If you want to see a preview of your WPF XAML with Visual Studio 2019 just try out this extension https://marketplace.visualstudio.com/items?itemName=GiessweinApps.FAMLDesigner.

It supports .NET Core and .NET Framework:

Licentious

Answer 4

Just found that the instruction to open the file with the WinForms designer is present in the file .csproj.user.

<ItemGroup>
    <Compile Update="Form1.cs">
        <SubType>Form</SubType>
    </Compile>
</ItemGroup>

So, if like me, you have .gitignored this file and have done a git clean, you can't open the file with the Designer anymore.

Mackenie

This happened to my .vbproj file. The <Subtype>Form</SubType> all got removed. I added a new Form1.vb and saved and opened and closed the project a few times and they finally magically returned. – Vivyan

Answer 5

I removed the project files and recreated the project to make it work for me. New -> Project From Existing Code...

Roguery

Same for me. The designer stopped working after the first time and I could not load it again. So I just copied the Form.cs and Form.Designer.cs to a new location, deleted the app, created a new one and used the existing code from the copied files – Drosophila

Answer 6

Although the official WPF GitHub Repository states that:

Note: The WPF visual designer is not yet available and will be part of a Visual Studio 2019 update.

There is this example video in which the visual designer is being used.

Hope it helps!

Iconostasis

The linked video is just using Visual Studio, not using Visual Form Designer for xaml files. – Iridaceous

Answer 7

Microsoft Visual Studio Professional 2019 Version 16.7.2 Works out of the box.

Coolant

Answer 8

If the Forms designer is missing. Try adding another Windows Form to your project. Once I did this, the Designer for my other Windows Form appeared.

If you are using Visual Studio 2019, make sure to get the latest update which includes the Windows Form Designer. Some of the earlier version do not include it.

Mcdougald