Eto.Formsで展開型パネル(Expander)

ここまでで、Eto.Formsの主要なコントロールの多くは紹介してきたつもりです。 しかし、他にも紹介していない項目もあります。

今回は、公式APIにも載っていない(入れ忘れ?)コントロールであるExpanderを紹介します。

f:id:mokake:20170214232805p:plain

そもそもExpanderについては、Eto.Forms 2.1のリリースノートに記載されているだけです。

public class Expander : Panel

ということで、要するに「開閉可能なパネル」です。

では、PCL/Code設定で簡単にサンプルを作ってみます。

using System;
using Eto.Forms;
using Eto.Drawing;

namespace EtoSample_Expander
{
    public class MainForm : Form
    {
        public MainForm()
        {
            Title = "My Eto Form";
            ClientSize = new Size(250, 250);

            var message = new Label { Text = "Welcome!" };

            var name = new TextBox {
                ShowBorder = true,
                PlaceholderText = "your name...",
            };
            var button = new Button { Text = "OK" };
            button.Click += (s, e) => message.Text = $"Welcome, {name.Text}!";

            var exp = new Expander {
                Header = new TextArea {
                    Text = "detail:",
                    ReadOnly = true,
                    Height = 50,
                },
                Content = new StackLayout {
                    Items =
                    {
                        "Name:",
                        name,
                        button,
                    },
                },
            };

            Content = new StackLayout
            {
                Padding = 10,
                Items = {
                    message,
                    exp,
                },
            };

            var quitCommand = new Command { MenuText = "Quit" };
            quitCommand.Executed += (s, e) => Application.Instance.Quit();

            Menu = new MenuBar
            {
                Items =
                {
                    new ButtonMenuItem { Text = "&File", Items = { } },
                },
                QuitItem = quitCommand,
            };
        }
    }
}

Expanderコントロール

Expanderの中身は、Controlプロパティに設定します。 StackLayoutなどをおけば、複数のコントロールを含むことも簡単です。 このサンプルでも、StackLayoutを使っています。

一方、Expander独自なのがHeaderプロパティ。 これは通常、開閉部分の上、開閉用ボタンの右側に配置されるコントロールです。 今回は、あえて高さのあるTextAreaコントロールをおいてみました。 こちらもStackLayoutなどを設定可能ですが、ユーザの混乱を招く可能性が高いので、今回のTextAreaも含めて、避けたほうがいいでしょう。 普通は素直にLabelあたりでしょうか。

実行してみる

まずは起動します。

f:id:mokake:20170214232654p:plain

初期状態では、最上部のラベルと、閉じた状態のExpanderが見えます。 Headerに設定したTextAreaも表示されています。

この状態で、Expanderのボタンをクリックすると、中身があらわれます。

f:id:mokake:20170214232805p:plain

「Youe Name」のところに適当な名前を入れてOKボタンを押すと、ラベルのメッセージが変わります。

f:id:mokake:20170214232938p:plain

もちろん、Linuxでも同様に動作します。

f:id:mokake:20170214233229p:plain

f:id:mokake:20170214233734p:plain

f:id:mokake:20170215001930p:plain