Xamarin.Forms中的Nullable TimePicker

Question

我使用TimePicker在我的應用程序中顯示時間。當時間已經設置，然後顯示正確，但是當時間沒有設置時，它顯示默認的上午12:00。所以我只想在未設定時間時顯示null值。 是否可以在Xamarin Forms中將nullable的值設置爲TimePicker？

Answer 1

我用這個

/// <summary> 
/// DatePicker der null Werte erlaubt 
/// </summary> 
public class CustomDatePicker : DatePicker 
{ 
    /// <summary> 
    /// PropertyName für die <c>NullableDate</c> Property 
    /// </summary> 
    public const string NullableDatePropertyName = "NullableDate"; 
    /// <summary> 
    /// Die BinableProperty 
    /// </summary> 
    public static readonly BindableProperty NullableDateProperty = BindableProperty.Create<CustomDatePicker, DateTime?>(i => i.NullableDate, null, BindingMode.TwoWay, null, NullableDateChanged); 
    /// <summary> 
    /// Datumswert welches null Werte akzeptiert 
    /// </summary> 
    public DateTime? NullableDate 
    { 
     get 
     { 
      return (DateTime?)this.GetValue(NullableDateProperty); 
     } 
     set 
     { 
      this.SetValue(NullableDateProperty, value); 
     } 
    } 
    /// <summary> 
    /// Der Name der <c>NullText</c> Property 
    /// </summary> 
    public const string NullTextPropertyName = "NullText"; 
    /// <summary> 
    /// Die BindableProperty 
    /// </summary> 
    public static readonly BindableProperty NullTextProperty = BindableProperty.Create<CustomDatePicker, string>(i => i.NullText, default(string), BindingMode.TwoWay); 
    /// <summary> 
    /// Der Text der angezeigt wird wenn <c>NullableDate</c> keinen Wert hat 
    /// </summary> 
    public string NullText 
    { 
     get 
     { 
      return (string)this.GetValue(NullTextProperty); 
     } 
     set 
     { 
      this.SetValue(NullTextProperty, value); 
     } 
    } 
    /// <summary> 
    /// Der Name der <c>DisplayBorder</c> Property 
    /// </summary> 
    public const string DisplayBorderPropertyName = "DisplayBorder"; 
    /// <summary> 
    /// Die BindableProperty 
    /// </summary> 
    public static readonly BindableProperty DisplayBorderProperty = BindableProperty.Create<CustomDatePicker, bool>(i => i.DisplayBorder, default(bool), BindingMode.TwoWay); 
    /// <summary> 
    /// Gibt an ob eine Umrandung angezeigt werden soll oder nicht 
    /// </summary> 
    public bool DisplayBorder 
    { 
     get 
     { 
      return (bool)this.GetValue(DisplayBorderProperty); 
     } 
     set 
     { 
      this.SetValue(DisplayBorderProperty, value); 
     } 
    } 

    /// <summary> 
    /// Erstellt eine neue Instanz von <c>CustomDatePicker</c> 
    /// </summary> 
    public CustomDatePicker() 
    { 
     this.DateSelected += CustomDatePicker_DateSelected; 

     this.Format = "dd.MM.yyyy"; 
    } 
    /// <summary> 
    /// Wird gefeuert wenn ein neues Datum selektiert wurde 
    /// </summary> 
    /// <param name="sender">Der Sender</param> 
    /// <param name="e">Event Argumente</param> 
    void CustomDatePicker_DateSelected(object sender, DateChangedEventArgs e) 
    { 
     this.NullableDate = new DateTime(
      e.NewDate.Year, 
      e.NewDate.Month, 
      e.NewDate.Day, 
      this.NullableDate.HasValue ? this.NullableDate.Value.Hour : 0, 
      this.NullableDate.HasValue ? this.NullableDate.Value.Minute : 0, 
      this.NullableDate.HasValue ? this.NullableDate.Value.Second : 0); 
    } 

