Découvrez le nouvel AgendaView dans l'interface utilisateur Telerik pour Xamarin. Cette fonctionnalité, implémentée de manière native sur iOS et Android, vous offre une nouvelle façon de visualiser les rendez-vous dans votre application.
Avec la version R1 2020 de l'interface utilisateur Telerik pour Xamarin nous avons ajouté une nouvelle vue mode pour le contrôle Telerik Xamarin Calendar – le mode AgendaView. Cette nouvelle option est disponible pour les plateformes iOS et Android. La fonctionnalité est implémentée nativement sur les deux technologies, ce qui garantit des performances rapides et fluides.
Le mode d'affichage de l'agenda affiche une liste de rendez-vous regroupés par date, offrant un moyen pratique d'afficher les événements de façon chronologique. Cette option permet aux utilisateurs de voir tous les rendez-vous à venir et leurs détails en faisant simplement défiler une liste sans fin sans avoir besoin de changer les jours visibles, ce qui en fait un excellent choix lorsque vous souhaitez visualiser les événements à venir pendant plusieurs jours ou un tout semaine à venir.
Les implémentations natives du mode d'affichage dans Android et iOS prennent en charge le défilement bidirectionnel sans fin qui apporte d'excellentes performances avec une utilisation minimale de la mémoire.
< telerikInput: RadCalendar x: Name [19659012] = "calendrier"
ViewMode = "Agenda" >
</ telerikInput: RadCalendar >
Vous pouvez ajouter autant de rendez-vous que nécessaire en définissant simplement la source de rendez-vous du contrôle. Par exemple:
this .calendar.AppointmentsSource = new ObservableCollection ()
{
nouveau Rendez-vous ()
{
StartDate = DateTime.Today.AddHours (11),
EndDate = DateTime.Today.AddHours (11) .AddMinutes (15),
Title = "Daily SCRUM"
Color = Color.FromHex ( "55A6FF" ),
},
nouveau Rendez-vous () [19659002] {
StartDate = DateTime.Today.AddDays (-7) .AddHours (10),
EndDate = DateTime.Today.AddDays (-7) .AddHours (11),
Titre = "Tokyo Deall call"
Color = Color.FromHex ( "FFA200" )
},
. . .
};
Maintenant que nous avons l'élément Calendar en mode agenda et que nous avons ajouté certains événements, nous pouvons continuer à définir des formats d'heure personnalisés et personnaliser le
Paramètres de format de date et d'heure de Xamarin AgendaView
Comme la plupart des éléments de l'agenda sont associés à une date ou une heure, nous avons fourni une API facile à utiliser pour vous permettre de définir des formats pour ces éléments. Par exemple, vous pouvez définir un format spécifique des éléments du mois, du jour et de la semaine. Pour plus d'informations sur les propriétés disponibles, vous pouvez consulter la page de documentation Agenda View .
Si vous n'avez pas eu la possibilité de consulter la page de documentation pour voir à quel point il est facile de modifier les formats, voici un bref exemple sur la façon de changer le format du "jour" dans l'agenda: [19659009] < telerikInput: RadCalendar x: Name = "calendar"
ViewMode = "Agenda" ">
< telerikInput: RadCalendar.AgendaViewSettings >
] < telerikInput: AgendaViewSettings DayItemFormat = "EEE, d MMM" />
[19659032] </ telerikInput: RadCalendar.AgendaViewSettings >
</ telerikInput: RadCalendar >
Et voici le t Le résultat:
public classe CustomAgendaViewItemStyleSelector: AgendaItemStyleSelector
{
] privé DateTime maintenant = DateTime.Now;
public AgendaTextItemStyle WeeksStyle { get ; set ; }
public AgendaTextItemStyle TodayStyle { get ; set ; }
] public override AgendaTextItemStyle SelectWeekItemStyle (Item AgendaWeekItem) {
retour ceci .WeeksStyle;
}
public override AgendaTextItemStyle SelectDayItemStyle (Item AgendaDayItem) [1945904]
{
si ( ceci .now.Date == item .Date.Date)
{ [19659002] retourner ceci .TodayStyle;
}
retour null ;
} [19659002] }
Comme vous pouvez le voir dans le code ci-dessus – nous allons mettre à jour tous les éléments de la semaine dans l'ordre du jour et juste le style de l'élément du jour en cours.
Vous pouvez créer les styles personnalisés dans XAML, appliquer les personnalisations souhaitées et simplement affecter le CustomAgendaViewItemStyleSelector à AgendaItemStyleSelector propriété du contrôle RadCalendar:
< telerikInput: RadCalendar x: Name = "calendar"
ViewMode = "Agenda" >>
< telerikInput: RadCalendar.Resources >
<[19659010] ResourceDictionary >
< local: CustomAgendaViewItemStyleSelector x: Key = "CustomAgendaViewItemStyle" ]>
< local: CustomAgendaViewItemStyleSelector.WeeksStyle >
< telerikInput: AgendaTextItemStyleCouleur [1965= "# 218CFF"
FontAttributes = "Italique"
FontSize = "16"
HorizontalTextAlignment = "Center" />>
</ local: CustomAgendaViewItemStyleSelector.WeeksStyle >
< local: CustomAgendaViewItemStyleSelector [1965] 19901990 ]
< telerikInput: AgendaTextItemStyle TextColor = "# 5EB1FF"
FontAttributes = "Bold"
FontSize = "15"
HorizontalTextAlignment = "Center" />
</ local: CustomAgendaViewItemStyleSelector.TodayStyle >
</ local: CustomAgendaViewItemStyleSelector >
<19659161] < / ResourceDictionary >
</ telerikInput: RadCalendar.Resources >
< telerikInput: RadCalendar.AgendaViewSettings >
< telerikInput: AgendaViewSettings 1965] AgendaItemStyleSelector = "{StaticResource Cus tomAgendaViewItemStyleSelector} " />
</ telerikInput: RadCalendar.AgendaViewSettings > </ telerikInput: RadCalendar >
L'image ci-dessous illustre l'effet des styles appliqués:
Pour plus d'informations sur le composant Calendrier et les différentes fonctionnalités qu'il propose - reportez-vous à notre page de documentation: Interface utilisateur Telerik pour Xamarin - Calendrier et planification . Vous pouvez également vérifier les UI Telerik pour les échantillons Xamarin et les applications Telerik SDK Browser qui présentent les utilisations de base du contrôle ainsi que certains scénarios plus sophistiqués.
Source link