最近、マグカップサイズのパキラを買いました！
観葉植物に癒される日々、最高です。どうも僕です。
今回はXamarinのデータバインドにチャレンジ！！
やりたい事
「画面に入力した文字をボタンを押下する事で、画面に出力する。」
しょぼいアプリですが、とりあえずデータバインドさせたいだけなので。。( ＾∀＾)
①【xaml】画面入力
|
1 |
Entry Text="" x:Name="entry" |
- 入力されたテキストデータに「entry」という名前を付ける。
②【xaml】ボタン
|
1 |
Clicked="Button_Clicked" |
- 「Button_Clicked」メソッドを実行する。
③【xaml】画面出力
|
1 |
Label Text="{Binding name}" |
- nameという名前でバインディングされている値をラベルに出力する。
MainPage.xamlコード【XAML】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<StackLayout Orientation="Vertical"> <!-- テキストに入力した値をentryとい名前で保存 --> <Entry Text="" x:Name="entry" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="200" /> <!-- entryに保存されている値をnameに代入する --> <Button Text="追加" Clicked="Button_Clicked"/> <!-- nameに代入されている値を表示する--> <Label Text="{Binding name}" WidthRequest="200" VerticalOptions="Center" HorizontalOptions="Center"/> </StackLayout> |
④【C#】データバインドの準備
- インターフェースの実装
- INotifyPropertyChanged
- イベントの追加
- PropertyChangedEventHandler PropertyChanged;
- BindingContextに対象を代入
- this.BindingContext = this;
⑤【C#】通知処理
|
1 |
this.PropertyChanged(this, new PropertyChangedEventArgs("name")); |
- プロパティに値が変更された事の通知を追加する。
⑥【C#】「Button_Clicked」メソッド
|
1 2 3 4 |
private void Button_Clicked(object sender, EventArgs e) { this.name = entry.Text; } |
- Entryに代入された値をnameに代入する。
MainPage.xaml.csコード【C#】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public partial class MainPage : ContentPage, INotifyPropertyChanged { //データバインドのイベント public event PropertyChangedEventHandler PropertyChanged; private string _name; public string name { get { return this._name; } set { //プロパティが変更されるタイミングで通知処理を行う this.PropertyChanged(this, new PropertyChangedEventArgs("name")); this._name = value; } } public MainPage() { InitializeComponent(); //BindingContextにthisを追加する。 this.BindingContext = this; } //テキストに入力された値を、nameに代入する。 private void Button_Clicked(object sender, EventArgs e) { this.name = entry.Text; } } |
完成イメージ
①テキストに値を入力→②追加ボタン押下→③ラベルに入力した値を表示！！データバインド！！
以上です。
パキラは勉強ができる植物だってさ！
部屋いっぱいにするのもありですな！٩( ᐛ )وパキラ祭りじゃー
