Cross Platform WinForms (Kinda)

Astute observers will note that .NET Core has been out for quite some time now, with no “GUI” option of building applications. This seems rather deliberate, with Microsoft instead intending to focus on web applications instead of desktop apps. This is also coupled with the fact that to create a cross platform GUI library is easier said then done. Creating something that looks good on Windows, Mac and Linux is no easy feat.

And that’s where Eto.Forms jumps in. It’s a GUI library that uses the native toolkit of each OS/Platform through a simple C# API. Depending on where it is run, it will use WPF, MonoMac or GTK#. It isn’t necessarily using .NET Core (Infact it definitely isn’t, it uses Mono on non Windows platforms), but because one of the main reasons to switch to Core is it’s ability to be cross platform and work on non-windows OS, I thought I would have a little play with it.

In this first post, we will just be working out how to do a simple test application. In future posts, we will work out how to run platform specific code and how better to deploy our application that doesn’t involve a tonne of dependencies to be installed on the machine (For example bundling mono with your application). I’ve spent quite a bit tinkering with this and so far, definitely so good.

Setup Within Visual Studio

When using Visual Studio, we want to take advantage of code templates so that our “base” solution is created for us.

Inside Visual Studio, go to Tools -> Extensions and Updates. Hit “Online” on the left hand side, then type in “Eto.Forms” in your search box.

Go ahead and install the Eto.Forms Visual Studio Addin. It’s highly likely after install you will also need to restart Visual Studio to complete the installation.

When you are back in Visual Studio, go ahead and create a new project. You should now have a new option to create an “ETO Forms Project”.

After selecting this, you are going to be given a few options on the project. The first is that do you want all 3 platforms to be within a single application, or a separate application for each. For the purpose of this demo we are going to go ahead and do 3 separate projects. The only reason we do this is so that building becomes easier to “see” because you have a different bin folder for each platform. As a single project, everything gets built into the same bin folder so it just looks a bit overwhelming.

Next you are given options on how you want to define your layout. And here’s where you might tune out. If you are expecting some sort of WYSIWYG designer, it ain’t happening. You can define everything with C# code (Sort of like how Winforms would generate a tonne of code in the background for you), you can use XAML, or you can use JSON. Me personally, I’m a WinForm kinda guy so I prefer defining the forms in C# code. So I’m going to go ahead and use that in this example. I can definitely see in the future someone building a tool ontop that simply generates the underlying code, but for now, you’ll have to live with designing by hand.

Now we should be left with 4 projects. The first being our “base” project. This defines the forms and shared code no matter which platform we actually end up running on. The other 3 projects are for Linux, Mac and Windows respectively. As I said earlier, if we select the option to have a “single” project, we actually end up with two projects. One that contains shared code, and one that actually launches the thing (But builds for all 3 platforms).

In each of these .csproj files, you will find a line like :

Which basically tells it which platform to build for. And again, you can combine them within the same project to build for two different platforms within the single project.

Something that I was super surprised about is that there is no mac requirement to do a full build of the mac application. I wasn’t really up to date with how apps within MacOS are typically built, but I thought if they were anything like iOS you would need a mac just to deploy the thing. No such requirement here (Although I suspect you will have  one anyway if you actually intend to develop mac applications).

One big thing. When I actually did all of this, there was a whole host of issues actually getting the project to run. Weirdly enough, updating Visual Studio itself was enough to get everything up and running (You need to do this *before* you create the project). So ensure you are on the latest version of VS. 

So how does it actually look when run? Let’s put Windows and Linux side by side.

Definitely some interesting things right off the bat. Mostly that on Linux, we don’t really use Menu Bars, instead they are similar to a Mac where along the top of the window you have your “File” option etc. Also that the sizing is vastly different between the two, both in height and width! The main point is, we managed to build a GUI application sharing the exact same code, and have it run on Windows and Linux! Cool!

One final thing, you can use Visual Studio to add new forms/components instead of typing them up manually. In reality, it doesn’t really do that much boiler plate for you, but it’s there if you need it. Just right click your shared code project, and select Add New Item as you typically would. You should have a new option of adding an “Eto.Forms View”. From here you are given options on what you are trying to create (A panel, dialog or form), and how you want it to be designed (Code, XAML, Json etc).

Setup From A Terminal/Command Prompt

Alright, so you are one of “those” people that want to use a terminal/command prompt everywhere. Well that’s ok, Eto has you covered! In reality because there is no WYSIWYG designer, there isn’t any great need for Visual Studio if you prefer to use VS Code. Realistically the only difference is how you create the initial project template (Since Visual Studio extensions are going to be off the cards).

The first thing we are going to do is install the Eto.Forms templates. To do that, we run a specific dotnet command in our terminal/command prompt.

To see all available options to us, we can run :

But we are pros and know exactly what we want. So we run :

What this does is create a solution in the current directory (Named after the folder name). It creates a solution for us because of the -sln flag. The -m flag tells us which “mode” we want to use for designing our forms (In our case we want to use code). And finally -s says to create separate projects for each platform. And that’s it! We have a fully templated out project that is essentially identical to the one we created in Visual Studio.

One more thing, you should also be able to create “files” in a similar way to creating them in Visual Studio. So it does a bit of boiler plate legwork for you. To see all available options to you, you can run :

Again, it’s basically creating a class with the right inheritance and that’s about it. But it can be handy.

 

Leave a Reply

Your email address will not be published. Required fields are marked *