Commencez avec Expander et Accordion pour Xamarin.Forms

Avez-vous déjà eu envie de montrer plus de données dans votre application mobile? Le problème était peut-être une taille d'écran insuffisante sur votre appareil mobile, ce qui rend difficile l'adaptation de toutes les informations que vous souhaitez partager. Ce n'est plus un problème! L’interface utilisateur Telerik pour Xamarin résout ce problème pour vous.

Vous pouvez trouver deux nouveaux contrôles avec la boîte à outils de l'interface utilisateur, qui a été livrée pour la première fois dans la version R3 2018. Ces commandes résolvent le problème limité de l'immobilier sur un appareil mobile tout en offrant une interface utilisateur très élégante. Permettez-moi de vous présenter les commandes Expander et Accordion de l'interface utilisateur Telerik pour Xamarin .

Cet article de blog vous familiarisera avec ces deux commandes et avec toutes les fonctionnalités et les capacités de personnalisation qu'elles offrent. Les deux contrôles peuvent développer ou réduire leur contenu et contenir divers composants dans leur panneau de contenu.

Comme vous pouvez le constater, les deux contrôles ont une interface utilisateur similaire, mais à En même temps, ils servent différents objectifs. Vous pouvez utiliser Expander pour afficher le contenu d'un seul élément, mais si vous souhaitez avoir plusieurs éléments et qu'un seul d'entre eux ait la possibilité de se développer à la fois, vous devriez opter pour le contrôle Accordéon.

19659008] Le contrôle de RadExpander comporte deux parties principales:

L’extrait ci-dessous montre comment définir RadExpander en XAML:

 < telerikPrimitives: RadExpander   x: Nom  =  " expander "  HeaderText  = " Plus d'options ">  
   < telerikPrimitives: RadExpander.Content >  
   < StackLayout   Margin  =  "10, 20, 10, 20" >  [19659000]       =   < StackLayout   Orientation  =  "Horizontal"   Spacing  =  "10" >  

   < telerikPrimitives: RadCheckBox  />  
   < Étiquette     Texte correspondant =  "Rendre mon profil privé"  />  

   </  StackLayout >  
   <  StackLayout   Orientation  =  "Horizontale"   Espacement  =  "10" >     =  =  =  =  ]  < telerikPrimitives: RadCheckBox   />  
   < Label   Texte  =  "Afficher uniquement mes messages aux personnes qui me suivent"   />  



  


               




   </  StackLayout >  
   </  StackLayout >  
   </  telerikPrimitives: RadExpander.Content > 

  </  telerikPrimitives: RadExpander > 

Caractéristiques

Voici certaines des fonctionnalités avec lesquelles le contrôle Expander est livré:

• États effondrés et développés
• Animation
• ] Options de personnalisation
• Prise en charge de Theming

États réduits et étendus

Le contrôle héberge le contenu dans un conteneur extensible pouvant être facilement développé / réduit en tapant sur son en-tête. L'état actuel du contrôle peut être modifié par la propriété IsExpanded .

L'image ci-dessous montre l'aspect du contrôle dans ses états développé / réduit:

Animation

Le contrôle RadExpander fournit une propriété qui vous permet d'activer ou de désactiver l'animation lorsque le contenu est réduit ou développé. Si vous le souhaitez Activez / désactivez l'animation nécessaire pour utiliser la propriété IsAnimationEnabled . Par défaut, l'animation est activée.

Options de personnalisation

L'aspect visuel du contrôle peut être personnalisé de différentes manières, comme:

• La durée de l'animation et son assouplissement peuvent être définis à l'aide des propriétés AnimationDuration et AnimationEasing .
• Border Styling . Vous pouvez modifier la couleur et l'épaisseur.
• En-tête . L’en-tête d’extension peut être placé en haut ou en bas du conteneur extensible.
• En-tête personnalisation . Si l'en-tête par défaut de Expander con trol ne convient pas à vos besoins, vous pouvez utiliser le contrôle de contenu ExpanderHeader . Ce contrôle de contenu fournit diverses propriétés permettant de personnaliser le texte, l’emplacement, la couleur, l’animation de rotation, la famille et la taille de la police de l’indicateur. Si vous souhaitez personnaliser ExpanderHeader, consultez notre aide .

L'image ci-dessous montre l'aspect du contrôle RadExpander après personnalisation:

Accordéon

Le contrôle RadAccordion contient un ensemble de panneaux de contenu réductibles. Chaque panneau ( AccordionItem ) comprend un en-tête . ( AccordionItemHeader ) et Contenu . Le contrôle Accordéon ne développe qu'un seul de ses éléments à la fois dans l'espace disponible.

L'extrait ci-dessous montre comment le RadAccordion peut être utilisé. Définition en XAML:

 < telerikPrimitives: RadAccordion   x: Name  =  "accordéon" > 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires