Xamarin.Forms DatePicker

Xamarin.Forms Kullanıcının tarih seçmesine olanak tanıyan bir görünüm.

, Xamarin.FormsDatePicker platformun tarih seçici denetimini çağırır ve kullanıcının bir tarih seçmesine izin verir. DatePicker sekiz özelliği tanımlar:

• MinimumDate türündedir DateTimeve varsayılan olarak 1900 yılının ilk günü olur.
• MaximumDate türündedir DateTimeve varsayılan olarak 2100 yılının son gününe ayarlanır.
• Date türünde DateTime, varsayılan olarak değerine DateTime.Todaysahip olan seçili tarih.
• Formattüründestring, varsayılan olarak uzun tarih deseni olan "D" olan standart veya özel bir .NET biçimlendirme dizesidir.
• TextColor türünde Color, seçili tarihi görüntülemek için kullanılan ve varsayılan olarak Color.Defaultdeğerine sahip olan renktir.
• FontAttributes türündedir FontAttributesve varsayılan olarak güncelleştirilir FontAtributes.None.
• FontFamily türündedir stringve varsayılan olarak güncelleştirilir null.
• FontSize türündedir doubleve varsayılan değer -1.0'dır.
• CharacterSpacing, türündeki double, metnin karakterleri DatePicker arasındaki aralıktır.

kullanıcı DatePicker bir tarih seçtiğinde bir DateSelected olayı tetikler.

Uyarı

ve MaximumDateayarlarını MinimumDate yaparken, öğesinin her zaman değerinden MinimumDate küçük veya eşit MaximumDateolduğundan emin olun. Aksi takdirde, DatePicker bir özel durum oluşturur.

dahili olarak, DatePicker ile MaximumDatearasında MinimumDate (dahil) olmasını Date sağlar. veya MaximumDate aralarında olmayacak şekilde Date ayarlanırsa MinimumDate değerini DatePicker Dateayarlar.

Sekiz özelliğin tümü nesneler tarafından BindableProperty desteklenir, yani bunlar stillendirilebilir ve özellikler veri bağlamalarının hedefleri olabilir. özelliği varsayılan Date bağlama moduna BindingMode.TwoWaysahiptir. Bu, Model-View-ViewModel (MVVM) mimarisini kullanan bir uygulamada veri bağlamanın hedefi olabileceği anlamına gelir.

DateTime özelliklerini başlatma

Kodda, türündeki MinimumDatedeğerler DateTimeiçin , MaximumDateve Date özelliklerini başlatabilirsiniz:

DatePicker datePicker = new DatePicker
{
    MinimumDate = new DateTime(2018, 1, 1),
    MaximumDate = new DateTime(2018, 12, 31),
    Date = new DateTime(2018, 6, 21)
};

XAML'de bir DateTime değer belirtildiğinde, XAML ayrıştırıcısı dizeyi DateTime.Parse bir CultureInfo.InvariantCulture değere dönüştürmek için DateTime bağımsız değişkenle yöntemini kullanır. Tarihler kesin bir biçimde belirtilmelidir: iki basamaklı aylar, iki basamaklı günler ve eğik çizgiyle ayrılmış dört basamaklı yıllar:

<DatePicker MinimumDate="01/01/2018"
            MaximumDate="12/31/2018"
            Date="06/21/2018" />

özelliği , ve (örneğin) türündeki MinDateDateTime özellikleri içeren bir görünüm modeli örneğine ayarlanırsa, aşağıdaki gibi bir örnek DatePicker oluşturabilirsiniz:SelectedDate MaxDateDatePicker BindingContext

<DatePicker MinimumDate="{Binding MinDate}"
            MaximumDate="{Binding MaxDate}"
            Date="{Binding SelectedDate}" />

Bu örnekte, üç özellik de görünüm modelindeki ilgili özelliklere başlatılır. Date özelliği bağlama moduna TwoWaysahip olduğundan, kullanıcının seçtiği yeni tarihler otomatik olarak görünüm modeline yansıtılır.

DatePicker özelliğinde Date bağlama içermiyorsa, kullanıcı yeni bir tarih seçtiğinde DateSelected bilgilendirilecek bir uygulama olaya bir işleyici eklemelidir.

Yazı tipi özelliklerini ayarlama hakkında bilgi için bkz . Yazı Tipleri.

DatePicker ve düzen

, veya End ile DatePickergibi CenterStartkısıtlanmamış bir yatay düzen seçeneği kullanmak mümkündür:

<DatePicker ···
            HorizontalOptions="Center"
            ··· />

