Eto.Formsでリストボックス(XAML使用)
前回のListBoxサンプルを、今度はXAMLで書いてみます。
結果(プログラムの見た目)は前回と同じです。
では、PCL/XAMLでプロジェクトを作り、まずはXAMLを書いてみます。
XAML
Eto.Formsのテンプレートを少し変更するだけです。
ListBoxとTextBoxは、コードビハインドで使う都合上、ID
プロパティを設定しています。
ButtonはClick
のHandleAdd
メソッドがコードビハインドにあればいいので、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&ile"> </ButtonMenuItem> <MenuBar.QuitItem> <ButtonMenuItem Text="Quit" Click="HandleQuit" /> </MenuBar.QuitItem> </MenuBar> </Form.Menu> </Form>
コードビハインド
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に書いた要素が勝手にコードビハインド側で見えることはありません。
このために冒頭でagentList
とnewName
フィールドをおいています。
中身はXamlReader.Load(this)
で設定されるので、最初はnullにしておきます。
逆に言うと、XAMLを読み込む前に、これらGUI要素にアクセスした場合は、まだnullなので例外です。