Xamarin.Forms DatePicker

  • Makale
  • Okumak için 4 dakika

Örneği İndir Örneği indirme

Kullanıcının bir tarih seçmesi için izin veren bir görünüm.

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

Kullanıcı DatePicker bir DateSelected tarih seçerken bir olay sağlar.

Uyarı

ve MinimumDate 'i MaximumDate ayarlarken, ayarının her MinimumDate zaman 'den küçük veya ona eşit olduğundan emin MaximumDate olun. Aksi DatePicker takdirde, bir özel durum oluşturur.

dahili olarak, DatePicker ve arasında kapsayıcı olması DateMinimumDateMaximumDate sağlar. MinimumDateveya MaximumDate , aralarında yer alan Date bir değere ayarlanmayacak şekilde ayarlanırsa DatePicker değerini Date ayarlar.

Sekiz özelliğin hepsi nesneler tarafından de desteklene, bu da stile sahip olduğu anlamına gelir ve özellikler BindableProperty veri bağlamalarının hedefleri olabilir. özelliği, DateDate Xamarin_Forms _BindingMode_TwoWay" data-linktype="absolute-path">varsayılan bağlama moduna sahiptir. Bu da BindingMode.TwoWay mimarisini kullanan bir uygulamada veri bağlamanın hedefi olduğu anlamına gelir.

DateTime özelliklerini başlatma

Kodda , ve özelliklerini MinimumDateMaximumDate türünde Date değerlerle DateTime 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 değer belirtilirse, XAML ayrıştırıcısı dizeyi bir değere dönüştürmek DateTimeDateTime.Parse için bağımsız CultureInfo.InvariantCulture değişkeniyle yöntemini DateTime kullanır. Tarihler kesin biçimde belirtilmelidir: iki basamaklı ay, iki basamaklı gün ve eğik çizgiyle ayrılmış dört basamaklı yıl:

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

özelliği , ve (örneğin) türünde özellikler içeren bir viewmodel örneğine ayarlanırsa, aşağıdaki gibi BindingContextDatePicker bir örneği örneği DateTimeMinDateMaxDateSelectedDateDatePicker ebilirsiniz:

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

Bu örnekte, üç özellik de viewmodel'daki ilgili özelliklere başlatılır. özelliği bağlama moduna sahip olduğundan, kullanıcının seçerek tüm yeni tarihler otomatik olarak DateTwoWay viewmodel'e yansıtılır.

özelliğinde bir bağlama bulunmuyorsa, kullanıcı yeni bir tarih seçerse, uygulamanın olayı bilgilendiren bir DatePickerDateDateSelected işleyici eklemesi gerekir.

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

DatePicker ve düzen

, veya gibi kısıtlanmamış bir yatay düzen seçeneği ile CenterStartEndDatePicker kullanılabilir:

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

Ancak bu önerilmez. Özelliğin ayarına bağlı Format olarak, seçilen tarihler farklı görüntüleme genişlikleri gerektirir. Örneğin, "D" biçim dizesi tarihleri uzun bir biçimde görüntülemeye neden olur ve DateTime "Çarşamba, Eylül 12, 2018", "Friday, May 4, 2018" (Cuma, 4 Mayıs 2018) yerine daha fazla görüntüleme genişliği gerektirir. Platforma bağlı olarak, bu fark görünümün düzende genişliği değiştirmesi veya DateTime ekranın kesilmesine neden olabilir.

İpucu

Bir hücreye koyan genişliğini kullanmak yerine ile varsayılan ayarını HorizontalOptionsFill kullanmak en DatePickerAutoDatePickerGrid iyisidir.

Bir uygulamada DatePicker

DaysBetweenDates örneği sayfasında iki 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 özelliklerinin ayarlarını değiştirmez, bu nedenle iki tarihin MinimumDateMaximumDate 1900 ile 2100 arasında olması gerekir.

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 biri uzun tarih biçimi için Format "D" özelliğine atanır. Ayrıca nesnenin özelliğini endDatePicker hedef alan bir bağlamaya sahip olduğunu da MinimumDate unutmayın. Bağlama kaynağı nesnenin Date seçili startDatePicker özelliğidir. Bu, bitiş tarihi her zaman başlangıç tarihine eşit veya daha yeni olur. İki nesneye ek DatePicker olarak , Switch "her iki günü de toplam olarak dahil" olarak etiketlenmiş.

İki DatePicker görünümde, olayına eklenmiş DateSelected işleyiciler ve Switch olayına eklenmiş bir işleyicisi Toggled vardır. Bu olay işleyicileri arka arkasındaki kod dosyasındadır ve iki tarih arasındaki günlerin yeni bir hesaplaması 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ı, her DatePicker iki 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österir:

günlerini, başlangıç tarihleri arasındaki

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

Tarihler arasında gün seçin Tarihler

İpucu

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

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

sonuç günleri ile Tarihler sonucu arasındaki