Fermer

avril 3, 2019

Choisissez des intervalles de temps avec TimeSpanPicker for WinForms


Plus besoin d'utiliser plusieurs sélecteurs de date / heure pour configurer vos intervalles de temps. Nous sommes heureux de vous présenter le tout nouveau contrôle TimeSpanPicker pour les applications WinForms. Plus d'informations sur le nouveau contrôle dans l'article suivant

Nous avons reçu plusieurs demandes via le portail de commentaires WinForms afin d'ajouter un sélecteur de durée à la suite de l'interface utilisateur Telerik pour WinForms . et ils n'ont pas été négligés. Au cas où vous l'auriez manqué, dès le début de l'année, avec la version de Telerik R1 2019 le nouveau contrôle TimeSpanPicker est disponible dans la suite .

Le RadTimeSpanPicker est un composant de l'interface utilisateur qui permet de contrôler totalement la sélection d'une période et d'une durée spécifiques dans certaines plages à l'aide des composants intégrés pendant des jours, des heures, des minutes, des secondes et des millisecondes .

Rencontrez RadTimeSpanPicker

Imaginez que nous devions mettre en place un système de réservation de vol. Premièrement, nous devons placer deux listes déroulantes pour les destinations de départ et d’arrivée, un DateTimePicker pour choisir la date du vol et éventuellement un filtre pour déterminer la durée de vol nécessaire. Ici, dans la dernière partie, intervient RadTimeSpanPicker.

 vol-sélecteur-heure "title =" vol-sélecteur-temps "style =" vertical-align: middle; "/> [19659007] Ce que nous avons fait ci-dessus pour configurer le contrôle est simplement de le placer dans le formulaire et de définir son format, puis nous obtenons la valeur saisie par l'utilisateur à partir de la propriété Value. Nous pouvons également utiliser l'événement ValueChanged pour être averti lorsque la propriété Value C'est aussi simple que cela.</p data-recalc-dims=

this .radTimeSpanPicker1.Format = "'Sous' hh 'heures'" ;

private privé . RadTimeSpanPicker1_ValueChanged ( objet expéditeur, EventArgs e)

{

TimeSpan flightDuration = this .radTimeSpPicker1 // filtre les vols

}

Autres fonctionnalités utiles du contrôle:

  • Valeurs négatives – utiles pour afficher les cas de retard dans le temps [19659028] Liaison – via la simple liaison de données
  • Localisation – Faites en sorte que la commande parle une langue quelconque avec le fournisseur de localisation approprié
  • EditMode – différents modes d’édition sont fournis pour capturer les différents cas d’utilisation dans lesquels la commande peut être utilisée.
        

    • Masque – limite l'utilisateur à simplement utiliser la zone de texte pour modifier la valeur
    • Popup – limite l'utilisateur à choisir uniquement les valeurs prédéfinies dans la fenêtre contextuelle
    • Combiné – donne à l'utilisateur une totale flexibilité
    •     

  • Propriétés d'étape – définissez les étapes pour chaque composant, par ex. de 10 minutes, de 2 heures, etc.
  • ReadOnly – Ceci vous permet d'afficher des informations sur la durée à l'utilisateur sans permettre l'édition, ou vous permet d'activer / désactiver la fonction d'édition selon une logique métier.
  • Null Values ​​support – the Le contrôle accepte heureusement la valeur null, ce qui est utile dans les scénarios liés aux données. Dans ce cas, la propriété NullText peut être utilisée pour afficher le texte d'invite.
  • SpinButtons – une fonctionnalité pratique que vous pouvez activer pour permettre aux utilisateurs de modifier la valeur à l'aide de la fonction intégrée. boutons dans la zone de texte
  • Différents événements sont à votre disposition pour vous informer des modifications apportées à la valeur (ValueChanging et ValueChanged), des fenêtres contextuelles ouvertes / fermées (PopupOpened / Closed), ainsi que du point d'extensibilité pratique où nous pouvons nous connecter. logique personnalisée (événements ComponentCreated et ComponentsCreated de PopupContentElement) – pour en savoir plus sur ce sujet plus tard

