How add MenuBar to Eto.Panel

Hi everyone,

I want to create MenuBar object for my plugin on the Panel.

    private void InitializeComponent()
    {
        tabControl = new TabControl()
		{
			TabPosition = DockPosition.Top,
		};

        menuBar = new MenuBar()
        {
            // some definitions
        }
    }

    private void InitializeLayout()
    {
		TableLayout tableLayout = new TableLayout()
		{
			Rows =
			{
                menuBar,
                ///////////------ Can not define menuBar here ------ /////////
				tabControl,
			}
		};
		Content = tableLayout;
	}

1. Why I cannot define menuBar in TableLayout?
2. How I can add MenuBar into Eto.Panel ?

Capture

Thanks in advance
-OÄźuzhan

Menu is a property of a Window instance. Doesn’t look like you can assign it to a Panel or any layout class for that matter.
Some pseudo code:

var win = new Eto.Forms.Form()
win.Menu = new MenuBar(){...}
1 Like

Thanks for your answer,

Can we say that, it is not a good idea using panel plugins that will be packaged and licenced. Because it seems that I couldn’t add MenuBar for some options. What do you think?

Hey everyone,

Just to give a little background to the reasoning why you cannot use a menu bar in a panel or other container is because macOS does not support it. However, here are some alternatives you can experiment with:

  1. Show a ContextMenu when clicking on a Button
  2. Use the SegmentedButton with multiple MenuSegmentedItem items (this would get you closest to what you are looking for).

Hope this helps!

2 Likes

Hi @curtisw,

Thanks for clarify the topic, about structure I achieved what I want. I have extra question.

Why I cannot add MenuItemCollection on the ContextMenu ?
Its giving does not contain a constructor that takes 0 arguments error.

segmented

    MenuSegmentedItem fileSegmentedItem = new MenuSegmentedItem()
	{
		Text = "File",
		Menu = new ContextMenu()
		{
			Items =
			{
               ///////// ----- Cannot add here `MenuItemCollection` ----- //////// 
            },
		},
	};

	SegmentedButton segmentedButton = new SegmentedButton()
	{
		Items =
		{
			fileSegmentedItem,
			new MenuSegmentedItem()
			{
				Text = "Tools",
            },
			new MenuSegmentedItem()
			{
				Text = "Options",
			},
			new MenuSegmentedItem()
			{
				Text = "Help",
			},
		},
	};

Thanks,
-OÄźuzhan

@oguzhankoral, you need to use one of the MenuItem subclasses (MenuItem is abstract).

For example:

var fileSegmentedItem = new MenuSegmentedItem()
{
	Text = "File",
	Menu = new ContextMenu()
	{
		Items =
		{
			new ButtonMenuItem { Text = "Hello" }
		},
	},
};
1 Like

@curtisw, It’s totally worked! Thanks a lot :slight_smile:

Hi @curtisw,

It is turn the clock back but I realized something then wanted to ask to you. I was trying to create 2 nested sub menu. I did not achieve add MenuSegmentedItem into another MenuSegmentedItem object. How can I achieve this?

Best,

@oguzhankoral simply add a new ButtonMenuItem to the parent ButtonMenuItem.Items collection…

e.g.

      var fileSegmentedItem = new MenuSegmentedItem()
      {
        Text = "File",
        Menu = new ContextMenu()
        {
          Items =
          {
            new ButtonMenuItem
            {
              Text = "Hello",
              Items =
              {
                new ButtonMenuItem { Text = "A sub menu item"  },
                new ButtonMenuItem { Text = "A 2nd sub menu item"  }
              }
            }
          }
        }
      };

Hope this helps!

2 Likes

@curtisw Thanks again! It helped.

MenuSegmentedItem is not of Type Control. How do you get it into the panel? I am using a StackLayout that can only take controls and not widgets.

Thanks in advance
Christian

Got it.

SegmentedButton main = new SegmentedButton()
{
    Items =
    {
        new MenuSegmentedItem
        {
            Text = "Lala",
            Menu = new ContextMenu()
            {
                Items =
                {
                    new ButtonMenuItem
                    {
                        Text = "Lala New",
                        Command = this.ViewModel.NewCommand,
                    },
                    new ButtonMenuItem
                    {
                        Text = "Lala Delete",
                        Command = this.ViewModel.DeleteCommand,
                    }
                }
            }
        }
    }
};

Hello again,

I know the subject is closed, but is there by any chance a way of changing the style to the SegmentedButton. It does have a property BackgroundColor, but changing it to Color.Transparent doesn’t do anything. I also tried to make a custom style based on the platform, but no luck so far.

I would like to get rid of the border and set the backgroundcolor to transparent.

Any help is much appreciated.
Kindest
Christian

Hi Christian,

As far as I know transparent colors are not supported. @curtisw am I right?

Best,

So you mean - RGB yes, ARGB no?

:wink:
Christian

Even if you try ARGB, you will get RGB as far as I know I tried it before

I didn’t get any colour so far. Do you have by any chance a code example which I could use? As I said - borderthickness=0 and the colour I woud set to the background of the parent control.

Kindest
Christian

Can you please provide example image what do you want to exactly achieve?

Actually the same bar as in your upper image.

MenuBar

The code is the one I posted before.

Thanks for you help.
Christian

Eto does support ARGB background colours, however the SegmentedButton control hasn’t been set up to set the background colour of the buttons. I’ve logged that as RH-66952.

One thing that might work for you right now is Rhino has a special style for the SegmentedButton called “nofocusnoborder” which should get you close to what you want. To apply it use this:

var mySegmentedButton = new SegmentedButton();
mySegmentedButton.Style = "nofocusnoborder";

In v8 we may make this the default style, noted with RH-65559.

Note that this style only applies to windows, however it is more “normal” to have a NSSegmentedControl control on Mac so it fits in better.

Hope this helps!

2 Likes