Fermer

mai 4, 2018

Xamarin.Forms Theming avec CSS et Telerik UI pour Xamarin


Obtenez un aperçu de la façon dont vous pouvez styler les applications Xamarin.Forms avec une combinaison de styles XAML et CSS.


Les applications mobiles tirent souvent pour une expérience utilisateur cohérente. Compte tenu de la courte durée d'attention impitoyable de la plupart des utilisateurs d'applications mobiles, la cohérence de l'expérience utilisateur est un moyen de garder l'utilisateur engagé tout au long d'une seule utilisation de l'application. Une interface utilisateur d'application doit avoir un aspect similaire tout au long et se comporter de manière uniforme. La cohérence des couleurs, des emplacements et des animations peut faire en sorte que différentes sections d'applications se sentent comme faisant partie d'une même famille, ce qui garantit une expérience utilisateur fluide et naturelle.

Toutes les ressources utilisées dans l'interface de l'application de style cohabitent: les styles sont partagés et les modifications se répercutent tout au long de l'interface utilisateur de l'application. Si vous créez des applications multiplates-formes avec Xamarin Telerik UI pour Xamarin peut également vous aider dans la cohérence des applications avec des contrôles d'interface utilisateur riches, performants et exotiques. Ceci est réalisé en utilisant un thème Telerik intégré fournissant aux développeurs des styles XAML cohérents à l'échelle de l'application, ainsi que des options de personnalisation.

Il y a un nouveau gamin sur le bloc de style Xamarin. ] CSS et bien que rencontré avec hésitation, il est là pour rester. Est-ce un blasphème de mélanger et de faire correspondre les CSS avec les styles XAML? Est-ce que CSS peut jouer un rôle dans les thèmes à l'échelle de l'application pour la cohérence de l'interface utilisateur? Cet article explore le monde complexe mais réaliste de l'utilisation des styles XAML avec CSS pour gérer des thèmes à l'échelle de l'application pour des expériences utilisateur agréables.

La liste

Qu'ont en commun la plupart des applications mobiles? Il y a généralement une liste de choses. Et un ListView est souvent le choix du développeur dans l'interface utilisateur pour afficher la liste. Bien sûr, il y a un ListView par défaut dans Xamarin.Forms, mais le ListView dans Telerik UI pour Xamarin soulève le jeu de façon substantielle. Il y a des fonctionnalités que les développeurs ne devraient pas avoir à réinventer à partir de rien – comme tri groupement filtrage schémas action glisser tirer pour actualiser et style flexible .

Commençons par afficher une liste de chaînes de base, avant d'examiner ses options de style. Bien qu'il existe plusieurs façons d'introduire des bits Telerik UI pour Xamarin dans votre projet Xamarin.Forms, le plus simple est sans doute d'obtenir le paquetage NuGet . Vous pouvez obtenir la suite complète ou choisir l'un des paquets NuGet personnalisés en fonction des contrôles d'interface utilisateur que vous allez utiliser

Ensuite, commençons par une nouvelle page XAML et son code-behind . D'abord, nous avons mis en place quelques exemples de données. Aucun modèle MVVM ici – le choix d'un framework MVVM devrait être basé sur le besoin, et non sur la pression des pairs.

 public class SourceItem
{
  SourceItem public (nom de la chaîne)
  {
    this.Name = nom;
  }

  chaîne publique Name {get; ensemble; }
}

Classe publique ViewModel
{
  public ViewModel ()
  {
    this.Source = nouvelle liste  {
      new SourceItem ("Tom"),
      nouveau SourceItem ("Anna"),
      nouveau SourceItem ("Peter"),
      nouveau SourceItem ("Teodor"),
      nouveau SourceItem ("Lorenzo"),
      nouveau SourceItem ("Andrea"),
      new SourceItem ("Martin")
    }
  }

  liste publique  Source {get; ensemble; }
} 

Maintenant que nous avons une Source dans notre mannequin ViewModel contenant des données, configurons notre ListView en balisage XAML:

  
  
    
      
        
          
            
              
                
            
          
        
      
    
  
 

Notez que Label dans notre ListView ItemTemplate est déjà lié à la propriété Name de l'objet contexte de liaison. Nourrissons les affamés ListView des données, comme ceci:

 ViewModel VM = new ViewModel ();
this.TelerikListView.ItemsSource = VM.Source; 

