Xamarin.Forms TimePicker

  • Článek
  • 5 min ke čtení

Ukázka stažení Stažení ukázky

Zobrazení, které uživateli umožňuje vybrat čas.

Xamarin.FormsTimePicker Vyvolá ovládací prvek pro výběr času platformy a umožní uživateli vybrat čas. TimePicker definuje následující vlastnosti:

Všechny tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být styly a vlastnosti mohou být cílem datových vazeb. Vlastnost Xamarin_Forms _TimePicker_Time data-LINKTYPE = "absolutní cesta" >Time má výchozí režim vazby Xamarin_Forms Time _BindingMode_TwoWay data-linktype = "absolutní cesta" >BindingMode.TwoWay , což znamená, že se může jednat o cíl datové vazby v aplikaci, která používá architekturu .

TimePickerNeobsahuje událost pro označení nového vybraného Xamarin_Forms TimePicker _TimePicker_Time "data-LINKTYPE =" absolutní cesta ">Time hodnota. Pokud potřebujete být upozorněni na to, můžete pro událost přidat obslužnou rutinu PropertyChanged .

Inicializuje se vlastnost time.

V kódu můžete inicializovat Xamarin_Forms _TimePicker_Time "data-LINKTYPE =" absolutní cesta ">Time vlastnost na hodnotu typu TimeSpan :

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

Je-li v jazyce XAML zadána vlastnost Xamarin_Forms _TimePicker_Time data-LINKTYPE = "absolutní cesta" >Time , je hodnota převedena na TimeSpan a ověřena, aby bylo zajištěno, že počet milisekund je větší nebo roven 0 a počet hodin je menší než 24. Časové komponenty by měly být oddělené dvojtečkami:

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

Pokud Xamarin_Forms _BindableObject_BindingContext "data-LINKTYPE =" absolutní cesta ">BindingContext vlastnost TimePicker je nastavena na instanci ViewModel obsahující vlastnost typu TimeSpan s názvem SelectedTime (například), můžete vytvořit instanci TimePicker takto:

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

V tomto příkladu je vlastnost Xamarin_Forms _TimePicker_Time data-LINKTYPE = "absolutní cesta >" Time inicializována na SelectedTime vlastnost v ViewModel. Vzhledem k tomu, že Time vlastnost má režim vazby Xamarin_Forms Time _BindingMode_TwoWay "data-LINKTYPE =" absolutní cesta ">TwoWay , všechny nové časy, které uživatel vybere, se automaticky rozšíří do ViewModel.

Pokud neobsahuje TimePicker vazbu na své Xamarin_Forms TimePicker vlastnost _TimePicker_Time "data-LINKTYPE =" absolutní cesta ">Time , aplikace by měla připojit obslužnou rutinu k PropertyChanged události, aby se informovala, když uživatel vybere nový čas.

Informace o nastavení vlastností písma naleznete v tématu Fonts.

TimePicker a rozložení

Je možné použít neomezenou možnost horizontálního rozložení Center , jako je, Start nebo EndTimePicker :

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

To se ale nedoporučuje. V závislosti na nastavení Xamarin_Forms _TimePicker_Format vlastnost data-LINKTYPE = "absolutní cesta" >Format Vybraná doba vyžaduje jiné šířky zobrazení. Například řetězec formátu "T" způsobí TimePicker zobrazení časů v dlouhém formátu a "4:15:26 dop" vyžaduje větší šířku zobrazení než formát krátkého času ("t") "4:15 am". V závislosti na platformě může tento rozdíl způsobit, že TimePicker zobrazení změní šířku v rozložení nebo že se zobrazení zkrátí.

Tip

Je nejvhodnější použít výchozí HorizontalOptions nastavení Fill s TimePicker a bez použití šířky Auto při vkládání TimePicker do Grid buňky.

TimePicker v aplikaci

Ukázka SetTimer obsahuje zobrazení, a Switch na své stránce. TimePickerLze použít k výběru času a v případě, že dojde k zobrazení dialogového okna výstrah, které upozorňuje uživatele na text v za Entry předpokladu, že Switch je zapnutý přepínač. Zde je soubor XAML:

<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>

EntryUmožňuje zadat text připomenutí, který se zobrazí, když dojde k vybranému času. TimePickerJe přiřazená Xamarin_Forms TimePicker _TimePicker_Format "data-LINKTYPE =" absolutní cesta ">Format vlastnost" T "pro dlouhý formát času. Má obslužnou rutinu události připojenou k PropertyChanged události a Switch má obslužnou rutinu připojenou ke své Toggled události. Tyto obslužné rutiny událostí jsou v souboru kódu na pozadí a volají SetTriggerTime metodu:

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);
            }
        }
    }
}

SetTriggerTimeMetoda vypočítá čas časovače na základě DateTime.Today hodnoty vlastnosti a TimeSpan hodnoty vrácené z TimePicker . To je nezbytné, protože DateTime.Today vlastnost vrací hodnotu DateTime udávající aktuální datum, ale s časem půlnoci. Pokud už čas časovače uplynul dnes, předpokládá se, že bude zítra.

Časovač se každou sekundu spouští OnTimerTick metodou, která kontroluje, zda Switch je zapnutý a zda je aktuální čas větší nebo roven času časovače. Když se vyskytne čas časovače, DisplayAlert Metoda zobrazí uživateli dialogové okno s upozorněním jako připomenutí.

Při prvním spuštění ukázky se TimePicker zobrazení inicializuje na 11am. Klepnutím na TimePicker vyvolá výběr času platformy. Platformy implementují výběr času v různých způsobech, ale každý přístup je známý uživatelům této platformy:

– vybrat čas – času

Tip

V Androidu se TimePicker dialog dá přizpůsobit přepsáním CreateTimePickerDialog metody ve vlastním zobrazovacím panelu. To umožňuje například přidání dalších tlačítek do dialogového okna.

Po výběru času se vybraný čas zobrazí v TimePicker :

Vybraný času

Za předpokladu, že Switch je přepnut na pozici, aplikace zobrazí dialogové okno výstrahy s připomenutím uživatele v Entry době, kdy dojde k vybranému času:

Místní nabídka časovače časovače

Jakmile se zobrazí dialogové okno výstraha, Switch dojde k přepnutí na vypnutou pozici.