# How to create a line divider using Eto.Forms?

**URL:** <https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885>\
**Category:** Rhino Developer\
**Tags:** rhinocommon, eto, styles\
**Created:** [January 25, 2019, 11:48pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885 "2019-01-25T23:48:22Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![eebs99](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/eebs99/32/309679_2.png) [@eebs99](https://discourse.mcneel.com/u/eebs99)\
**Post date:** [January 25, 2019, 11:48pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/1 "2019-01-25T23:48:22Z")

</div>

I’m just getting introduced to Eto.Forms, and as a crash course I am trying to make a window similar to the one that appears during the “Loft” command.

![Capture2](https://global.discourse-cdn.com/mcneel/original/3X/9/b/9ba9540c17ca6a31e3f199df1f03c52fee5b6e95.png)

I’m actually really confused on how this is set up. Here are my questions, in order of importance to what I can’t figure out on my own:

1. How do I create line dividers, like what’s after “Style” and “Cross-section curve options”?

2. As far as I know, the easiest way to organize stuff in a window is by using a TableLayout using rows and columns. Is this what is happening here? If so, it seems like the second part has 3 columns (the bullet, the text box, and the text after it), while the first part only has 1 - but it seems to take up the same amount of space as the 3 columns below it, and as far as what I learned I don’t know how to do that. If not, how is this organized so I can mimic it?

3. Every time I click on the Rhino window outside of the Eto window, the Eto window disappears behind the Rhino window and the only way to make it appear again is by minimizing the Rhino window. If I don’t minimize the Rhino window, even if I click on the Eto window on the Windows taskbar it will automatically jump behind the Rhino window. How do I stop this from happening?

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![AlW](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/alw/32/53821_2.png) [@AlW](https://discourse.mcneel.com/u/AlW)\
**Post date:** [January 26, 2019, 5:01pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/2 "2019-01-26T17:01:51Z")

</div>

I’m not at all familiar with Eto, so can’t answer your questions, but I thought I would remind you that Rhino has been around since the 1990’s and much, if not all, of it was developed using the Windows SDK of various vintages and then updated. Later some stuff was implemented using .Net API’s. My point is that Eto may not be capable of implementing everything you see in Rhino exactly as you see it.

I’ll leave it to the Rhino and Eto experts here to expand on this and answer your specific questions.

---

<div class="post-metadata">

**Author:** ![eebs99](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/eebs99/32/309679_2.png) [@eebs99](https://discourse.mcneel.com/u/eebs99)\
**Post date:** [January 26, 2019, 5:23pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/3 "2019-01-26T17:23:08Z")

</div>

Thank you for the reminder, it didn’t even cross my mind that Eto might not even be a part of the Loft command at all. I don’t think Eto was around since the1990s so I’ll just have to cross my fingers and hope a solution exists!

---

<div class="post-metadata">

**Author:** ![Will\_Wang](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/will_wang/32/513624_2.png) [@Will\_Wang](https://discourse.mcneel.com/u/Will_Wang)\
**Post date:** [January 28, 2019, 6:35pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/4 "2019-01-28T18:35:26Z")

</div>

as far as I know…

1. The closest to that is probably a `GroupBox`. I’m not aware of a pure divider you seek in Eto

2. Check out `StackLayout`. Or in `TableLayout` you can probably change column and row sizes. Some controls also have an attribute boolean that tells it to whether fill the entire container space or not.

3. See [this](http://api.etoforms.picoe.ca/html/P_Eto_Forms_Window_Topmost.htm) attribute of `Window`

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [January 28, 2019, 6:42pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/5 "2019-01-28T18:42:24Z")

</div>

> [@eebs99](#):
>
> How do I create line dividers, like what’s after “Style” and “Cross-section curve options”?

Here is how Rhino does it:

```auto
  /// <summary> label with a line separator </summary>
  class LabelSeparator : Panel
  {
    readonly Label m_label;
    readonly Divider m_divider;
    public string Text
    {
      get { return m_label.Text; }
      set { m_label.Text = value; }
    }

    public Color Color
    {
      get { return m_divider.Color; }
      set { m_divider.Color = value; }
    }
    public LabelSeparator()
    {
      m_label = new Label();
      m_divider = new Divider();
      if (Rhino.Runtime.HostUtils.RunningOnOSX)
        m_divider.Color = Colors.DarkGray;
      Content = new StackLayout
      {
        Orientation = Orientation.Horizontal,
        VerticalContentAlignment = VerticalAlignment.Stretch,
        Spacing = 2,
        Items =
        {
          m_label,
          new StackLayoutItem(m_divider, true)
        }
      };
    }
  }

```

– Dale

---

<div class="post-metadata">

**Author:** ![Will\_Wang](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/will_wang/32/513624_2.png) [@Will\_Wang](https://discourse.mcneel.com/u/Will_Wang)\
**Post date:** [January 29, 2019, 7:36pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/6 "2019-01-29T19:36:24Z")

</div>

I can’t find `Divider` class on Eto API docs

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [January 29, 2019, 9:28pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/7 "2019-01-29T21:28:51Z")

</div>

Hi @Will_Wang

Use `Rhino.UI.Controls.Divider`.

Also, I’ve added the above code as a new `Rhino.UI.Controls.LabelSeparator` class that will appear in a future SR of Rhino.

– Dale

---

<div class="post-metadata">

**Author:** ![eebs99](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/eebs99/32/309679_2.png) [@eebs99](https://discourse.mcneel.com/u/eebs99)\
**Post date:** [February 4, 2019, 11:52pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/8 "2019-02-04T23:52:10Z")

</div>

Hello @dale,

Will this work in Rhino 5? I’m trying to make a plugin compatible with both Rhino 5 and Rhino 6, but Visual Studio says that “Rhino.UI.Controls” doesn’t exist.

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [February 4, 2019, 11:56pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/9 "2019-02-04T23:56:46Z")

</div>

> [@eebs99](#):
>
> Will this work in Rhino 5?

Well, no, Eto is not included with Rhino 5 (for Windows).

– Dale

---

<div class="post-metadata">

**Author:** ![eebs99](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/eebs99/32/309679_2.png) [@eebs99](https://discourse.mcneel.com/u/eebs99)\
**Post date:** [February 5, 2019, 12:30am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/10 "2019-02-05T00:30:30Z")

</div>

> [@dale](#):
>
> Well, no, Eto is not included with Rhino 5 (for Windows).

I embedded Eto into my Rhino 5 plugin, and as far as I know with my limited knowledge everything seems to be working fine. Will that be an obstacle in getting a Divider working?

 ![image](https://global.discourse-cdn.com/mcneel/uploads/default/original/3X/1/3/13f8909e9c631a20b2764441b1122c200f85a879.png)

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [February 5, 2019, 12:40am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/11 "2019-02-05T00:40:04Z")

</div>

> [@eebs99](#):
>
> Will that be an obstacle in getting a Divider working?

Well, the `Divider` class mentioned above is not included with Rhino 5. It’s embedded in Rhino 6.

– Dale

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [February 5, 2019, 1:02am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/12 "2019-02-05T01:02:51Z")

</div>

Hi @eebs99,

This class should get you close. You’ll need to figure out the correct color.

```cs
public class MyDivider : Eto.Forms.Drawable
{
  private Eto.Drawing.Color m_color;

  public Eto.Drawing.Color Color
  {
    get { return m_color; }
    set
    {
      if (m_color == value)
        return;
      m_color = value;
      Invalidate();
    }
  }

  public Eto.Forms.Orientation Orientation => Width < Height 
    ? Eto.Forms.Orientation.Vertical 
    : Eto.Forms.Orientation.Horizontal;

  public MyDivider()
  {
    m_color = Eto.Drawing.Colors.LightGrey;
    Size = new Eto.Drawing.Size(3, 3);
  }

  protected override void OnSizeChanged(System.EventArgs e)
  {
    base.OnSizeChanged(e);
    Invalidate();
  }

  protected override void OnLoadComplete(System.EventArgs e)
  {
    base.OnLoadComplete(e);
    Invalidate();
  }

  protected override void OnPaint(Eto.Forms.PaintEventArgs e)
  {
    base.OnPaint(e);
    var middle = new Eto.Drawing.PointF(Size / 2);
    e.Graphics.FillRectangle(
      Color,
      Orientation == Eto.Forms.Orientation.Horizontal
        ? new Eto.Drawing.RectangleF(0f, middle.Y, ClientSize.Width, 1)
        : new Eto.Drawing.RectangleF(middle.Y, 0f, 1, ClientSize.Height));
  }
}

```

– Dale

---

<div class="post-metadata">

**Author:** ![eebs99](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/eebs99/32/309679_2.png) [@eebs99](https://discourse.mcneel.com/u/eebs99)\
**Post date:** [February 7, 2019, 1:10am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/13 "2019-02-07T01:10:23Z")

</div>

Hello @dale,

Thank you for this code snippet, it’s been really helpful with my understanding! I have a few questions about how this works:

1. In the **OnPaint** method, why do you use _middle_ for the height positioning of the divider? It isn’t exactly in the middle, as _3 / 2_ equals _1_ not _1.5_, yet if you replace it with _1.5_ the divider looks like the color is lighter. In fact, the more the number approaches _3_, the divider fades and goes away. Why does this happen?

2. I looked into _StackLayout_, and I want to learn how to use that., However, the Eto docs are not very informative in this regard, and unfortunately _MyDivider_ does not work well with _StackLayouts_. What I’m wanting is that the divider will extend to the width of the window, but when I use a _StackLayout_ (I used _TableLayout_ in the example above) the divider only works if it’s by itself and if nothing else is with it on the same row (there should be a divider after the white box), and it only extends 3 pixels I think.

Thanks for your help with these problems! I’ve been making a lot of progress.

---

<div class="post-metadata">

**Author:** ![dale](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/dale/32/685184_2.png) [@dale](https://discourse.mcneel.com/u/dale)\
**Post date:** [February 8, 2019, 1:09am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/14 "2019-02-08T01:09:20Z")

</div>

Hi @eebs99,

The `Size` parameter passed to `OnPaint` is the size of the drawable, not the size of the rectangle to be drawn. If you’re curious, put a breakpoint in the method and look at the size.

Also, a `StackLayout` is designed to have horizontal or vertical list of controls, which is how a lot of simple dialog boxes have their controls organized. It isn’t the best layout in many cases, I tend to use a `TableLayout` frequently. I’ve attached a `StackLayout` sample, which uses the divider code from above, for you to review.

[TestIbrahim.cs](https://global.discourse-cdn.com/mcneel/uploads/default/original/3X/9/f/9f8340163bdb7925b8d5cfecb5f36b0611344a78.cs) (4.6 KB)

– Dale

---

<div class="post-metadata">

**Author:** ![slyon](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/slyon/32/760400_2.png) [@slyon](https://discourse.mcneel.com/u/slyon)\
**Post date:** [February 23, 2021, 1:50am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/15 "2021-02-23T01:50:05Z")

</div>

Dale+:

I know that this is an old post but I just wanted to just let you and the other guys know how helpful this was to me over the last couple of days!!

The only thing I really changed was the line color. If anyone would like to see the finished code just let me know although these are great examples.

Thanks guys!

Steve

---

<div class="post-metadata">

**Author:** ![cestes001](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/cestes001/32/759494_2.png) [@cestes001](https://discourse.mcneel.com/u/cestes001)\
**Post date:** [February 14, 2023, 12:55am UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/16 "2023-02-14T00:55:33Z")

</div>

Slyon, I’d love to see a working example of how to create and display a form using Eto.forms.

---

<div class="post-metadata">

**Author:** ![sonderskovmathias](https://sea3.discourse-cdn.com/mcneel/user_avatar/discourse.mcneel.com/sonderskovmathias/32/478545_2.png) [@sonderskovmathias](https://discourse.mcneel.com/u/sonderskovmathias)\
**Post date:** [July 24, 2023, 2:58pm UTC](https://discourse.mcneel.com/t/how-to-create-a-line-divider-using-eto-forms/77885/17 "2023-07-24T14:58:11Z")

</div>

There’s an example in the rhino sdk.

CsSampleEtoCoffee it’s called.