Xamarinでツイートアプリつくるよ(2) ボタンにコマンドをバインディング

今回はメインのUIを作ってボタンクリックでコマンドを実行するよ
必要なライブラリReactivePropertyをインストールするために、PCLプロジェクトを.NET Standardに変更しておいてね
やり方はググれ。VisualStudio2015だとなぞのビルドエラーがたくさん出て、夜眠れなくて朝起きれないことになるのでVisualStudio2017を使おう
ダウンロードサイトはこちら
www.visualstudio.com
日本語サイトはわからなかったけど、このページからダウンロードできない英語力ではプログラムなんてできないのであきらめよう

NugetでReactivePropertyを検索してインストール
.Net Standardプロジェクトになっていればインストールできるはず

それらが終わったらクラスを追加していきます
まずは設定用のModel、MainSetting.csファイルを追加
中身は以下URL
NyanTweet/MainSetting.cs at 08034ba7a8a27b7dfe6fb5badea5f88fbded3b8b · reniris/NyanTweet · GitHub
プロパティ一つとデフォルトの文字列があるだけのクラスです

ViewModel、MainPageViewModel.csを追加
中身は以下
NyanTweet/MainPageViewModel.cs at 08034ba7a8a27b7dfe6fb5badea5f88fbded3b8b · reniris/NyanTweet · GitHub
UIにバインディングするプロパティとコマンドです

View、MainPage.xamlを追加
中身
NyanTweet/MainPage.xaml at 08034ba7a8a27b7dfe6fb5badea5f88fbded3b8b · reniris/NyanTweet · GitHub
メインのUIです


MainPage.xamlについて解説
8行目

  <ContentPage.BindingContext>
    <vm:MainPageViewModel />
</ContentPage.BindingContext>

これでバインディングが可能になります。WPFでいうDataContextです。

13行目

    <Button Text="{Binding TweetWord.Value}"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
            FontSize="Large"
            Command="{Binding TweetCommand}"
/>

メインの大きいボタンです。
表示テキストにTweetWordプロパティ、コマンドにTweetCommandプロパティをバインドしています。TweetWord.ValueとなっているのはReactivePropertyを使っているからです。
他のコントロールについては変わりないので特に解説しません。

MainPageViewModel.csについて解説
92行目

this.TweetCommand.Subscribe(_ => this.Message.Value = this.TweetWord.Value);

これだけで大きいボタンを押すと、下のほうにメッセージを出すことができます。