Structure

Le contrôle comprend deux éléments principaux : RadMaskedEditBoxElement et RadTimeSpanPickerContentElement.

RadMaskedEditBoxElement

RadMaskedEditBoxElement permet aux utilisateurs de modifier la valeur directement dans la zone de texte tout en la validant . La propriété Format spécifie quelles parties d'une valeur de durée peuvent être modifiées. Le format par défaut est “dd: hh: mm: ss.fff”

 sélecteur d'intervalle de temps

Pour ajouter un contenu spécifique à la chaîne de format, vous devrez le délimiter par des guillemets simples. Voici un exemple qui montre cela.

this .radTimeSpanPicker1.Format = "jj" jours, 'hh' heures, 'mm' minutes, 'ss' secondes, 'fff' millisecondes '";

 intervalle de temps format personnalisé du sélecteur

RadTimeSpanPickerContentElement

RadTimeSpanPickerContentElement est l'élément principal de la fenêtre contextuelle et héberge une collection de composants . Chaque composant représente une partie différente de l'objet TimeSpan.

 contextuel du sélecteur d'intervalle de temps

Nous fournissons cinq composants de composant d'intervalle de temps par défaut, vous permettant ainsi de définir facilement les intervalles de temps que vous souhaitez sélectionner:

  • DayTimeSpanPickerComponent
  • HourTimeSpanPickerComponent
  • MinuteTimeSpanPickerComponent
  • SecondTimeSpanPickerComponent
  • MillisecondTimeSpanPickerComponent.

Les composants sont créés chaque fois que la valeur de la propriété TimeSpanPickerElement Format est modifiée, en fonction du format souhaité (par exemple: si le format est «jj: hh», les composants de jour et d'heure sont créés lorsque

Composants personnalisés

Nous avons fourni un moyen de gérer les scénarios nécessitant également un intervalle de temps personnalisé.

Par exemple, si vous souhaitez que l'utilisateur puisse choisir À une semaine d'intervalle, vous pouvez facilement l'implémenter en créant un BaseTimeSpanPickerComponent personnalisé et en remplaçant ses méthodes GetValueInTicks () et SetValue (valeur TimeSpan). GetValueInTicks renvoie une valeur TimeSpan sous forme de graduations correspondant à l'élément sélectionné dans le composant d'interface utilisateur. SetValue est utilisé pour définir la valeur du composant et choisir la partie de la valeur TimeSpan que nous voulons utiliser.

public override long GetValueInTicks ()

{[19659019] double weeks = this .WeeksListTimeSpanPickerUIComponent.GetSelectedValue ();

du retour TimeSpan.FromDays (weeks * 7). 19659012]

public override nul SetValue (TimeSpan value)

[

{

double semaines = value.Days / 7d;

this .WeeksListTimeSpanPickerUIComponent.SetSelectedValue (weeks);

}

Le composant BaseTimeSpanPickerComponent a une partie UI, utilisée pour afficher les valeurs aux utilisateurs finaux. Par défaut, nous utilisons RadListElement pour répertorier toutes les valeurs disponibles. Ajoutons maintenant un texte spécifique aux valeurs affichées dans la liste. Nous allons remplacer la méthode CreateItemsSource, qui est utilisée pour créer nos éléments en fonction de trois propriétés: Minimum Maximum et Étape . Dans ce cas, nous personnalisons le texte affiché et l'alignons à droite. Voici la composition de notre interface utilisateur personnalisée:

public base (propriétaire)

{}

protégé outrepasser vide CreateItemsSource ()

[

19659114] base .CreateItemsSource ();

pour chaque (élément RadListDataItem dans ce .ListElement.Items)

. item.Text = item.Value + "weeks" ;

item.TextAlignment = ContentAlignment.MiddleRight;

}

]. 19659105] [1 9659106] public double GetSelectedValue ()

