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.
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”
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 '"
;
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.
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));
}
À 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