Eto.Formsで展開型パネル(Expander)
ここまでで、Eto.Formsの主要なコントロールの多くは紹介してきたつもりです。 しかし、他にも紹介していない項目もあります。
今回は、公式APIにも載っていない(入れ忘れ?)コントロールであるExpander
を紹介します。
そもそも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あたりでしょうか。
実行してみる
まずは起動します。
初期状態では、最上部のラベルと、閉じた状態のExpanderが見えます。 Headerに設定したTextAreaも表示されています。
この状態で、Expanderのボタンをクリックすると、中身があらわれます。
「Youe Name」のところに適当な名前を入れてOKボタンを押すと、ラベルのメッセージが変わります。
もちろん、Linuxでも同様に動作します。