普段からあまりXAMLを触らない勢からするとちょっとだけ敷居が高いバインディング…。

今回はそのバインディングを使用して、エントリー(テキストボックス)に入力した文字列をラベルに反映させようと思います。

かりまたかりまた

今回も非常に簡単な内容だけど、基礎中の基礎の知識だから、知ってて損はないよ!

バインディングとは

UIのコントロールのプロパティに任意のオブジェクトのプロパティの値をバインドさせること。Bindingによって紐付けられた二つのプロパティは、一方のプロパティの値を変更すると、他方のプロパティの値も自動的に同期されるようになります。

かりまたかりまた

形式ばった説明だとこんな感じです。バインディングを使うことで何が嬉しいか?というのは後で説明します。

バインディングを使用してエントリーの文字をラベルに反映させる

かりまたかりまた

MainPage.xamlに以下のコードを貼り付けてください。そうすると以下のように、エントリーに入力した文字列がラベルへバインディングされているのがわかります。


そもそも、エントリーとは?

りんちゃんりんちゃん

エントリーは、テキストボックスのことにゃ~。エントリーを置きたかったら以下のように記述するのにゃ~。ただ、エントリータグだけだと非常に幅が短いのにゃ~。


エントリーの幅を変えたい場合

りんちゃんりんちゃん

エントリーの幅を変えたい場合にはWidthRequestプロパティを設定するのにゃ~

複数のエントリーを配置した場合

りんちゃんりんちゃん

以下のコードを書いて、複数のエントリーを配置してみたにゃ。


りんちゃんりんちゃん

実行してみると、指定された最も長いWidthRequestが全てのエントリーに適用されているにゃ~。

かりまたかりまた

ちなみに、Entryの順番を変えても、Androidでも同様でした。

バインディングのメリットとは

かりまたかりまた

エントリーのことで割と長くなってしまいました。最後に、バインディングのメリットをお伝えして〆させて頂きます。

バインディングを使用しないでエントリーの値をラベルに反映させた場合

かりまたかりまた

メリットが分かりやすいように、バインディングを使用しないでコーディングをした場合を考えてみます。バインディングを使うことによってXAML内でのコーディングで完結しましたが、もしバインディングを使わなければどのようなコードになるでしょうか。以下に示します。


かりまたかりまた

このようにバインディングを使用しない場合、イベントハンドラはXAMLのコードビハインドに必ず発生してしまいます。

UIとロジックの分離が可能となる

かりまたかりまた

しかし、バインディングを使用することでUIとロジックの分離を行うことが可能となります。

UIとロジックが分離されることでMVVMパターンが適用できる

かりまたかりまた

MVVMという言葉はご存知でしょうか。プログラムの構成をモデル・ビュー・ビューモデルとして考え、プログラムの拡張性や保守性を高めるパターンの一つです。

かりまたかりまた

MVVMを適用させる為にUIとロジックを分離させると言っても過言ではありません。

かりまたかりまた

保守性や拡張性の高いプログラムを作成する為にも、バインディングを使用していきましょう!以下の記事も併せてどうぞ。