星期六, 7月 22, 2017

[X.Form] DatePicker

參考官範例 Xamarin.Forms.DatePicker Class 的練習

Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:XFViewPractice"
                xmlns:sys="clr-namespace:System;assembly=mscorlib"
                x:Class="XFViewPractice.XF_DatePicker">
    <ContentPage.Content>
        <StackLayout 
            VerticalOptions="Center" 
            HorizontalOptions="Center">
            <DatePicker 
                x:Name="DP"
                VerticalOptions="Center" 
                HorizontalOptions="Center"
                Date="{x:Static sys:DateTime.Today}"
                Format="yyyy-MM-dd"
                MinimumDate="2017-06-01"
                MaximumDate="2017-08-31"
                DateSelected="DP_DateSelected">
            </DatePicker>
            <Label 
                x:Name="lblResult" 
                Text="顯示點選結果">
            </Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
C#
namespace XFViewPractice
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class XF_DatePicker : ContentPage
    {
        public XF_DatePicker()
        {
            InitializeComponent();
        }

        private void DP_DateSelected(object sender, DateChangedEventArgs e)
        {
            lblResult.Text = string.Empty;
            lblResult.Text += $"原資料:{e.OldDate.ToString("yyyy-MM-dd")}" + Environment.NewLine;
            lblResult.Text += $"點選資料:{e.NewDate.ToString("yyyy-MM-dd")}";
        }
    }
}
重點紀錄:
  • 要在 Xaml 內使用 DateTime,必須引用 xmlns:sys="clr-namespace:System;assembly=mscorlib"
  • MinimumDate 和 MaximumDate 限制 DatePicker 可以存取的範圍
  • DatePicker 沒有 FontSize 可以直接調整字型大小喔
程式執行起始畫面

[X.Form] DatePicker-1

點選 DatePicker 後,只能跳到 8 月份,就沒有辦法跳到 9 月份

[X.Form] DatePicker-2

點選 0831 來觸發 DateSelect 事件

[X.Form] DatePicker-3

沒有留言:

張貼留言