Eto.Formsでリストボックス(XAML使用)

前回のListBoxサンプルを、今度はXAMLで書いてみます。

結果(プログラムの見た目)は前回と同じです。

f:id:mokake:20170120233007p:plain

では、PCL/XAMLでプロジェクトを作り、まずはXAMLを書いてみます。

XAML

Eto.Formsのテンプレートを少し変更するだけです。

ListBoxとTextBoxは、コードビハインドで使う都合上、IDプロパティを設定しています。

ButtonはClickHandleAddメソッドがコードビハインドにあればいいので、IDは設定していません。 本来は設定した方がベターでしょう。

<?xml version="1.0" encoding="UTF-8"?>
<Form
    xmlns="http://schema.picoe.ca/eto.forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="My Eto Form"
    ClientSize="250, 250"
    >
    <StackLayout>
        <Label>Agents list</Label>
        <StackLayoutItem Expand="True" HorizontalAlignment="Stretch">
            <ListBox ID="agentList"></ListBox>
        </StackLayoutItem>
        <StackLayoutItem HorizontalAlignment="Stretch">
            <TextBox ID="newName"></TextBox>
        </StackLayoutItem>
        <Button Click="HandleAdd">Add</Button>
    </StackLayout>

    <Form.Menu>
        <MenuBar>
            <ButtonMenuItem Text="F&amp;ile">
            </ButtonMenuItem>
            <MenuBar.QuitItem>
                <ButtonMenuItem Text="Quit" Click="HandleQuit" />
            </MenuBar.QuitItem>
        </MenuBar>
    </Form.Menu>
</Form>

コードビハインド

GUI定義をXAMLに委ねた分だけ短くなっています。

using System;
using System.Collections.ObjectModel;
using Eto.Forms;
using Eto.Serialization.Xaml;

namespace EtoSample_listbox2
{
    public class MainForm : Form
    {
        ListBox agentList = null;
        TextBox newName = null;

        ObservableCollection<MyModel> ModelData = new ObservableCollection<MyModel>
        {
            new MyModel { Name = "John Smith", Age = 38, },
            new MyModel { Name = "Betty Doe", Age = 33, },
            new MyModel { Name = "Bernard White", Age = 36, },
        };

        public MainForm()
        {
            XamlReader.Load(this);
            agentList.DataStore = ModelData;
            agentList.ItemTextBinding = Binding.Property((MyModel m) => m.Name);
        }

        protected void HandleAdd(object sender, EventArgs e)
        {
            ModelData.Add(new MyModel { Name = newName?.Text, Age = 17 });
        }

        protected void HandleQuit(object sender, EventArgs e)
        {
            Application.Instance.Quit();
        }
    }
}

XAML中の要素をコードビハインドで参照

XAMLの要素にID(またはx:Name)プロパティを設定しておくと、コードビハインドにある同型・同名の要素と結び付けられます。

WPFのように、XAMLに書いた要素が勝手にコードビハインド側で見えることはありません。

このために冒頭でagentListnewNameフィールドをおいています。 中身はXamlReader.Load(this)で設定されるので、最初はnullにしておきます。 逆に言うと、XAMLを読み込む前に、これらGUI要素にアクセスした場合は、まだnullなので例外です。