Develop Reference

NET Core 3.1 WinForms Designer incompatibility with WPF User Control

Over a year ago I began writing a .NET Framework 4.6.1 app using Windows Forms. At the time I knew about WPF, yet was familiar with Windows Forms and it had most of the controls I needed. For the missing controls, I wrote two in Windows Forms and one in WPF. All of these coexisted fine, with the WPF control containerized within an element host.
This week I began the migration process to .NET Core 3.1. My tests with a copy of the project were positive, as well as initial results with the actual migration. After minor refactoring, the solution built and ran without issue. Then the gremlin appeared after opening the main UI form in the WinForms Designer. Back in .NET Framework, all of my custom controls appeared inside the Designer's Toolbox, providing easy drag-and-drop onto the form. In .NET Core, only my WinForms controls appeared in the Toolbox, not my WPF control. Because the Designer could not see that control, it stripped it from the Form's designer code, leaving an empty element host behind.
Here's the kicker. After reverting the Designer's changes, any direct manual edits to the Form's designer code is accepted, and building the project succeeds and runs fine. So for some reason the Designer does not like WPF controls in WinForms.
Things I've tried:
During my testing I discovered that the main WinForms UI needed both "UseWindowsForms" and "UseWPF" set to "true" for the project to compile. I then added the "UseWindowsForms" parameter to the WPF user control library. This caused the control to appear in the Designer's Toolbox, yet attempting to add the control resulted in this error: "Failed to create component ... Microsoft.DotNet.DesignTools.Client.DesignToolsServerException ... Make sure the type implements IComponent and provides an appropriate public constructor. Appropriate constructors either take no parameters or take a single IContainer parameter." And the existing WPF control in the code was still removed.
I copied the WPF control from the library to the main UI project, edited the namespace, and removed the library project reference. Same result as above.
Created a new Windows Forms User Control library, added "UseWPF" to the project, and copied the WPF control to this library. Same result as above.
Back to the test copy of my project, I followed Microsoft's guides for "try-convert" and "upgrade-assistant". The latter seemed promising at first, as it replaced, modified, or removed outdated referenced and packages. But, no success.
Tried the above migration steps with both .NET Core 3.1 and .NET 5. Same results.
The point I'm at now is to keep manually editing the Form's designer code. Not ideal for large changes, and also not sustainable if/when this project is passed to another developer. Any thoughts? Should I attempt porting the Windows Forms UI to WPF? Or is this simply a maturity issue with the still relatively new .NET Core Windows Forms Designer?
Visual Studio version: Community 2019 16.9.3
Screenshot of IComponent error:
enter image description here

I finally figured out a workaround; the idea was sparked by the Microsoft Docs page for the ElementHost control:
https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.integration.elementhost?view=netcore-3.1
In essence, move the WPF control hosting from the main UI into a WinForms control library. Hence, the User control in this WinForms control library will be a wrapper for the WPF control. Here are the steps I took in my test VS solution:
Remove the "true" entry from the main UI project file I had added during testing.
In the new WinForms control library, add "true" to this project file underneath the "true" entry. This enables the library to be a bridge between the two UI frameworks.
If the WPF control to host is in a dedicated control library (like mine), then add this project as a dependency in the WinForms control library.
Create a new User control in the WinForms library, if there isn't one already.
In the Designer, add a panel container to the control with "Fill" docking. I named my panel as "panelWpf".
Here is where the Microsoft Doc comes in. In the code behind file for the WinForms control, I first added an ElementHost control and the WPF control as private global variables. Then, in the WinForms "Load" event, I set the ElementHost docking style, added the WPF as a child, and finally added ElementHost as a control to the "panelWpf" container. Below is the code from this file. "WpfControlLibrary31" is my WPF control library project, and "TestControl31" is the WPF control itself. Lastly, "WpfTest" is the name of the wrapper WinForms User control.
After building the WinForms control library, it appeared in the main UI project's Toolbox, and I was able to add it to the form like any other Windows Forms control. The next steps will be to add event handlers, getters, setters, etc. to the control for the needed interaction.
using System;
using System.Windows.Forms;
using System.Windows.Forms.Integration;
namespace WinFormsLibrary
{
public partial class WpfTest : UserControl
{
// ElementHost for the WPF control
private ElementHost host = new ElementHost();
// WPF control to be hosted
private WpfControlLibrary31.TestControl31 uc = new WpfControlLibrary31.TestControl31();
public WpfTest()
{
InitializeComponent();
}
private void WpfTest_Load(object sender, EventArgs e)
{
// set the docking style for the ElementHost
host.Dock = DockStyle.Fill;
// add the WPF control as a child of ElementHost
host.Child = uc;
// add the ElementHost as a control of the panel container
panelWpf.Controls.Add(host);
}
}
}
Thoughts:
Some may wonder why I used the panel container. And in this simple experiment it was overkill; I could have simply docked the ElementHost to the control itself. However, if the WinForms User control has a more complex design, then the panel will be a placeholder while still allowing use of the Designer. Also, if a border or similar design is needed around the WPF control, then this should be possible with the panel.
Having the ElementHost and WPF control object as global allows access from all the control's methods, obviously, just like any controls added in the Designer itself.
The WPF control to host does not need to be in a dedicated WPF control library project. If it is a pre-existing WPF control (e.g. MediaElement), then use it for the global WPF object.
This WinForms control library is what I have been needing to consolidate and improve efficiency of my custom controls. So this issue with the .NET Core WinForms Designer turned out to be a blessing in disguise.
What are your thoughts? Thanks for the brainstorming help!

