コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.Forms)
対象製品
Xuni
詳細
Xuniのコンポーネントを組み合わせて利用することで、コンボボックスのドロップダウン部分にカレンダーを表示することができます。ドロップダウンで表示したカレンダーから任意の日付を選択し、その日付をそのコンボボックスの値として取得可能です。
利用するXuniのコンポーネントは、Xuni InputとXuni Calendarです。
XuniInputのドロップダウンコントロールを構成する要素は、ヘッダー部(Header)とドロップダウン部(DropDown)です。
ヘッダー部で値の表示と入力が行われ、ドロップダウン部に選択肢が表示されます。
この例では、ヘッダー部にXuniInputのマスク入力コントロールを利用して日付表示、入力に対応させ、ドロップダウン部分にXuniCalendarを表示させています。
以下のXAMLのコード例に置き換えると
XuniDropDown の部分でドロップダウン全体を定義し、
XuniDropDown.Headerに MaskdInput、
XuniDropDown.DropDown に Calendar
を設定しています。
サンプルコード
XAML(Xamarin.Forms)
また、XAMLのコードビハインドには、カレンダーで日付を選択した時のイベント処理が記述されています。
C#(Xamarin.Forms)
Xuni > 技術情報 > ドキュメント > DropDown
このナレッジベースで説明したサンプルコードを含むプロジェクトをWebサイトで公開しています。
お試し用のライセンスを組み込み済みですので、ダウンロードしてご利用ください。
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 > 技術情報 > クイックスタート