La collecte des entrées utilisateur est une partie importante de chaque application et avec nos contrôles d'entrée Xamarin, vous pouvez le faire avec style. Dans notre version R2 2020, nous avons ajouté un nouveau composant TimePicker à la suite Telerik UI pour Xamarin qui aidera dans les scénarios où les utilisateurs doivent choisir une heure.
Avec notre TimePicker pour Xamarin vous pouvez permettre aux utilisateurs de votre application de choisir facilement une heure dans la plage d'une seule journée. Le contrôle est hautement personnalisable pour garantir la cohérence de l'expérience utilisateur de votre application Xamarin.Forms. Dans cet article de blog, je vais vous familiariser avec les fonctionnalités du contrôle TimePicker en détail. Je suis sûr que vous allez l'adorer!
Choisissez une heure
Le seul but du contrôle TimePicker est de fournir aux utilisateurs un moyen simple et intuitif de choisir une heure. Il affiche une liste de valeurs de temps dans une fenêtre contextuelle où les «éléments» de temps individuels tels que les heures, les minutes et les secondes sont visualisés via des filateurs. Le type de filature affiché dépend du format d'heure défini – nous l'examinerons dans la section suivante.
Choisissez le format d'heure
RadTimePicker prend en charge les formats d'heure standard et personnalisés, que vous ayez seulement besoin des heures et des minutes ou au format 12 ou 24 heures, tout peut être défini via la propriété SpinnerFormat . Selon le format que vous choisissez, le contrôle affiche les contrôles de spinner avec des valeurs préremplies à sélectionner.
De plus, via DisplayStringFormat vous pouvez appliquer un format différent à la valeur de temps sélectionnée lorsque la fenêtre contextuelle est fermée.
Consultez un exemple rapide ci-dessous sur la façon dont les deux propriétés peuvent être appliquées au contrôle TimePicker:
< telerikInput: RadTimePicker x: Name = "timePicker" [19659002] SpinnerFormat = "HH: mm"
[1945902424] DisplayStringFormat = "hh: mm tt" />
Voici le résultat sur un émulateur Android lorsque TimePicker est ouvert en tant que popup et après une sélection est effectuée. Pour les besoins de l'exemple, j'ai utilisé un exemple d'application de livraison de nourriture.
Apply Min / Max Time Values
Dans certains cas, vous pouvez ne pas vouloir afficher toutes les heures de la journée, par exemple, dans le cas d'un service de livraison, il convient de n'afficher que les heures pendant lesquelles le service est disponible. Ceci peut être facilement réalisé grâce aux propriétés MinimumTime et MaximumTime du TimePicker qui permettront de choisir l'heure uniquement dans la plage de temps définie.
Passons à notre exemple et ajustons valeurs de temps min et max:
< telerikInput: RadTimePicker x: Name = "timePicker"
SpinnerFormat = "HH: mm"
DisplayStringFormat = "hh : mm tt "
MinimumTime = " 11:00 "
MaximumTime = "22:00" />
Pour mieux illustrer le résultat, j'ai créé ed une courte vidéo qui montre la fenêtre contextuelle avec les valeurs de temps disponibles:
Choisissez les intervalles de temps
Par défaut, le TimePicker affiche toutes les valeurs disponibles pour les heures, minutes, secondes, etc. Selon le scénario en cours, vous devrez peut-être n'afficher que certaines valeurs de temps. Pour continuer notre exemple avec le service de livraison, lors du choix d'un délai de livraison, il est plus pratique d'afficher uniquement des intervalles de 15 minutes par heure. Cela peut être facilement configuré via la propriété MinuteStep du contrôle. HourStep et SecondStep sont également pris en charge pour donner plus de flexibilité lors de la configuration des valeurs d'heure disponibles.
< telerikInput: RadTimePicker x: nom = "timePicker"
SpinnerFormat = "HH: mm"
DisplayStringFormat = "hh: mm tt"
MinimumTime = "11:00"
MaximumTime = "22 : 00 "
MinuteStep = " 15 " />
Vérifiez le spinner des minutes maintenant à l'intérieur la fenêtre contextuelle:
Style selon vos propres exigences
Profitez de l'API de style flexible du contrôle TimePicker – vous pouvez modifier l'apparence de la fenêtre contextuelle, les filateurs, l'en-tête , pied de page, ainsi que le texte qui s'affiche lorsque l'heure est sélectionnée. TimePicker est conçu d'une manière qui, avec quelques ajustements, peut s'adapter à n'importe quel design. Pour des informations détaillées sur les capacités de style du contrôle, veuillez consulter notre documentation .
Pour terminer l'exemple d'application de livraison, personnalisons le TimePicker comme suit:
< telerikInput: RadTimePicker [19659012] x: Nom = "timePicker" Grid.Row = "1" Grid.Column = "1"
SpinnerFormat = "HH: mm"
DisplayStringFormat = "hh: mm tt"
MinimumTime = ] "11:00" MaximumTime = "22:00"
MinuteStep = "15"
SpinnerHeaderStyle = "{StaticResource spinnerHeaderStyle}"
SpinnerStyle = "{StaticResource spinnerStyle}"
SélectionHighlightStyle = "{StaticResource selectionHighlightStyle}" >
< telerikInput: RadTimePicker.SelectorSettectorSelectorSettector >
< telerikInput: PickerPopupSelectorSettings PopupOutsideBackgroundColor = [1965909]
PopupV iewStyle = "{StaticResource popupViewStyle}"
HeaderStyle = "{StaticResource headerStyle } "
HeaderLabelText = " Choisissez le délai de livraison "
] HeaderLabelStyle = "{StaticResource headerLabelStyle}"
FooterStyle = "{StaticResource footerStyle}"
AcceptButtonStyle = "{StaticResource acceptButtonStyle} "
CancelButtonStyle = "{StaticResource cancelButtonStyle}" />
</ telerikInput: RadTimePicker.SelectorSettings >
</ telerikInput: RadTimePicker >
Ajoutez la page référencée: Resources vers les ressources StaticResources
< ResourceDictionary >
< Style TargetType = " Étiquette " x: Key = " spinnerHeaderStyle ">
< Setter Propriété = "TextColor" Valeur = "# 7F7F7F" />
< Setter Propriété [19659013] = "FontAttributes" Valeur = "Bold" />
< Setter Propriété = "HorizontalOptions" Valeur = "FillAndExpand" />
< Setter Propriété = "VerticalOptions" Valeur = "FillAndExpand" />
< Setter Propriété = "HorizontalTextAlignment" " Valeur [19659013] = "Centre" />
< Setter Propriété = "VerticalTextAlignment" Valeur = "Centre" />
</ Style >
< Style TargetType = " telerikDataControls: RadSpinner " x: Key = " spinnerStyle ">
<[[19659011] Setter Propriété = "ItemStyle" >
< Setter .Valeur >
< Style TargetType = "telerikDataControls: SpinnerItemView ">
< Setter Propriété = " TextColor " ] Valeur = "# 797979" /> [19659002] < Setter Propriété = "BackgroundColor" Valeur = "# F2F2F2 " />
< Setter Propriété = " CornerRadius "[19659012] Valeur = "10" />
< Setter Propriété = "Marge" Valeur = "6, 4" />
</ Style >
</ Setter.Value [19659013]>
</ Sette r >
< Setter Propriété = "SelectedItemStyle" [19659013]>
< Setter.Value >
< Style TargetType = "telerikDataControls: SpinnerItemView" >
] < Setter Propriété = "TextColor" Valeur = "# 00B5DC" />
< Setter Propriété = "BackgroundColor" Valeur = "# E4F3F9" />
< Setter Propriété = "CornerRadius" Valeur = "10" />
< Setter Propriété = "Marge" Valeur [19659013] = "6, 4" />
</ Style >
</ Setter.Value >
</ Setter >
</ Style >
< Style TargetType = "telerikPrimitives: RadBorder" x: Key [1 9659013] = "selectionHighlightStyle" >
< Setter Propriété = "BorderColor" Valeur = "# 00B5DC" />
< Setter Propriété = "BorderThickness" Valeur = "1" />
< Setter Propriété = "Rembourrage" Valeur = "0,6,0,6 " />
< Setter Propriété = " HeightRequest "[19659012] Valeur = "40" />
<[1965901111] ] Setter Propriété = "VerticalOptions" Valeur = "Centre" />
</ Style >
< Style TargetType = "Label" x: Key = "displayLabelStyle" >
< Setter Propriété = [19659014] "TextColor" Valeur = "Black" />
<[19659011] Setter Propriété = "VerticalTextAlignment" Valeur = "Center" />
< Setter Propriété = "HorizontalTextAlignment" Valeur = [19659014] "Centre" />
< Setter Propriété = "HeightRequest" Valeur = "50" />
</ [19659011] Style >
< Style TargetType = "Label" x: Key = "placeholderLabelStyle" >
< Setter Propriété = "TextColor" Valeur = [[19659014] "# 4A4949" />
< Setter Propriété = [19659014] "VerticalTextAlignment" Valeur = "Centre" />
< Setter Propriété = "HorizontalTextAlignment" Valeur = "Center" /> [19659002] < Setter Propriété = "HeightRequest" Valeur = "50" />
</ Style >
< Style TargetType = "telerikInput: PickerPopupHeaderView" x: Key = "headerStyle" >
] < Setter Propriété = "BackgroundColor" Valeur = "# 00B5DC" />
< Setter Propriété = [19659014] "HeightRequest" Valeur = "60" />
<[[19659011] Setter Propriété = "Marge" Valeur = "0" />
< Setter Propriété = "Rembourrage" Valeur = "0" />
< Setter Propriété = "HorizontalOptions" Valeur = [[19659014] "FillAndExpand" />
< Setter Propriété = "VerticalOptions" Valeur = "FillAndExpand" />
[1945902] 8] </ Style >
< Style TargetType = "Label" x: Key = "headerLabelStyle" >
< Setter Propriété = "TextColor" Valeur = "Blanc" />
< Setter ] Propriété = "HorizontalOptions" Valeur = "Centre" />
< Setter Propriété = "VerticalOptions" Valeur = "Centre" /> [19659002] < Setter Propriété = "FontSize" Valeur [1965912] 013] = "Moyen" />
</ Style > [19659217] < Style TargetType = "telerikInput: PickerPopupFooterView" x: Key = "footerStyle" > [19659002] < Setter Propriété = "BackgroundColor" Valeur = "Transparent" [19659013] />
</ Style >
< Style TargetType = "telerikInput: PickerPopupContentView" x: Key = "popupViewStyle" >
< Setter Propriété = "BackgroundColor" Valeur = [1 9659014] "Blanc" />
< Setter Propriété = "WidthRequest" Valeur = "270" />
</ [19659011] Style >
< Style TargetType = "Button" x: Key = "acceptButtonStyle" >
< Setter Propriété = "BackgroundColor" Valeur = [[19659014] "Transparent" />
< Setter Propriété = "Texte" Valeur = "OK" />
[19459090] 17] < Setter Propriété = "TextColor" Valeur = "# 00B5DC" />
</ Style >
< Style TargetType = "Button" x: Key = "cancelButtonStyle" >
< Setter Propriété = "BackgroundColor" Valeur = "Transparent" />
< Setter Propriété = "Texte" Valeur = "X" />
< Setter Propriété = "TextColor" Valeur = "# 00B5 DC " />
</ Style >
</ ResourceDictionary >
Voici le résultat final après avoir complètement modifié l'apparence du contrôle RadTimePicker:
Laissez-nous Sachez ce que vous pensez
Nous aimerions savoir ce que vous pensez du contrôle Time Picker 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 l'interface utilisateur Telerik pour Xamarin Démos .
Si vous n'avez pas encore essayé la suite Telerik UI pour Xamarin prenez-la faites un tour 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!
Source link