Xamarin.Forms Timepicker

  • Makale
  • Okumak için 4 dakika

Örneği İndir Örneği indirme

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

Xamarin.FormsTimePicker , platformun zaman seçici denetimi çağırır ve kullanıcının bir saat seçmesi için izin verir. TimePicker aşağıdaki özellikleri tanımlar:

Bu özelliklerin 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. Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">özelliği varsayılan bağlama moduna Time sahiptir Xamarin_Forms Time _BindingMode_TwoWay" data-linktype="absolute-path">; yani BindingMode.TwoWay mimarisini kullanan bir uygulamada veri bağlamanın hedefi olabilir.

, TimePicker seçilen yeni bir veri türü"Xamarin_Forms TimePicker _TimePicker_Time" data-linktype="absolute-path">Time içermez. Bu durum size bildirilecekse, olay için bir işleyici PropertyChanged ekleyin.

Time özelliğini başlatma

Kodda, Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">özelliğini türünde bir Time değere TimeSpan başlatabilirsiniz:

TimePicker timePicker = new TimePicker
{
  Time = new TimeSpan(4, 15, 26) // Time set to "04:15:26"
};

Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">özelliği XAML'de belirtilirse, milisaniye sayısının 0'dan büyük veya 0'a eşit olduğundan ve saat sayısının TimeTimeSpan 24'ün altında olduğundan emin olmak için değer bir değerine dönüştürülür ve doğrulanır. Saat bileşenleri iki nokta üst üste ile ayrılabilir:

<TimePicker Time="4:15:26" />

Xamarin_Forms _BindableObject_BindingContext" data-linktype="absolute-path">özelliği, adlı türünde bir özellik içeren bir ViewModel örneğine ayarlanırsa aşağıdaki gibi bir örneği örneği BindingContextTimePickerTimeSpanSelectedTimeTimePicker ebilirsiniz:

<TimePicker Time="{Binding SelectedTime}" />

Bu örnekte, Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">özelliği TimeSelectedTime ViewModel'daki özelliğine başlatılır. özelliği Time Xamarin_Forms Time _BindingMode_TwoWay" data-linktype="absolute-path">bağlama moduna sahip olduğundan, kullanıcının seçmesi gereken her yeni yeni zaman ViewModel'e otomatik olarak TwoWay yayılır.

, TimePicker Xamarin_Forms TimePicker _TimePicker_Time" data-linktype="absolute-path">özelliğinde bir bağlama içeriyorsa, kullanıcı yeni bir saat seçerse, bir uygulamanın olayı bilgilendiren bir işleyici eklemesi TimePropertyChanged gerekir.

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

TimePicker ve düzen

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

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

Ancak bu önerilmez. Xamarin_Forms _TimePicker_Format" data-linktype="absolute-path">özelliğinin ayarına bağlı olarak, seçilen zamanlar farklı Format görüntüleme genişlikleri gerektirir. Örneğin, "T" biçim dizesi görünümün zamanları uzun bir biçimde görüntülemesini sağlar ve TimePicker "4:15:26 AM", kısa saat biçiminden ("t") "4:15 AM" biçiminden daha büyük bir 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 TimePicker ekranın kesilmesine neden olabilir.

İpucu

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

Bir uygulamada TimePicker

SetTimer örneği sayfasında , ve Switch görünümlerini içerir. bir saat seçmek için kullanılabilir ve bu saat oluştuğunda, kullanıcıya içinde metni anımsatan bir uyarı iletişim kutusu görüntülenir( seçeneği TimePickerEntrySwitch açıksa). XAML dosyası şu şekildedir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SetTimer"
             x:Class="SetTimer.MainPage">
    <StackLayout>
        ...
        <Entry x:Name="_entry"
               Placeholder="Enter event to be reminded of" />
        <Label Text="Select the time below to be reminded at." />
        <TimePicker x:Name="_timePicker"
                    Time="11:00:00"
                    Format="T"
                    PropertyChanged="OnTimePickerPropertyChanged" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Enable timer:" />
            <Switch x:Name="_switch"
                    HorizontalOptions="EndAndExpand"
                    Toggled="OnSwitchToggled" />
        </StackLayout>
    </StackLayout>
</ContentPage>

, Entry seçilen zaman oluştuğunda görüntülenecek anımsatıcı metni girmenizi sağlar. , TimePicker uzun süre Xamarin_Forms TimePicker _TimePicker_Format" data-linktype="absolute-path">Format "T" özelliğine atanır. Olayına eklenmiş bir olay PropertyChanged işleyicisi ve Switch olayına eklenmiş bir işleyicisi Toggled vardır. Bu olay işleyicileri arka arkasındaki kod dosyasındadır ve yöntemini SetTriggerTime çağırır:

public partial class MainPage : ContentPage
{
    DateTime _triggerTime;

    public MainPage()
    {
        InitializeComponent();

        Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
    }

    bool OnTimerTick()
    {
        if (_switch.IsToggled && DateTime.Now >= _triggerTime)
        {
            _switch.IsToggled = false;
            DisplayAlert("Timer Alert", "The '" + _entry.Text + "' timer has elapsed", "OK");
        }
        return true;
    }

    void OnTimePickerPropertyChanged(object sender, PropertyChangedEventArgs args)
    {
        if (args.PropertyName == "Time")
        {
            SetTriggerTime();
        }
    }

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

    void SetTriggerTime()
    {
        if (_switch.IsToggled)
        {
            _triggerTime = DateTime.Today + _timePicker.Time;
            if (_triggerTime < DateTime.Now)
            {
                _triggerTime += TimeSpan.FromDays(1);
            }
        }
    }
}

yöntemi, SetTriggerTime özellik değerine ve değerinden döndürülen DateTime.Today değere göre bir TimeSpan zamanlayıcı süresi TimePicker hesaplar. Bu gereklidir çünkü DateTime.Today özelliği geçerli tarihi belirten bir DateTime döndürür, ancak gece yarısı saati ile. Zamanlayıcı süresi bugün zaten geçti ise, bu sürenin yarın olduğu varsayılır.

Zamanlayıcı her saniye tıklar ve üzerinde olup olmadığını ve geçerli sürenin zamanlayıcı zamanından büyük veya bu süreye eşit olup olmadığını kontrol etmek için OnTimerTickSwitch yöntemini yürütür. Zamanlayıcı süresi oluştuğunda yöntemi DisplayAlert kullanıcıya anımsatıcı olarak bir uyarı iletişim kutusu sunar.

Örnek ilk kez çalıştırıldı mı, TimePicker görünüm 11:00'a başlatılır. TimePickerdokunulduğunda platform saat seçicisi çağrılır. Platformlar zaman seçiciyi çok farklı şekillerde uygulamaya alır, ancak her yaklaşım bu platformun kullanıcılarına tanıdık geliyor:

Zamanı Seçme

İpucu

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

Bir saat seçtikten sonra, seçilen saat içinde TimePicker görüntülenir:

Seçilen

öğesinin açık konuma geçişli olduğu şartıyla, uygulama seçilen saat oluştuğunda kullanıcıya metni anımsatan Switch bir uyarı iletişim kutusu Entry görüntüler:

Zamanlayıcısı Açılan Zamanlayıcısı

Uyarı iletişim kutusu görüntülenir görüntülenmez Switch kapalı konuma geçiştir.