コンボボックスにカレンダーを表示して日付を選択する方法（Xamarin.iOS）

Studio for Xamarinのコンポーネントを組み合わせて利用することで、コンボボックスのドロップダウン部分にカレンダーを表示することができます。ドロップダウンで表示したカレンダーから任意の日付を選択し、その日付をそのコンボボックスの値として取得可能です。

利用するStudio for Xamarinのコンポーネントは、InputとCalendarです。

Inputのドロップダウンコントロール(DropDown)を構成する要素は、ヘッダー部(Header)とドロップダウン部(DropDown)です。


ヘッダー部で値の表示と入力が行われ、ドロップダウン部に選択肢が表示されます。
この例では、ヘッダー部にInputのマスク入力コントロール(MaskedTextField)を利用して日付表示、入力に対応させ、ドロップダウン部分にCalendarを表示させています。

Xamarin.iOSで画面に配置するコントロールの定義を含めすべてコードで記述したサンプルコードが以下です。
このクラスは、コンボボックスを作成します。

サンプルコード
C#（Xamarin.iOS）

using Foundation;
using Xuni.iOS.Input;
using Xuni.iOS.Core;
using Xuni.iOS.Calendar;
using UIKit;

namespace C1Xamarin_QuickStart
{
　　public class CreateInput
　　{
　　　　// ドロップダウンと内部に表示するカレンダー
　　　　// 変数を定義
　　　　public C1Calendar calendar;
　　　　public static C1MaskedTextField textField;
　　　　public static C1DropDown d;

　　　　public C1DropDown getDropDown()
　　　　{
　　　　　　// ドロップダウンを作成
　　　　　　var dropDown = new C1DropDown();
　　　　　　dropDown.DropDownHeight = 300;
　　　　　　dropDown.DropDownWidth = dropDown.Bounds.Size.Width;
　　　　　　// ドロップダウンは強制的に下部に表示する
　　　　　　dropDown.DropDownMode = DropDownMode.ForceBelow;
　　　　　　dropDown.IsAnimated = true;
　　　　　　d = dropDown;

　　　　　　//MaskedInputを作成してヘッダー部に設定する
　　　　　　textField = new C1MaskedTextField();
　　　　　　textField.Mask = @"0000/00/00";
　　　　　　textField.BorderStyle = UITextBorderStyle.None;
　　　　　　dropDown.Header = textField;

　　　　　　// カレンダーを作成してドロップダウン部に設定する
　　　　　　calendar = new C1Calendar();
　　　　　　//calendar.Delegate = new myDelegate();
　　　　　　calendar.SelectionChanged += (object sender, CalendarSelectionChangedEventArgs e) =>
　　　　　　{
　　　　　　　　DateTime dateTime = calendar.SelectedDates[0];
　　　　　　　　string strDate = dateTime.ToString("yyyy-MM-dd");
　　　　　　　　textField.Text = strDate;
　　　　　　　　d.IsDropDownOpen = false;
　　　　　　};
　　　　　　dropDown.DropDown = calendar;

　　　　　　return dropDown;
　　　　}
　　}
}

このクラスで作成したコンボボックスを表示する場合のコードは、ViewControllerのViewDidLoadメソッドに記述します。
サンプルコード
C#（Xamarin.iOS）

var drop = new CreateInput().getDropDown();
drop.Frame = new CoreGraphics.CGRect(50, 290, View.Bounds.Width - 100, 30);
View.AddSubview(drop);

Studio for Xamarin　＞ 製品ヘルプ　＞ DropDown