C'est tout. Lorsque nous exécutons notre application, nous obtenons la vanille ListView de Telerik UI pour Xamarin et il se comporte exactement de la même manière dans iOS, Android et UWP.

[19659003] Notez qu'il n'y a pas beaucoup de style à notre ListView – il est riche en fonctionnalités, mais semble simpliste pour le moment.

Comment thématiser

Ensuite, donnons à notre vanille ListView quelques reflets de style. Cela peut être fait avec les styles XAML qui sont en ligne dans la définition ListView mais cela rend la maintenance plus difficile. Idéalement, vous aurez besoin de toutes les utilisations de ListView au sein de votre application pour avoir des regards et des comportements similaires. Cela vaut également pour les autres composants de l'interface utilisateur de votre application – tout doit être cohérent.

Un thème aide ici – vous avez un endroit qui définit tous vos styles et maintient la cohérence. Telerik UI pour Xamarin est livré avec un thème bleu par défaut que vous pouvez facilement exploiter. Il fait partie de l'assembly Telerik.XamarinForms.Common – tout ce que vous avez à faire est de créer un fusionné Resource Dictionary dans le projet App.xaml fichier, comme ceci:

  
  
    
    
      
        
        
      
    
  
 

De retour dans notre balisage de page XAML, nous avons simplement besoin de définir la StyleClass dans notre ListView pour pointer vers le thème Telerik:


   ...
  ...
 

Les styles XAML nécessaires qui s'appliquent à ListView ont maintenant été retirés de la DLL dans un dictionnaire de ressources à l'échelle de l'application – vous pouvez voir que le ] ListView commence à regarder un peu plus poli et montre les couleurs du thème bleu sur les sélections de ligne.

CSS Styling

Maintenant, il y a une nouvelle façon de styler les éléments visuels Xamarin.Forms – c'est CSS . Bien que rencontré quelques hésitations, CSS offre des avantages de style uniques et ouvre le partage de code entre les applications Web et mobiles. Passez à un paquet Beta Xamarin.Forms NuGet et vous pouvez jouer avec le style CSS des applications Xamarin.Forms. Pour l'instant, vous pouvez styliser la plupart des éléments visuels d'interface utilisateur prêts à l'emploi avec des styles CSS – et vous pouvez écrire un CSS valide avec un support étendu Selector .

CSS pourrait avoir un jeu dans le style Interface utilisateur Telerik pour Xamarin composants? Il s'avère que la plupart des éléments visuels de notre ListView est défini par le ItemTemplate – et vous utiliserez principalement les contrôles Xamarin.Forms standard ici. Pour tout contrôle de conteneur, le ItemTemplate est ce qui dicte l'interface utilisateur interne – et tout est ouvert au style avec CSS.

Pour essayer ceci, insérons une feuille de style CSS externe en tant que ContentPage Ressourcez et donnez notre Label à l'intérieur du ItemTemplate un style, comme ceci:

  
  


  
    
      
        
          
            
              
          
        
      
    
  
 

Dans le fichier CSS, nous pouvons définir la classe de style nommée:

 .MyLabel {
  La couleur rouge;
} 

Exécutez l'application et vous verrez CSS entrer dans les mauvaises herbes – stylisant les composants de l'interface utilisateur répétée dans une interface Telerik pour Xamarin ListView. Alléluia!

Personnalisation des thèmes

Avoir un thème de style à l'échelle de l'application est un grand pas vers la réalisation de la cohérence de l'interface utilisateur tout au long de l'application. Cependant, les développeurs ou les concepteurs peuvent avoir besoin de modifier un thème de style intégré pour répondre aux besoins de leur application – peu de personnalisations pour adapter les détails granulaires. Dans le thème Telerik Blue par défaut, il y a styles uniformes définis pour beaucoup de contrôles – vous avez la possibilité de les remplacer bien sûr. C'est une excellente façon de commencer avec un thème poli tout au long de l'application, mais faites de petites personnalisations pour faire les vôtres.

Suivez la documentation de et vous verrez que la ListView ] a plusieurs directives de coloration dans le thème par défaut. Dans votre ResourceDictionary fusionné vous pouvez facilement définir vos propres couleurs tout en gardant le reste du thème inchangé, comme ceci:


  
  
    
      
        
         Orange 
         Orange 
         Lightgreen 
      
      
    
  
 

