Eto.Forms Styling

Hi All,

Is there documentation/tutorials somewhere that would show me how to go from the standard Eto.Forms to something like the attached image? Credits to @agi.andre


Hi Jordan
This is all done with the WebView Class:
It allows you to style the form with HTML, CSS.

The you can invoke python functions through javascript

1 Like

Very cool! Thanks for answering. I’ll look to it. This should be fun. I’m more familiar with JS, html and css than c# so that’s a relief.


Hi @agi.andre,

This is a beautiful styling for a custom interface: congratulations!
What would be the best approach to implement an interface based on WebView for Rhino and Grasshopper plugins?

Is there any tutorial that we can follow or a template available that we can study?


You would need to embed a WebView in your panel:

string html =  "<head><meta http-equiv='X-UA-Compatible' content='IE=edge' /><title>Rhino UI</title></head>
<body><p>Runoff limit<input type='range' min='0' max='100' value='50' class='slider' id='runoffLimit'></p></body>";

        WebView webView = new WebView { Height = 1000 };

        public GreenScenarioPanel()

            var layout = new DynamicLayout { DefaultSpacing = new Size(5, 5), Padding = new Padding(0) };

            webView.DocumentLoading += (sender, e) =>
                if (e.Uri.Scheme == "greenscenario") //search for markers in html
                    e.Cancel = true; // prevent navigation

            Content = layout;

In your html add some javascript listeners to tell Rhino, that certain fields were updated by user input:

document.getElementById(‘runoffLimit’).onchange = function() {window.location = ‘greenscenario:runofflimit’;};

In the C# part create a method returning data from the html-based UI to Rhino. In my case:

    private void CommunicateWithWebView(string path)
        switch (path)
            case "runofflimit":
                string text = webView.ExecuteScript("return document.getElementById('runoffLimit').value;");
                Rhino.RhinoApp.WriteLine($"Runoff limit: {text}");

Here is a quick demo of how it looks like in action: