ナレッジベース

Xuni

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

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

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


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

Xamarin.Androidで画面に配置するコントロールの定義を含めすべてコードで記述したサンプルコードが以下です。
このクラスは、ドロップダウンをViewに設定する内容をActivityで記述しています。

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

using System;
using Android.App;
using Android.OS;
using Com.GrapeCity.Xuni.Calendar;
using Com.GrapeCity.Xuni.Input.Dropdown;
using Com.GrapeCity.Xuni.Input.Mask;

namespace Input101
{
    [Activity(Label = "@string/dropdown", Icon = "@drawable/icon")]
    public class DropDownActivity : Activity
    {
        // 表示するコントロールの変数を定義
        XuniDropDown dropdown;     // ドロップダウン
        XuniMaskedTextView header; // ヘッダー部に表示するマスク
        XuniCalendar calendar;     // カレンダー

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            // ドロップダウン部、ヘッダー部を作成
            dropdown = new XuniDropDown(this);
            header = new XuniMaskedTextView(this);
            // マスク書式を設定
            header.Mask="0000/00/00";

            // カレンダーを作成
            calendar = new XuniCalendar(this);
            // ヘッダー部にマスクコントロールをセット
            dropdown.Header=header;
            // ドロップダウン部にカレンダーをセット
            dropdown.Dropdown=calendar;
            dropdown.DropDownHeight = 400;
            dropdown.Animated=true;
            // ドロップダウンに表示されたカレンダーで日付を選択した場合の処理
            calendar.SelectionChanged += (object sender, CalendarSelectionChangedEventArgs e) =>
            {
                // ドロップダウンを閉じる
                dropdown.DropDownOpen = false;
                // 日付の書式を指定して、ヘッダー部の値に設定
                DateTime dateTime = calendar.SelectedDates.ToArray()[0];
                string strDate = dateTime.ToString("yyyyMMdd");
                header.Value = strDate;				
            };

            this.SetContentView(dropdown);
        
        }
    }
}

Xuni　＞ 技術情報　＞ ドキュメント　＞ DropDown

このナレッジベースで説明したサンプルコードを含むプロジェクトをWebサイトで公開しています。
お試し用のライセンスを組み込み済みですので、ダウンロードしてご利用ください。
Xuni　＞ 技術情報　＞ クイックスタート