Ancak, bu önerilmez. Özelliğin ayarına Format bağlı olarak, seçilen tarihler farklı görüntüleme genişlikleri gerektirebilir. Örneğin, "D" biçim dizesi tarihlerin uzun bir biçimde görüntülenmesine neden olur DateTime ve "12 Eylül 2018 Çarşamba", "Friday, May 4, 2018" değerinden daha büyük bir görüntüleme genişliği gerektirir. Platforma bağlı olarak, bu fark görünümün DateTime düzende genişliğinin değişmesine veya ekranın kesilmesine neden olabilir.

İpucu

varsayılan ayarını Fill ile DatePickerkullanmak HorizontalOptions ve hücreye Grid eklerken DatePicker genişliğini Auto kullanmamak en iyisidir.

Uygulamada DatePicker

Örnek, sayfasında iki DatePicker görünüm içerir. Bunlar iki tarih seçmek için kullanılabilir ve program bu tarihler arasındaki gün sayısını hesaplar. Program ve MaximumDate özelliklerinin ayarlarını MinimumDate değiştirmez, bu nedenle iki tarih 1900 ile 2100 arasında olmalıdır.

XAML dosyası şu şekildedir:

<?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:DaysBetweenDates"
             x:Class="DaysBetweenDates.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
        </OnPlatform>
    </ContentPage.Padding>

    <StackLayout Margin="10">
        <Label Text="Days Between Dates"
               Style="{DynamicResource TitleStyle}"
               Margin="0, 20"
               HorizontalTextAlignment="Center" />

        <Label Text="Start Date:" />

        <DatePicker x:Name="startDatePicker"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <Label Text="End Date:" />

        <DatePicker x:Name="endDatePicker"
                    MinimumDate="{Binding Source={x:Reference startDatePicker},
                                          Path=Date}"
                    Format="D"
                    Margin="30, 0, 0, 30"
                    DateSelected="OnDateSelected" />

        <StackLayout Orientation="Horizontal"
                     Margin="0, 0, 0, 30">
            <Label Text="Include both days in total: "
                   VerticalOptions="Center" />
            <Switch x:Name="includeSwitch"
                    Toggled="OnSwitchToggled" />
        </StackLayout>

        <Label x:Name="resultLabel"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center" />

    </StackLayout>
</ContentPage>

Her DatePicker birine uzun bir tarih biçimi için "D" özelliği atanır Format . Ayrıca nesnenin endDatePicker özelliğini hedefleyen MinimumDate bir bağlaması olduğuna da dikkat edin. Bağlama kaynağı, nesnenin seçili Date özelliğidir startDatePicker . Bu, bitiş tarihinin her zaman başlangıç tarihinden sonra veya bu tarihe eşit olmasını sağlar. İki DatePicker nesneye ek olarak , Switch "Her iki günü de toplam olarak ekle" olarak etiketlenmiştir.

İki DatePicker görünümde olaya bağlı DateSelected işleyiciler ve Switch olayına Toggled eklenmiş bir işleyicisi vardır. Bu olay işleyicileri arka plan kod dosyasındadır ve iki tarih arasındaki günlerin yeni bir hesaplamasını tetikler:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    void OnDateSelected(object sender, DateChangedEventArgs args)
    {
        Recalculate();
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        Recalculate();
    }

    void Recalculate()
    {
        TimeSpan timeSpan = endDatePicker.Date - startDatePicker.Date +
            (includeSwitch.IsToggled ? TimeSpan.FromDays(1) : TimeSpan.Zero);

        resultLabel.Text = String.Format("{0} day{1} between dates",
                                            timeSpan.Days, timeSpan.Days == 1 ? "" : "s");
    }
}

Örnek ilk kez çalıştırıldığında, her iki DatePicker görünüm de bugünün tarihine başlatılır. Aşağıdaki ekran görüntüsünde iOS ve Android'de çalışan program gösterilmektedir:

Ekranlardan herhangi biri dokunulduğunda DatePicker platform tarih seçicisi çağrılır. Platformlar bu tarih seçiciyi çok farklı şekillerde uygular, ancak her yaklaşım bu platformun kullanıcılarına tanıdık gelir:

İpucu

Android'de, DatePicker özel işleyicide yöntemi geçersiz kılınarak CreateDatePickerDialog iletişim kutusu özelleştirilebilir. Bu, örneğin, iletişim kutusuna ek düğmelerin eklenmesini sağlar.

İki tarih seçildikten sonra uygulama, bu tarihler arasındaki gün sayısını görüntüler:

İlgili bağlantılar

• DatePicker API'si