How to use Xamarin.Form Controls and Native Controls On the same page

I want to use Xamarin.Form Control inside my Native Android Page Controls. In my Android native page is there any way to load a Xamarin.Form Page inside my Native Android Fragment or LinearLayout?
According to Xamarin it's possible. But I cannot find how to achieve this.

There's a few things being discussed, so bear with me:
The image snippet, from what I understand:
"Not only are Xamarin.Forms pages mixable with custom screens" ...
This is like what #Stephane is mentioning allowing an application to use native screens as well as Xamarin.Forms screens. Each platform stub-page can introduce a shared Xamarin.Forms page at any point in the application. You don't have to use the Xamarin.Forms Navigation Stack.
"but you can embed custom views built directly against Xamarin.IOS and Xamarin.Android into Xamarin.Forms pages."
This is what #Sten is mentioning, where if you create platform specific ContentRenderers you can render any kind of native controls into an existing Xamarin.Forms page, by passing this common View to each platform renderer.
So, for instance if you had a View:-
public class MyView : ContentView
{
// Create some bindable properties here that can be used in your platform specific renderer,
// i.e. DisplayText etc.
}
You can use the above in a Xamarin.Forms page definition and then create platform specific renderers that would be called to render the content.
It is from within these platform specific content renderer classes that you can use native controls on each platform.
For instance in the ContentRenderer, for the event OnElementChanged you could do something like the following for WindowsPhone:-
protected override void OnElementChanged(Xamarin.Forms.Platform.WinPhone.ElementChangedEventArgs<MyView> e)
{
base.onElementChanged(e);
...
System.Windows.Controls.TextBox objPlatformSpecificTextBox = new System.Windows.Controls.TextBox();
...
...
However, what #Gulshan is really wanting I believe is to have a native page that is center-stage with the Xamarin.Forms content being rendered into a specific point in an already existing native page.
Its kinda-reversed, in thinking, however this is still possible:-
To achieve this you need to stimulate page-generation into a temporary new page.
For instance in WindowsPhone you would do this via:-
PhoneApplicationPage objInnerPage_Temp = new PhoneApplicationPage();
UIElement objInnerContent = App.GetMainPage().ConvertPageToUIElement(objInnerPage_Temp);
on the platform specific stub-page.
You can then inject the rendered contents into a native container that is appropriate on the platform, i.e. a Grid.
Update 1:-
==========
Although its very easy to do this on WindowsPhone it doesn't seem that this is possible when attempting something similar in Android unfortunately.
The Android page creation is very locked down, i.e. you can't gain access to the private fields for canvas and/or layout that it internally uses in AndroidActivity.
If this was possible then you could re-use this and take the contents rendered and inject similar to the solution for the WindowsPhone platform.
Furthermore, the Platform class is flagged as internal also, preventing another way to generate the rendered contents.
There was hope I was thinking from approaching this from a Fragment implementation of generating an Activity into it, and this could well work - However - the issue here is that the implementation in Xamarin.Forms is expecting the ActionBar to be available of which it is not, and they aren't checking for a if null scenario to allow execution to continue if it is not available so it throws an exception preventing page content generation.
It doesn't therefore look possible?, unless they open up the layout / canvas fields in AndroidActivity or address the ActionBar expectation issue.

As already discussed it is fairly simple on iOS (with .CreateViewController()) and WP (.ConvertPageToUIElement()).
But on Android all is not lost too: you can use .GetView() extension method from http://www.arturdr.ru/android/xamarin-forms-i-slozhnosti-integratsii-v-android-prilozheniya/
Here is an example on how to wrap Xamarin.Forms page in Android AlertDialog using that method:
https://github.com/OlexaLe/XFPageAsAndroidDialog

You are probably looking for a custom renderer.
In your Forms project create a class MyView that inherits from View (or some other suitable class, say ContentView if you'll have child views etc)
In your Android project create a renderer class MyViewRenderer that inherits ViewRenderer
Add the attribute to that class that indicates it's a renderer before the namespace declaration
[assembly: ExportRenderer (typeof(MyView), typeof(MyViewRenderer))]
In MyViewRenderer override OnElementChanged, call base.SetNativeView(ctl) where ctl is an instance of your native control
Take a look at Xamarin's guide
Another resource in Xamarin's Forums.
After looking at the issue and implementing my own Border I'd say VisualElementRenderer<TElement> is a better renderer to use. If you use that all you'd need to do is override OnElementChanged and do NativeView.Add(customUIView) and copy properties from the MyView instance. To handle dynamic changes in these properties override OnElementPropertyChanged and update the customUIView instance

Xamarin revised its website, so the image above is outdated. As the Xamarin.Forms library has evolved, it appears that it became tougher to mix Xamarin.Forms and platform-specific native views. I would not recommend doing this.
Advanced users can certainly attempt this, but my conversations with other developers suggest that this creates a lot of extra work and overhead. The best path forward is to either use Xamarin.Forms exclusively for your views, or use platform-specific native views.
Here's a screenshot from Xamarin's Xamarin.Forms page (shot taken on May 13, 2015):

You can create a new Activity that is backed by Xamarin.Forms by inheriting from Xamarin.Forms.Platform.Android.AndroidActivity and launch this new activity from another one in your Xamarin.Android application.

bogus component being added to WinForm

Many times when I edit a WinForm in my (inherited*) project an instance of a particular component is added -- and I'm not intentionally doing anything to add it. What could trigger the form designer to always think that a component needs to be added?
inherited project: meaning that I didn't design/implement most of it. There may be components or tools in use that I am not aware of. It does use DotNetBar; but the component being auto-added is not from this library.

C# WindowsForms UserControl's Controls Designer Support

What I am looking for is the same type of designer support for controls inside a usercontrol. ie - resizing a textbox, moving a label, that are inside a usercontrol after placeing the usercontrol on to a form.
What I've been able to do...
create a usercontrol
use the designer to add controls to the it
create a new window forms app
add the usercontrol to the toolbox
drag and drop the control on the a form
where I am stuck...
edit the usercontrols controls. IE - being able to resize a textbox that is inside the usercontrol using the designer.
I found a similar question on stack that was never answered. So if I am being too vague you can follow this link https://stackoverflow.com/questions/10359772/example-make-constituent-controls-in-a-usercontrol-editable.
Thank you.

After reading Nikita's comment I was able to find Microsoft support page on creating a custom designer for controls.
Here's a quote if your interested on how the designed-time support works
The design-time support for components in the .NET Framework, however, is not defined exclusively by a design tool such as Microsoft Visual Studio .NET. Rather, the development environment supports the extension and definition of design-time behavior by classes such as designers that provide design-time support for components. Support for extensible and customizable design mode behavior is an integrated part of the .NET Framework. Tools such as Visual Studio .NET also provide a range of design-time services that designers can use.
This is the webpage if you like to continue reading and view samples from Microsoft
Enhancing Design-Time Support
Everything seems complicated when you just start learning it, heres a working code sample for a UserControl that has a PictureBox and a Label on it. Both controls can be edited during design time, ie. resizing and repositioning, and expose all their events and properties if you click on them.
You will need to add a reference to System.Design, which can only be referenced if you are not targeting ".Net Client Profile." You can change you target profile in Proprieties/Application/TargetFramework.
Add a usercontrol to your project and add a class to handle it's designer. Double click the usercontrol and then add a label and picture box from the toolbar.
Next open that class you create to be it's designer. Add this...
using System.Windows.Forms;
using System.Windows.Forms.Design;
public override void Initialize(IComponent component)
{
base.Initialize(component);
if (this.Control is MyUserControl) // replace this with your usercontrol type
{
// cast this.Control to you type of usercontrol to get at it's
// controls easier
var i = this.Control as MyUserControl; // replace ***
this.EnableDesignMode(i.label1, "unique_name1");
this.EnableDesignMode(i.pictureBox1, "unique_name2");
}
}

Extending UI Component Class in C#/VS2010

I've only just started using C#/VS this past week and wondered how to do something which, I think, should be quite simple:
What I want to do is extend the class used by a UI component and therefore implement my own methods in it - just for one instance of a UI component though. If I was using xcode/objective c I would normally just change the class name of the component in interface builder and it would become an instance of that class which would in turn extend the original UI class.
How do I do something comparable using C#/Visual Studio?

You can take any component class in Windows Forms and subclass it. Visual controls all derive from the Control class and you can do so as well.
If your component is a User Control (i.e., it derives from System.Windows.Forms.UserControl), it should automatically appear in the Toolbox after you build the project. For other components, you can add them to the Toolbox by right-clicking on the Toolbox and select Customize Toolbox, selecting the .NET Framework Components tab, clicking the Browse button, and selecting the DLL with the control.

Remember that all (or most) UI components are classes, so they can be "extended" just like any other class.
Some will have virtual members you can override to take special actions. In all cases, you can add properties, methods, and events to the components.
Once you've created and built them, you can use them from the Toolbox, just as though they were the "built-in" .NET components.