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

文書番号 : 81904 文書種別 : 使用方法登録日 : 2016/12/12 最終更新日 : 2016/12/12

対象製品

Xuni

詳細

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

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

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

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

以下のXAMLのコード例に置き換えると
XuniDropDown の部分でドロップダウン全体を定義し、
XuniDropDown.Headerに MaskdInput、
XuniDropDown.DropDown に Calendar
を設定しています。

サンプルコード
XAML（Xamarin.Forms）

<xuni:XuniDropDown x:Name="dropdown" 
        HorizontalOptions="FillAndExpand" 
        VerticalOptions="Start" 
        DropDownHeight="250">
    
        <xuni:XuniDropDown.Header>
            <xuni:XuniMaskedEntry x:Name="mask" 
            BindingContext="{x:Reference calendar}" 
            Mask="0000/00/00" />
        </xuni:XuniDropDown.Header>
    
        <xuni:XuniDropDown.DropDown>
            <calendar:XuniCalendar x:Name="calendar" 
                HorizontalOptions="FillAndExpand" 
                BackgroundColor="White" >
            </calendar:XuniCalendar>
        </xuni:XuniDropDown.DropDown>

</xuni:XuniDropDown>

また、XAMLのコードビハインドには、カレンダーで日付を選択した時のイベント処理が記述されています。

C#（Xamarin.Forms）

using System;
using System.Collections.Generic;

using Xamarin.Forms;
using Xuni.Forms.Calendar;

namespace Xuni_QuickStart.Xuni_Input
{
    public partial class XuniInputDropdown : ContentPage
    {
        public XuniInputDropdown()
        {
            InitializeComponent();

            // カレンダーの選択日付が変更された場合の処理
            this.calendar.SelectionChanged += (object sender, CalendarSelectionChangedEventArgs e) =>
            {
                // 選択された日付をコンボボックスのヘッダー部に設定
                this.mask.Value = calendar.SelectedDate.ToString();
                // ドロップダウンを閉じる
                this.dropdown.IsDropDownOpen = false;
            };

        }
    }
}

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

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

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

対象製品

詳細

関連情報