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!

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

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:

Localization pour plus d'informations sur les chaînes de localisation exactes.

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!