Eto.Forms.Dialog with background image

Hi,

maybe this will be helpful for others. I wanted a little About dialog cross platform for the Grasshopper implementation we did. SO how about a background image, that matches the grasshopper about box.

using Eto.Drawing;
using Eto.Forms;
using AntFarmGH.Properties;

namespace AntFarmGH.UI
{
    internal class AboutDialog : Dialog
    {
        int dialogWidth = 500;
        int dialogHeight = 200;

        internal AboutDialog()
        {
            this.Height = dialogHeight;
            this.Width = dialogWidth;
            this.WindowStyle = WindowStyle.None;

            Drawable drawable = new Drawable();
            drawable.Paint += (sender, e) =>
            {
                System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(dialogWidth, dialogHeight);
                System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(bitmap);
                graphics.DrawImage(Resources.gh_antfarm, 0, 0, dialogWidth, dialogHeight);
                graphics.Dispose();
                System.Drawing.ImageConverter converter = new System.Drawing.ImageConverter();
                byte[] bb = (byte[])converter.ConvertTo(bitmap, typeof(byte[]));
                Image image = new Bitmap(bb);
                e.Graphics.DrawImage(image, 0, 0);
            };

            drawable.Content = new StackLayout
            {
                HorizontalContentAlignment = HorizontalAlignment.Stretch,
                VerticalContentAlignment = VerticalAlignment.Stretch,
                BackgroundColor = Colors.Transparent,
                Orientation = Orientation.Horizontal,
                Padding = new Padding(0),
                Spacing = 0,

                Items =
                {
                    new StackLayoutItem(new Label {Text = "Test" }),
                }
            };

            this.Content = drawable;
        }
    }
}

I had some trouble to get the png to show up as a background and also wanted to scale the Bitmap. You might want to put some more controls and content to the StackLayout.

image

Kindest
Christian

2 Likes

In addition: to get the Dialog to show up centered in the Grasshopper window, I used:

AboutDialog dialog = new AboutDialog
{
    ShowInTaskbar = false,
};
dialog.ShowModal(Grasshopper.Instances.EtoDocumentEditor);

Hopefully that is the right way to do it. It works for me.

Kindest
Christian

1 Like

Hello,

Does anyone have a example file of using AboutDialog.Logo in Python?

I’ve got all the text fields working well, but have hit a wall trying to add a logo/image.

Image 20220514001

Thanks

DK
220514_About Dialog.py (952 Bytes)

@kiteboardshaper use:

self.Logo = drawing.Bitmap("path\to\logo.png")

Works perfectly! Thank you so much @Gijs

Image 20220514002