XuniDropDown を使用したカスタム日付ピッカーの作成

このトピックでは、XuniDropDown コントロールを使用してカスタム日付ピッカーを作成する方法について説明します。それにはまず、新しいポータブルアプリケーションまたは共有アプリケーションを作成し、XAML ビューで XuniDropDown コントロールを初期化した後、setHeader プロパティを使用してヘッダービューに、また setDropDown プロパティを使用してドロップダウンビューに、それぞれコンテンツを提供します。この例では、ヘッダーで XuniMaskedEntry コントロールを使用し、ドロップダウンで XuniCalendar コントロールを使用して、日付ピッカーを作成します。

次の図は、XuniDropDown コントロールを使用して作成されたカスタム日付ピッカーの外観を示しています。

A custom date picker

XuniDropDown コントロールを使用してカスタム日付ピッカーを作成するには、次の手順を実行します。

新しいポータブルまたは共有 Xamarin.Forms アプリケーションを作成します（詳細については「新しい Xamarin.Forms アプリの作成」を参照）。
アプリケーションに新しい Forms XAML ページ（たとえば Page1.xaml）を追加します。

<ContentPage> タグを編集して、必要な Xuni 参照を追加します。

XAML	コードのコピー
xmlns:xuni="clr-namespace:Xuni.Forms.Input;assembly=Xuni.Forms.Input" xmlns:calendar="clr-namespace:Xuni.Forms.Calendar;assembly=Xuni.Forms.Calendar"

<ContentPage></ContentPage> タグ間に以下のマークアップを追加して、XuniDropDown コントロール、XuniMaskedEntry コントロール、XuniCalendar コントロールを初期化します。

XAML	コードのコピー
<StackLayout> <Label BindingContext="{x:Reference page}" Text="{Binding Title}" IsVisible="{StaticResource TitleVisible}" HorizontalOptions="Center" Font="Large"/> <Grid VerticalOptions="FillAndExpand" > <xuni:XuniDropDown x:Name="dropdown" HorizontalOptions="FillAndExpand" VerticalOptions="Start" > <xuni:XuniDropDown.Header> <xuni:XuniMaskedEntry x:Name="mask" BindingContext="{x:Reference calendar}" Mask="0000/00/00" /> </xuni:XuniDropDown.Header> <xuni:XuniDropDown.DropDown> <calendar:XuniCalendar HorizontalOptions="FillAndExpand" x:Name="calendar" BackgroundColor="Transparent"> </calendar:XuniCalendar> </xuni:XuniDropDown.DropDown> </xuni:XuniDropDown> </Grid> </StackLayout> </ContentPage>

XAML

コードのコピー

<StackLayout>
    <Label BindingContext="{x:Reference page}" Text="{Binding Title}" IsVisible="{StaticResource TitleVisible}" HorizontalOptions="Center" Font="Large"/>
    <Grid VerticalOptions="FillAndExpand" >
      <xuni:XuniDropDown
           x:Name="dropdown"  
           HorizontalOptions="FillAndExpand"
           VerticalOptions="Start" >
        <xuni:XuniDropDown.Header>
          <xuni:XuniMaskedEntry 
            x:Name="mask"
            BindingContext="{x:Reference calendar}"
            Mask="0000/00/00" />
        </xuni:XuniDropDown.Header>
        <xuni:XuniDropDown.DropDown> 
          <calendar:XuniCalendar HorizontalOptions="FillAndExpand" x:Name="calendar" BackgroundColor="Transparent">
          </calendar:XuniCalendar>
        </xuni:XuniDropDown.DropDown>
      </xuni:XuniDropDown>
    </Grid>
  </StackLayout>
</ContentPage>

ソリューションエクスプローラーで Page1.xaml ノードを展開し、Page1.xaml.cs を開きます。コンストラクタに以下のコードを追加します。

C#	コードのコピー
public partial class Page1 : ContentPage { public Page1() { InitializeComponent(); this.calendar.SelectionChanged += CalendarSelectionChanged; } private void CalendarSelectionChanged(object sender, CalendarSelectionChangedEventArgs e) { this.mask.Value = calendar.SelectedDate.ToString(); this.dropdown.IsDropDownOpen = false; } }

コードのコピー

 public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
            this.calendar.SelectionChanged += CalendarSelectionChanged;
        }

        private void CalendarSelectionChanged(object sender, CalendarSelectionChangedEventArgs e)
        {
            this.mask.Value = calendar.SelectedDate.ToString();
            this.dropdown.IsDropDownOpen = false;
        }
}

［F5］を押してプロジェクトを実行します。