【注意：2024年5月マイクロソフトのサポート終了済】Xamarin.Forms

はじめにVisualStudio2017でXamarin.Formsのプロジェクトを作成してみましょう。

これからXamarin.Formsでプログラムを書き，スマホ上で動作することを確認しながらプログラミングを行っていきます。

手持ちのAndroidがない場合や，パソコンのみでXamarinの動作確認をしたい場合は，エミュレーターというものを使うことで，Androidの動作をパソコン上で疑似的に再現させることができます。

Xamarin.Formsの最大の魅力は一つのソースコードで，Android，iOS，UWPで動作させることができる点です。UWPを動作させて，Androidと同じ動作がされていることを確認してみましょう。

マルチスタートアップとは，複数のプロジェクトを同時に起動することです。Xamarin.FormsではAndroid，iOS，UWPを同時に開発できるのがウリなので，それぞれのユーザーインターフェースがどのように表示されているのかを見ながらプログラムを作成していくのがよいと思います。ただし，iOSのデバッグには基本的にはMacが必要となるため，この解説ではAndroidとUWPに限定して実行していきます。

※iOSも実機（iPhoneなど）があれば，XamarinLivePlayerというアプリで動作を確認できたのですが，2019年2月10日現在では簡単にはできなくなっているようなので，残念ですが，iOSのデモは諦めます。ただし，Xamarin.Formsの開発とすれば，Androidで習得しておけば，あとはほとんど環境の問題をクリアすることでiOSの開発もできるようになるので，まずはAndroidとUWPでプログラミングを習得していきましょう。

StackLayoutとは，コントロールを垂直方向または水平方向に順番に並べていくパネルです。ボタンやラベルなどのコントロールを縦方向か横方向かを指定して，置いていきます。

今回はStackLayoutの続きで，VerticalOptionsとHorizontalOptionsの使い方を見ていきたいと思います。VerticalOptionsとHorizontalOptionsは，StackLayoutの中で，どこからどんな感じでコントロールを置いていくかを指定するためのモノです。

ここではコントロールの文字の色の変更と，背景色の変更，文字の大きさの変更のやり方を見ていきたいと思います。

Gridとは，Excelのセルのように，縦横のマスを作って，そのマスの中にコントロールを配置することのできるコンテナです。「縦2行，横3列」みたいな感じで，任意の行数と列数を指定して，コントロールを配置することができます。

画面遷移とは，今表示している画面から，別のページに切り替える動作の事です。Xamarin.Formsでは，次の3つの方法で画面遷移をすることができますが，最初に紹介する方法は基本的には使いません。2番目と3番目のやり方で画面遷移をすることになると思いますが，おすすめは，タイトルバーと戻るキーを表示するモーダレスでの画面遷移です。

TabbedPageとは，タブ付きのページのことです。タブというのは次の画像の「TAB1」「TAB２」「TAB３」のように，画面の上部にタブのタイトルを表示して，そのタブごとにページの表示を切り替えることができます。「TAB1」と書かれているところをタップしてもページが切り替えることができますし，ページの内容が表示されているエリアで右や左にスワイプすることで，ページを切り替えることができます。ちょうどスマホで表示されたKindle本のページをめくるような操作と同じです。TabbedPageの場合はボタンを押してページを変更するパターンとは違い，存在するページが全体的にわかるので，使いようによっては，こちらのほうが使いやすいというケース発生すると思います。

前回はTabbedPageを作りました。3つのタブを作成して，ページが切り替わる様子を確認しましたが，各ページの中身がなかったので，あまりページが切り替わっていることが実感できなかったと思います。今回はその中身を作っていきます。完成イメージは次のような感じです。

MasterDetailPageとは，画面の左側の端から右方向にスワイプして表示するページの事です。Androidなどでは，左側をスワイプしてGoogleのニュースを表示したりできますが，その要領で表示するページの事です。この左から出てくるページを「マスター」，最初から表示されているメインのページを「ディティール」と呼び，この２つの関係性を持つページをMasterDetailPageと呼んでいます。マスターページはメインページから以外でも表示することができるので，どんなページが表示されていても，いつでも設定変更を行いたい項目や，いつでも見られるようにしておきたい機能などを置いておくことで，使い勝手の良いアプリケーションを作成することができます。使い方しだいで結構いろんなことができるのではないでしょうか。あなたもこの機能を使って，いい感じの仕様を考えてみてください。