{

a retourné ce .GetValue ();

}. 19659105]

public void SetSelectedValue ( double valeur)

{

cette . [469] .SetValue (valeur);

}

}

Pour inclure notre composant personnalisé, nous devons outrepasser la méthode CreateVisualElement de notre WeekTimeSpanPickerComponent. Nous allons également définir nos valeurs Minimum, Maximum et Step et définir le texte de l'en-tête. La classe entière se présente comme suit:

public class WeekTimeSpanPickerCompon: ] (propriétaire)

{

ce .Minimum = 0;

ce .Maximum = 10;

ce ] .Etape = 0.5;

this .UpdateLocalization ();

}

public override Base de temps pour la restauration de votre téléphone 19659023] {

return new WeeksListTimeSpanPickerUIComponent ( ceci ];

]. ] WeeksListTimeSpanPicker UIComponent WeeksListTimeSpanPickerUIComponent

{

get comme }

}

public override long GetValueInTicks ()

{

double semaines = this .WeeksListTimeSpanPickerUIComponent.GetSelectedValue ();

retournent TimeSpan.FromDays (semaines * 7) .Ticks;

[1965905]. 19659072] public override null SetValue (valeur TimeSpan)

{

double semaines = valeur.Days / 7d;

this .WeeksListTimeSpanPickerUIComponent.SetSelectedValue (weeks);

}

public annulez .

this .TimeSpanPickerUIComponent.HeaderText = "Certaines semaines" ;

}

}

La dernière étape consiste à indiquer à notre RadTimeSpanPicker d'utiliser ce composant nouvellement créé. Pour ce faire, nous devons souscrire à l'événement ComponentsCreated de PopupContentElement, dans lequel nous allons supprimer tous les composants générés par défaut et insérer notre composant personnalisé.

this .radTimeSpanPicker1.PopupContentElement.ComponentsCreated + = this .PopupContentElement_ComponentsCreated;

private void ] ITimeSpanPickerContentElement contentElement = this .radTimeSpanPicker1.PopupContentElement;

ContentElement.Components.Clear () (contentElement));

}

 semaines de sélection d'intervalle de temps

À la fin, nous ajouterons juste quelques lignes de code supplémentaires pour montrer comment ajouter un nouveau bouton à côté de Cl bouton ose, qui sera utilisé pour réinitialiser la valeur de RadTimeSpanPicker.
[1965916] comme
RadTimePpanel = (radTimeSpanPicker1.P]; comme ;

clearButton.Click + = ClearButton_Click;

buttonPanel.LayoutPanel.Children.Add (clearButton);

Et un exemple de code qui montre comment accéder au panneau avec des boutons et effacer la valeur de RadTimeSpanPicker:

private void ClearButton_Click ( object expéditeur, EventArgs e)

{

Bouton RadButtonElement = (RadButtonElement) =

19659020] TimeSpanPickerDoneButtonElement buttonPanel = button.FindAncestor ();

buttonPanel.Owner.SetValueAndClose ( null )

; button " title="time-span-picker-popup-clear-button" style="vertical-align: middle;"/>

Essayez et partagez vos commentaires

Pour plus de détails sur RadTimeSpanPicker, vous pouvez consulter la documentation en ligne et consulter le site . démos . Pour toute demande de fonctionnalité ou de contrôle supplémentaire, assurez-vous de les connecter au portail WinForms Feedback .

Si vous recherchez une boîte à outils complète pour l'interface utilisateur WinForms pour votre projet de bureau actuel ou à venir, l'opportunité d'explorer l'interface utilisateur Telerik pour WinForm, vous pouvez trouver des informations détaillées sur la page produit . Vous pouvez également télécharger un essai gratuit de 30 jours pour l'explorer en profondeur et déterminer s'il conviendra parfaitement à votre application.


Les commentaires sont désactivés en mode aperçu.




Source link