Telerik TimeSpan Picker pour Xamarin

De retour dans notre version R2 2020 de l'interface utilisateur Telerik pour Xamarin, nous avons étendu notre liste de composants de sélection pour couvrir tous les scénarios de choix de la date, de l'heure ou de l'intervalle de temps. Nous vous avons déjà présenté nos commandes Xamarin DatePicker et TimePicker et il est maintenant temps d’examiner de plus près le contrôle TimeSpanPicker.

Le Telerik TimeSpanPicker pour Xamarin fournit aux utilisateurs un moyen rapide et facile de sélectionner une durée, et l'intervalle de durée peut être mesuré en jours, heures, minutes et jusqu'à quelques secondes. Tout comme tous les autres contrôles de sélection de la suite Telerik UI pour Xamarin TimeSpanPicker est hautement personnalisable – vous pouvez modifier chaque partie du contrôle, y compris la fenêtre contextuelle, les flèches, l'en-tête et le pied de page ainsi que le texte affiché avant et après la sélection de l'intervalle de temps.

Avec quelques ajustements, TimeSpanPicker peut s'intégrer dans n'importe quelle conception d'application. Jetons un œil!

Choisissez le TimeFormat

Comme son nom l'indique, le contrôle TimeSpanPicker fonctionne avec les valeurs de Nullable TimeSpan qui convient pour définir la durée. RadTimeSpanPicker vous permet de choisir un intervalle de temps dans une plage de plus d'un jour. Indiquez si vous devez choisir uniquement des jours, des jours et des heures, ou seulement des heures et des minutes — Tout dépend du paramètre SpinnerFormat . SpinnerFormat prend en charge les chaînes de format standard et personnalisé et selon le format appliqué, la fenêtre contextuelle affichera les flèches correspondantes.

De plus, la propriété DisplayTextFormat permet de configurer la façon dont l'intervalle de temps sélectionné est formaté dès que la fenêtre contextuelle est fermée.

Voici un exemple rapide qui montre les propriétés SpinnerFormat et DisplayTextFormat en action:

 < telerikInput: RadTimeSpanPicker   
      SpinnerFormat  =  "dd  .hh"    
      DisplayStringFormat  =  "d   D  a  y  s ,  h   H  o  u  r  s"   /> 

Le screencast ci-dessous montre le résultat sur un simulateur iOS:

Appliquer des intervalles de temps minimum / maximum

Vous pouvez limiter la durée des intervalles de temps en appliquant une durée minimum et maximum. Par défaut, les utilisateurs peuvent choisir entre 0 et 30 jours – si une période plus longue n'est pas pertinente pour votre scénario, vous pouvez facilement réduire l'intervalle grâce à l'API flexible du contrôle TimeSpanPicker à l'aide des propriétés MinimumTime et MaximumTime :

Style selon vos propres préférences

Vous pouvez modifier l'apparence visuelle de chaque partie de TimeSpanPicker – depuis l'étiquette indiquant l'heure sélectionnée, en passant par la fenêtre contextuelle et les flèches – tout est facilement personnalisable grâce à un tas de styles propriétés.