ListViewとは，繰り返し項目をリストにして表示してくれるコントロールで，顧客リストデータ等を画面に表示するときに使うことができます。自由にレイアウトをすることができるので，イメージをおいて，その横にラベルを２つ並べたり，文字の色を変更したりすることができます。データの一覧の中から一つ選択させて，別のページに移動させたり，単純にデータを閲覧したりするときなどに使用できます。今回はMenuPageをListViewにして，そこにイメージとタイトル，サブタイトルを表示するListViewを作成していきます。

CarouselPageを使うと左右にスワイプするだけでページを移動することができます。ちょうどスマホで写真を見ているときに，次の写真に移っていくような感じの動作でページ切り替えができるようになります。

DisplayAlertとは，メッセージを表示する機能です。WindowsFormsで言うところのMessageBoxですね。使い方は2種類あって，OK応答だけのやつと，OKとCancelの応答をとるものがあります。

DisplayActionSheetとは複数の選択肢の中からユーザーに選択を行わせ，結果を得ることのできる機能です。よくあるのは「コピー」「貼り付け」「削除」「キャンセル」なんかを選ばせることに使ったりするようですが，使い方はいろいろあると思います。ただこの機能を使わなくても前述している「ListView」を使うことで十分代用はできるのではないかと思います。ただ，単純に文字列を選ばせるだけならListViewだと手間がかかるだけなので，DisplayActionSheetで簡単に実装するのもアリなのではないかと思います。

Xamarin.Formsをコーディングしていると，時々デバイスごとに処理を切り替えたい場合が出てきます。iOSとAndroidでのコントロールの配置の微妙な違いや，UWPとの微妙な違いを吸収したいときなんかがあります。それ以外にも物理的に切り分けないといけないケースもあったりします。そういった場合に，どのようにデバイスごとにコードを分岐するかを解説します。

今回はページのイベントに関して少しだけ解説します。ページの起動時と終了時のイベントです。WindowsFormsなどでは起動時はLoadイベントがあり，終了時はClosedなどのイベントがありましたがXamarinではそのような名前のものはありません。Xamarinでそれらに代わるものとして，起動時は「Appearing」，終了時は「Disappearing」というものになります。全然名前が違うので驚いてしまいますよね。出現と消滅というような意味のようです。発音も難しいですが「アピアリング」と「ディサピアリング」という感じの発音かと思います。

ナビゲーションページにはタイトルと戻るボタンを表示しているヘッダーエリアがあります。このエリア自体をNavigationPage.HasNavigationBarで非表示にすることはできますが，戻るボタンだけを非表示にすることもできます。そんなニーズがあるのかといえば，タイトルは出したいけど戻るボタンは消したいという事ですよね。例えば画面の登録ボタンかキャンセルボタンを明示的にタップさせたいというような場合でしょうか。用途は人それぞれとは思いますが，戻るボタンを消すことができます。戻るボタンを消すにはNavigationPage.HasBackButtonをFalseにすればOKです。

今回はViewCellの共通化というお話をしたいと思います。ViewCellというのは以前MenuPageを作成したときにListViewを使いましたが，そのなかで1行分のレイアウトを定義していた部分の事です。今後のレクチャーではコントロールに関して色々と解説していく関係で，MenuPageから遷移したページでもMenuPageと同じレイアウトで一覧表示をしたいと思っています。その際に，MenuPageのXamlをコピーしてもうひとつ作ってしまってもいいのですが，コードが重複するのはいろんな場面でよくないことが起きてしまいます。コードが共通化されていれば，アプリケーション全体にわたって共通の見た目になったり，バージョンアップでレイアウトを変更する場合も1か所を変更するだけで，すべてが反映されて，変更漏れを防ぐことができますし，何より工数の削減になります。共通化に関してはこれくらいにして，要するにListViewに表示されるレイアウトを共通化しようというのが今回のViewCellの共通化のお話となります。それではやり方を見ていきましょう。