J'espère que vous avez dépassé le choc blasphématoire initial de voir le support CSS dans le style des éléments visuels de Xamarin.Forms. Il s'avère que les styles XAML personnalisés dans les thèmes à l'échelle de l'application peuvent coexister avec les styles CSS au niveau de la page, comme suit:

 ^ ContentPage {
  rembourrage: 20;
  couleur de fond: vert clair;
}

.MyLabel {
  La couleur rouge;
} 

Le résultat est l'harmonie – et la flexibilité pure pour les développeurs de styler leurs pages Xamarin.Forms et l'interface utilisateur comme ils le souhaitent.

Handy Benefits

Il y a quelques avantages à tirer quand on stylise l'interface utilisateur Telerik complexe avec des définitions de style CSS qui coulent facilement. Pour l'essayer, tenons-nous dans un StackLayout dans notre ListView ItemTemplate comme ceci:

  
  
    
      
        
          
      
    
  
 

Maintenant, dans notre fichier CSS, nous avons une classe de style nommée qui s'applique à l'étiquette à l'intérieur du ItemTemplate . Mais il existe maintenant un autre style qui s'applique aux enfants directs Label éléments qui se trouvent dans un StackLayout .

 ^ ContentPage {
  rembourrage: 20;
  couleur de fond: vert clair;
}

.MyLabel {
  La couleur rouge;
}

stacklayout> label {
  Couleur bleue;
} 

Devinez qui gagne? Dernier style – vous pouvez imaginer la flexibilité que les styles CSS en cascade apportent à la table

Une autre connotation intéressante est que les styles CSS peuvent référencer directement l'interface utilisateur Telerik complexe et modifier le rendu des composants UI. Mise en garde complète ici: certains styles de base de la ListView de Telerik UI pour Xamarin ne peut pas être mis à jour à partir de CSS pour le moment. Cela dit, nous devons étudier la faisabilité et l'intérêt du client.

Cela dit, vous pouvez toujours vous référer au nom Telerik ListView dans une classe de style CSS et aux propriétés CSS qui agissent sur Visual générique. Les éléments fonctionneront, comme visibilité direction marge padding etc. Bien que ce ne soit pas la vraie localisation pour soutenir le droit à … Gauche des langues, vous pouvez voir comment il est facile de basculer autour de ListView contenu avec des styles CSS, comme ceci:

 #TelerikListView {
  direction: rtl;
} 

Il suffit de récupérer les chaînes traduites de droite à gauche à partir d'un fichier de ressources et vous êtes en or

Contrôles les plus complexes de l'interface XAML (comme le ListView ou le Grid ) utilise l'approche ItemTemplate pour définir les composants de l'interface utilisateur récurrents et leurs comportements. Et pour tous ces usages dans les contrôles UI Telerik pour Xamarin vous pouvez utiliser des classes CSS pour styliser des contrôles individuels. Avec des dispositions plus complexes, vous pouvez vraiment commencer à voir la puissance des effets de retouche avec les styles CSS

Disons que notre ListView affiche maintenant un bouton Modifier dans chaque ligne pour modifier le texte – pourrait être juste un Button disposé horizontalement dans le ItemTemplate StackLayout, comme ceci:

  
  
    
      

Voici notre style CSS et les résultats correspondants – des trucs marrants, n'est-ce pas?

 stacklayout button {
  La couleur rouge;
  border-color: # 9acd32;
  style de police: italique;
} 

Go Boldly

La cohérence de l'interface utilisateur à l'échelle de l'application contribue grandement à une expérience utilisateur fluide. Et les thèmes aident définitivement à garder les styles organisés au même endroit et à s'assurer que les changements sont applicables partout. Et si vous utilisez les commandes Telerik UI for Xamarin dans vos applications Xamarin.Forms, vous aurez un riche thème intégré prêt à l'emploi – utilisez-le tel quel ou personnalisez-le selon vos besoins

Une fois que vous avez mis de côté nos hésitations préconçues contre le style CSS des applications Xamarin.Forms, vous verrez que les styles CSS fonctionnent parfaitement avec les styles XAML et peuvent augmenter les personnalisations des thèmes avec des effets en cascade. Alors choisissez la combinaison d'outils que vous voulez pour styler vos applications Xamarin.Forms avec – et fournissez une expérience utilisateur agréable.


Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link