Jouons un peu avec l'API de style:

 < telerikInput: RadTimeSpanPicker    SpinnerFormat  =  "dd  .hh"   
      DisplayStringFormat  =  "d   D  a  y  s ,  h   H  o  u  r  s"    
      MaximumTime  =  "10: 23: 59: 59"    [19659003]      SpinnerHeaderStyle  =  "{StaticResource spinnerHeaderStyle}"    
   
   
     SpinnerStyle  =  "{StaticResource spinnerStyle}"    

     [19459027yle] SelectionHighlightStyle  =  "{StaticResource selectionHighlightStyle}" >    
      < telerikInput: RadTimeSpanPicker.SelectorSettings >      19659003]      < telerikInput: PickerPopupSelectorSettings   PopupOutsideBackgroundColor  =  "# D9D9D9CC3" [194500722] [1945009CC3"[194500722] [194500722] [1945009CC3]      PopupViewStyle  =  "{StaticResource popupViewStyle}"    

      HeaderStyle  =  "{StaticResource headerStyle}"    
      HeaderLabelText [19659012] =  "Choisissez un intervalle de temps"    
      HeaderLabelStyle  =  "{StaticResource headerLabelStyle}"    
      FooterStyle  =  "{StaticResource footerStyle}"    
      AcceptButtonStyle  =  "{ StaticResource yesNoButtonStyle} "   
      CancelButtonStyle  = " {StaticResource yesNoButtonStyle] [19459227}]  

      AcceptButtonText  =  "Oui"    
      CancelButtonText  =  "Non"  />    
      </  telerikInput: RadTimeSpanPicker.SelectorSettings >    
   </  telerikInput: RadTimeSpanPicker > 

Vous devrez également ajouter les StaticResources référencées à la page:

 < ResourceDictionary >   
      < Style   TargetType  =  "Label"   x: Key  =  "spinnerHeaderStyle" [19659012]>    
      < Setter   Property  =  "TextColor" [19659051] Valeur  =  "# 006D49"  />    
      < Setter   Propriété  =  "HorizontalTextAlignment" [19659051] Valeur  =  "Centre"  />    
      < Setter   Propriété  =  "VerticalTextAlignment"   Valeur  =  "Center"  />    
      </  Style >    
      <[19659010] Style   TargetType  =  "telerikDataControls: RadSpinner"   x: Key  =  "spinnerStyle" >    
      < Setter   Property  =  "ItemStyle" >    
      < Setter.Value >    
      < Style   TargetType  =  "telerikDataControls: SpinnerItemView" >    [19659003]      < Setter   Property  =  "TextColor"   Value  =  "# 797979 "  />    
      < Setter   Property  = " BackgroundColor "  Value  = " # F4F4F4 "  />    
      <  Setter   Propriété  =  "CornerRadius"   Value  =  "15"   />    
      < Se tter   Propriété  =  "Marge"   Valeur  =  "6, 4"   />    
      </  Style >    



  


               




      </  Setter.Value >    
      </  Setter >    
      < Setter   Property  =  "SelectedItemStyle" >    
      < Setter.Value >    
      < Style   TargetType  =  "telerikDataCo ntrols: SpinnerItemView ">    
      < Setter   Property  = [19659013] "TextColor"   Valeur  =  "# 009954"   />    
      < Setter   Property  =  "BackgroundColor"   Value  =  "# DBFFD6"   />    [19659003]      < Setter   Property  =  "CornerRadius"   Value  =  "15"   />    
      < Setter   Property  =  "Marge "  Valeur  = " 6, 4 "  />    [1 9659003]      </  Style >    
      </  Setter.Value >    
      </  Setter [19659012]>    
      </  Style >    [19659003]      < Style   TargetType  =  "telerikPrimitives: RadBorder"   x: Key  = [19659013] "selectionHighlightStyle" >    
      < Setter   Property  =  ] "BorderColor"   Valeur  =  "# 009954"  />    [19659003]      < Setter   Property  =  "BorderThickness"   Value  =  "1"  />    
      < Setter   Property  =  "Rembourrage "  Valeur  = " 0,6,0,6 " />    
      < Setter   Propriété  =  "HeightRequest"   Value  =  "40"  />    
      < Setter   Property  =  "VerticalOptions"   Value  =  "Centre " />    
      < Setter   Property  = [1 9659013] "BackgroundColor"   Valeur  =  "# F9F9F9"  />    
      < Setter   Propriété  =  "CornerRadius"   Value  =  "10"   />    [19659003]      </  Style >    
      < Style   TargetType  =  "telerikInput: PickerPopupContentView"   x: Key  =  "popupViewStyle" >    
      < Setter   Property  =  "BackgroundColor"   Value  = [19659013] "Blanc"  />    
      <  Setter   Propriété  =  "WidthRequest"   Value  =  "250"  />    
      < Setter   Property  =  "CornerRadius"   Value  =  "10"   />    
      </  Style >    [19659003]      < Style   TargetType  =  "telerikInput: PickerPopupHeaderView"   x: Key  =  "headerStyle" >    
      < Setter   Property  =  "BackgroundColor"   Valeur  =  "# 67CE52"  />    
      < Setter   Propriété  =  "HeightRequest"   Value  =  "60"  />    
      < Setter   Property  =  "HorizontalOptions"   Value  =  "FillAndExpand"  />    
      < Setter   Property  ] =  "VerticalOptions"   Value  =  "FillAndExpand"  />    
      </  Style >    
      < Style   TargetType  =  "Libellé"   x: Clé  =  "headerLabelStyle" >    
      < Setter   Property  =  "TextColor"   Value  =  "Blanc"  />    
      < Setter   Propriété  = [19659013] "HorizontalOptions"   Valeur  =  "Center"  />    
      < Setter   Property  =  "VerticalOptions"   Value  =  "Center"  />    
      < Setter   Property  =  "FontSize"   Value  =  "Default" [19659012] />    
      </  Style >    
      < Style   TargetType  =  "telerikInput: PickerPopupFooterView"   x: Key  =  "footerStyle" >    
      < Setter [19659051] Propriété  =  "BackgroundColor"   Valeur  =  "# 67CE52"  />    
      </  Style >    
      <[19659010] Style   TargetType  =  "Button"   x: Key  =  "yesNoButtonStyle" >    
      < Setter   Property  =  "BackgroundColor"   Valu e  =  "Transparent"  />    
      < Setter [19659051] Propriété  =  "TextColor"   Valeur  =  "White"  />    
      </  Style >    
   </  ResourceDictionary > 

Et voici le résultat sur Android et iOS:

Autres fonctionnalités utiles

Il y a encore quelques fonctionnalités cela vaut la peine d'être mentionné car ils peuvent être utiles dans divers scénarios:

• Localisation - vous pouvez traduire ce qui est utilisé dans les textes TimeSpanPicker dans d'autres langues, afin que votre application puisse être adaptée à différentes régions. Consultez le Localization pour plus d'informations sur les chaînes de localisation exactes.
• Incremental Time Steps - les curseurs de la fenêtre contextuelle affichent toutes les valeurs disponibles pour les jours, les heures, les minutes et les secondes. Si vous souhaitez afficher des intervalles de 15 minutes seulement, qui peuvent être facilement configurés. RadTimeSpanPicker fournit des propriétés «step», à savoir DayStep, HourStep, MinuteStep et SecondStep, afin que vous puissiez ajuster les doubles flèches en fonction du scénario. - lorsqu'aucun intervalle de temps n'est sélectionné et que la fenêtre contextuelle est ouverte, vous pouvez spécifier la valeur par défaut de chaque double flèche avec la propriété DefaultHighlightedTime - cela est utile si vous souhaitez mettre en évidence la valeur la plus probable pour les utilisateurs

Dites-nous ce que vous pensez

Nous aimerions savoir ce que vous pensez du contrôle TimeSpanPicker Xamarin et comment nous pouvons l'améliorer. Si vous avez des idées de fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre Telerik UI for Xamarin Feedback portal .

N'oubliez pas de consulter les différentes démos du contrôle dans notre SDK Sample Browser et dans Telerik UI for Xamarin Demos application.

Si vous n'avez pas encore essayé la suite Telerik UI for Xamarin prenez-la faites un essai avec un essai gratuit de 30 jours offrant toutes les fonctionnalités et commandes à votre disposition à un coût nul.

Bon codage avec nos commandes!