スイッチとは，WindowsFormsで言うところのチェックボックスのような感じですね。ONかOFFを設定するコントロールになります。

前回のSwitchのレクチャーでスイッチがONのときにImageを表示し，OFFのときにImageを非表示にする例を解説しました。その時はSwitchのToggledイベントをコードビハインド側に書いて，その中でImageのIsVisibleを変更しましたが，データバインドという機能を使うことで，コードビハインド側に何も書かなくても，Xamlだけで完結させることができます。

Sliderとは，音量を調整するつまみのようなコントロールで，整数値や小数値の設定をするコントロールです。

ステパーとは，プラスとマイナスのボタンが表示され，数値を保持するコントロールです。値を１ずつ増やしたり，5ずつ増やしたりすることができます。

EntryとはWindowsFormsで言うところのテキストボックスですね。数値や文字を入力できます。テキスト入力エリアに，薄いグレーでその入力エリアに何を入力するかを示す文言を表示しておくことができます。入力を始めると消えてしまいますが，入力を始めるまでは表示されているため，その入力エリアがパスワードなのか，IDなのかを一目で識別することができます。またラベルとテキストボックスを並べるとどうしてもスペースが必要なのですが，このようにEntry上にラベルの要素も取り入れて表示することで省スペース化を実現できます。これはスマホアプリという限られたスペースのなかで表現するには非表示強力な表現方法となります。

Editorとは複数行の入力ができるテキストボックスです。前回レクチャーしたEntryとの違いは，Entryは1行入力，Editorは複数行入力可能という点です。Androidで文字を入力すると，Entryの場合はキーボード右下のキーがチェックマークになっており，これを押すと入力が完了という事になります。

PickerとはWindowsFormsで言うところのコンボボックスのような感じです。複数の文字列のリストから一つを選択するコントロールです。

今回も前回に引き続き，Pickerに関する解説をしていきます。前回は文字列のリストを表示して選択するという実装をしていました。しかしそれでは実際の開発現場ではほとんど使えないのではないかなと思います。今回の例でいうとTel，Fax，Mailを選択するPickerですが，これをデータベースなどでデータを保存する場合は，多くの場合「文字」ではなく数値等の「区分」で保存されることになると思います。要するにTelなら「１」，Faxなら「２」，Mailなら「３」という感じで，値に意味を持たせ，データベースには区分のみを保存して，表示するときは，アプリケーションで加工して「Tel」などの文字にするという設計をします。そうしておけば，「Tel」は「電話」と表現することに変更されたとしても，内部での比較は「１」で行うコーディングを変更する必要はありません。

DatePickerは日付を選択するコントロールです。TimePickerは時間を選択するコントロールです。

SearchBarとは，Googleの検索エリアみたいな感じで，検索文字を入れるコントロールです。文字を入れるたびに検索を実行することもできますし，キーボードの右下の虫眼鏡ボタンを押したときに検索をさせることもできます。

ToolbarItemとは，アイコンや文字をならべて表示できるコントロールです。保存ボタンやメールボタン等を設置することができます。右端の「・・・」のエリアを押すと，そこにも文字でツールが表示されます。どちらに表示するかを指定することができます。

TableViewとはコントロールを行のような感じにして並べていけるものです。テキストやタイトルと詳細が一つになったレイアウトや，ラベルとEntryが一つになったもの，ラベルとスイッチが一つになったものなどを行として並べていくことができます。スイッチ付きのコントロールはスマホの設定画面とかでよく見かけるのではないかと思います。このスイッチのコントロールをならべて，マスターページに表示しておくと使いやすいページになるのではないかと思います。

ActivityIndicatorとは，処理中などを示すくるくると回るアニメーションです。処理中にこれを表示するだけで，ユーザーのストレスは軽減され，処理中であることが明確になるため，非常に使い勝手のいい機能ですね。

ListViewが表示されているときに，上から下にスワイプすることで，ListViewに対して更新を促すことができます。スマホを使い慣れている方ならわかると思いますが，下に引っ張って更新される動作です。AndroidやiOSでこの動作は可能ですが，Windowsにこの思想がないと思うので，UWPでは普通にやってもできません。何かツールを使うとできるかもしれませんが，今回はAndroidだけで検証します。