    /// <summary> 
    /// Gefeuert wenn sich <c>NullableDate</c> ändert 
    /// </summary> 
    /// <param name="obj">Der Sender</param> 
    /// <param name="oldValue">Der alte Wert</param> 
    /// <param name="newValue">Der neue Wert</param> 
    private static void NullableDateChanged(BindableObject obj, DateTime? oldValue, DateTime? newValue) 
    { 
     var customDatePicker = obj as CustomDatePicker; 

     if (customDatePicker != null) 
     { 
      if (newValue.HasValue) 
      { 
       customDatePicker.Date = newValue.Value; 
      } 
     } 
    } 
} 

Answer 2

您可以創建一個自定義的View與TimePicker和Label。如果沒有選擇時間，則會出現「hh：mm」，否則時間將顯示在標籤上。要顯示timepicker對話框，有一個tapGestureRecognizer，它會在點擊標籤時將焦點設置爲timepicker。

public class NullableTimePicker : ContentView 
{ 
    private const string NullTimeLabel = "hh : mm"; 
    private readonly TimePicker _timePicker; 
    private readonly Label _label;     

    public static readonly BindableProperty TimeProperty = BindableProperty.Create<NullableTimePicker, TimeSpan?>(t => t.Time, null, BindingMode.TwoWay, propertyChanged: OnTimeChanged); 

    public NullableTimePicker() 
    { 
     _label = new Label 
     { 
       Text = NullTimeLabel, 
       HorizontalOptions = LayoutOptions.FillAndExpand, 
       VerticalOptions = LayoutOptions.Fill, 
       HorizontalTextAlignment = TextAlignment.Start, 
       VerticalTextAlignment = TextAlignment.Center, 
       TextColor = Color.Black, 
       FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)) 
     }; 

     _timePicker = new TimePicker 
     { 
       IsVisible = false, 
       HorizontalOptions = LayoutOptions.FillAndExpand, 
       VerticalOptions = LayoutOptions.Fill 
     }; 

     Content = new StackLayout 
     { 
       Children = 
       { 
        _label, 
        _timePicker 
       }, 
       Padding = 0, 
       Spacing = 0, 
       Margin = 0 
     }; 

     Padding = 0; 
     Margin = 0; 

     var tapGestureRecognizer = new TapGestureRecognizer(); 
     tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped; 
     GestureRecognizers.Add(tapGestureRecognizer); 

     _timePicker.PropertyChanged += timePicker_PropertyChanged; 

     PropertyChanged += NullableTimePicker_PropertyChanged; 
    } 

    private void NullableTimePicker_PropertyChanged(object sender, PropertyChangedEventArgs e) 
    { 
     if (_label != null && e.PropertyName == IsEnabledProperty.PropertyName) 
     { 
       _label.TextColor = IsEnabled ? Color.Black : Color.Gray; 
     } 
    } 

    private void timePicker_PropertyChanged(object sender, PropertyChangedEventArgs e) 
    { 
     if (e.PropertyName == TimePicker.TimeProperty.PropertyName && _timePicker != null) 
     { 
        Time = _timePicker.Time; 
     } 
    } 

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e) 
    { 
      if (IsEnabled == false) 
      { 
       return; 
      } 

      if (_timePicker.IsFocused) 
      { 
       _timePicker.Unfocus(); 
      } 

      _timePicker.Focus(); 
    } 

    private static void OnTimeChanged(BindableObject bindable, TimeSpan? oldvalue, TimeSpan? newvalue) 
    { 
      var nullableTimePicker = bindable as NullableTimePicker; 
      if (nullableTimePicker != null && oldvalue != newvalue) 
      { 
       nullableTimePicker.Time = newvalue; 
      } 
    } 

    public TimeSpan? Time 
    { 
      get 
      { 
       return GetValue(TimeProperty) as TimeSpan?; 
      } 
      set 
      { 
       SetValue(TimeProperty, value); 

       if (value.HasValue && _timePicker.Time != value) 
       { 
        _timePicker.Time = value.Value; 
       } 
       SetLabelText(value); 
      } 
     } 

     private void SetLabelText(TimeSpan? value) 
     { 
      _label.Text = value.HasValue ? ConvertTimeSpanToString(value.Value) : NullTimeLabel; 
     }   
}