Gestion personnalisée des états visuels pour Xamarin.Forms

Avec la prise en charge de VSM dans Xamarin.Forms 3.0 et de Telerik UI pour Xamarin, la définition et le comportement de l'interface utilisateur peuvent maintenant se rapprocher, ce qui conduit à un code moins détaillé et facilement compréhensible.

Avec la mise à jour de Xamarin.Forms 3.0 vient la prise en charge d'une fonctionnalité que les développeurs hardcore de XAML recherchaient depuis longtemps: Visual State Manager (VSM). VSM fournit aux développeurs une manière structurée de définir les comportements de l'interface utilisateur directement dans le langage de balisage de l'interface utilisateur. Cela offre beaucoup de flexibilité aux développeurs pour faire des changements d'interaction utilisateur dans le balisage de l'interface utilisateur lui-même, sans avoir à revenir au code verbeux ou au code MVVM.

Et si vous construisez des applications avec Xamarin.Forms 3.0, vous Il faudra probablement des contrôles d'interface utilisateur polis qui étendent le jeu d'outils Xamarin par défaut, ce qui signifie que vous n'avez pas besoin de réinventer la roue pour chaque projet et que vous pouvez expédier des applications plus rapidement. C'est là que Telerik UI pour Xamarin brille – une suite complète de composants UI multiplateformes performants et performants pour les applications Xamarin.Forms. Maintenant, si vous êtes un fan de Visual State Managers, vous serez heureux de savoir que le support VSM ne fonctionne pas seulement pour ce qui est hors de la boîte, mais aussi pour une interface utilisateur complexe. Il vous offre également la possibilité de personnaliser les comportements VSM en écrivant des états visuels personnalisés pour les contrôles de l'interface utilisateur. Cet article présente VSM personnalisé dans Xamarin.Forms en collaboration avec Telerik UI. Alors, allons-y et laissons passer les bons moments!

Visual State Manager

Le support de VSM dans Xamarin.Forms 3.0 introduit le concept de Visual States pour l'interface utilisateur. Une vue / un contrôle Xamarin.Forms peut avoir plusieurs apparences visuelles différentes en fonction de son état sous-jacent. Et les développeurs peuvent définir les comportements UX en définissant des règles sur la façon dont l'interface utilisateur apparaît dans différents états visuels. La meilleure partie – tout cela peut être fait dans le balisage XAML.

Les états visuels pour une interface utilisateur sont définis ensemble dans Visual State Groups – dont une collection définit un comportement UX combiné. Tous les états visuels d'un groupe d'états visuels s'excluent mutuellement et tout est identifié par de simples chaînes de texte.

Visual States Manager dans Xamarin.Forms définit les trois états visuels les plus couramment utilisés, tous définis dans un groupe d'états visuels CommonStates :

1. Normal
2. Désactivé
3. Centré

Ce groupe d'états visuels est pris en charge pour toutes les classes dérivées de VisualElement qui est la classe de base pour Voir et Page – donc cela couvre à peu près tous les contrôles de l'interface utilisateur dans Xamarin.Forms. VSM peut maintenant être utilisé pour contrôler les comportements de l'interface utilisateur à travers ces trois états visuels communs, et toutes les définitions de groupes d'états visuels peuvent être décrites dans le balisage XAML

Custom Visual States

Et si vous vouliez étendre la fonctionnalité pour définir d'autres états? Il s'avère que la définition d'états visuels personnalisés est facile, chaque classe dérivée de VisualElement utilise le Visual State Manager de la même manière. Nous avons simplement besoin d'invoquer VisualStateManager.GoToState () pour forcer le VSM à décaler l'état du contrôle de l'interface utilisateur vers l'état visuel correspondant.

Prenons un exemple simple: un bouton. Alors que les états normaux, désactivés et focalisés sont intégrés, l'état d'un bouton est également un état visuel commun. Essayons d'ajouter un état visuel personnalisé qui reconnaît l'état enfoncé du bouton. Bien sûr, nous pouvons utiliser le bouton Xamarin.Forms par défaut, mais le bouton fourni avec Telerik UI pour Xamarin est juste sur les stéroïdes. Il offre une tonne de flexibilité de développement – coins arrondis, rotation, transparence, images de fond et options de thème.

Ne serait-ce pas génial si nous pouvions définir des états visuels personnalisés qui fonctionnent avec Xamarin.Forms VSM , mais s'appliquent à Telerik UI? Eh bien, nous pouvons! Tout d'abord, démarrez un projet et obtenez nos dépendances correctement – les deux seules nécessaires sont Xamarin.Forms 3.0 Forward et Telerik UI pour Xamarin.

Le bouton fantaisie dans Telerik UI pour Xamarin s'appelle RadButton – comment RAD! Le moyen simple pour nous de définir un état visuel personnalisé est d'hériter de la classe RadButton et de définir un nouveau bouton qui est conscient quand il est pressé. Voici du code:

 public class StateButton: RadButton
{
  StateButton public ()
  {
    this.Appuyez sur + = (s, e) => this.IsPressed = true;
    this.Released + = (s, e) => this.IsPressed = faux;
  }

  public bool IsPressed
  {
    obtenir
    {
      return (bool) this.GetValue (IsPressedProperty);
    }
    ensemble
    {
      this.SetValue (IsPressedProperty, valeur);
    }
  }

  public static readonly BindableProperty IsPressedProperty =
    BindableProperty.Create (nameof (BackgroundColor),
                            typeof (bool),
                            typeof (StateButton),
                            defaultValue: false,
                            propertyChanged: OnIsPressedPropertyChanged);

  private static void OnIsPressedPropertyChanged (BindableObject lisible, object oldValue, objet newValue)
  {
    ((StateButton) bindable) .ChangeVisualState ();
  }

  override protégé override ChangeVisualState ()
  {
    if (this.IsPressed)
    {
      VisualStateManager.GoToState (ceci, "pressé");
    }
    autre
    {
      base.ChangeVisualState ();
    }
  }
} 

Vous remarquerez qu'une fois que notre bouton est conscient de son état enfoncé, nous pouvons simplement demander à Xamarin.Forms VisualStateManager de passer de force à un état défini en conséquence (cela étant Pressé)

Hooking Up UI

Maintenant que nous avons un bouton qui comprend un état visuel personnalisé, utilisons-le dans notre interface Xamarin.Forms. Pour rendre les choses un peu plus intéressantes, essayons d'intégrer ce bouton dans un DataTemplate reproductible – VSM fonctionne simplement et descend dans la pile. Utilisons l'un des paradigmes de l'interface utilisateur les plus courants dans les applications mobiles: une liste de choses. Nous avons d'abord besoin d'exemples de données factices, donc voici du code dans notre fichier code-behind:

 public MainPage ()
{
  InitializeComponent ();

  ViewModel VM = nouveau ViewModel ();
  this.TelerikListView.ItemsSource = VM.Source;
}

classe publique 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; }
} 

Clairement, c'est un code sophistiqué. Bon, d'accord, nous sommes littéralement en train de refaire un tas de ficelles. Maintenant que nous avons une liste de noms de personnes, il est temps de lier la collection à un ListView – une étiquette pour les noms, et deux boutons à éditer ou à supprimer. Voici le balisage XAML:

Remarquez comment le bouton Telerik fournit des API supplémentaires pour arrondir les coins, utiliser des arrière-plans personnalisés et bien plus encore – juste plus de munitions pour que les développeurs donnent l'apparence exacte de leur interface utilisateur. Avec le balisage de l'interface utilisateur en place et le code-behind fournissant les données à lier, l'écran de notre application s'allume avec la liste des noms et des boutons pour chacun.

Utilisation de VSM personnalisé

Avec notre balisage d'interface utilisateur lié à nos données, notre écran d'application affiche la liste que nous voulons. Mais n'oublions pas, nous avons utilisé un bouton spécial dans notre DataTemplate de ListView, qui est conscient de son état enfoncé. Et nous avons VisualStateManager étant forcé d'entrer dans un état visuel personnalisé quand le bouton est pressé. Maintenant il est temps de tout mettre ensemble. Voici encore plus de code de balisage de l'interface utilisateur:

Vous remarquerez que nous déclarons un style personnalisé dans la ResourceDictionary de notre page XAML - et que le style s'applique à notre StateButton personnalisé . A l'intérieur, nous définissons simplement un état visuel personnalisé en tant que partie du groupe d'états visuels que Xamarin.Forms VSM supporte déjà - les CommonStates . Nous déclarons l'état Pressed comme un nouvel état visuel personnalisé que le VSM comprendrait. Les sélecteurs de style définissent les propriétés de largeur et de couleur de la bordure du bouton susmentionné. En effet, chaque fois que nous appuyons sur nos StateButtons personnalisés, nous voulons qu'ils brillent d'une bordure verte. C'est un comportement UX spécifique, défini entièrement dans le balisage XAML, possible grâce au support de Visual State Manager.

Résumer

La prise en charge de Visual State Manager dans Xamarin.Forms 3.0 devrait être une fonctionnalité très appréciée des aficionados de XAML. VSM permettrait aux développeurs de définir le comportement de l'interface utilisateur par le biais de simples changements d'état visuel, déclarés entièrement dans le balisage XAML. Et VSM prend en charge les travaux non seulement pour ce qui est hors de la boîte, mais aussi pour l'interface utilisateur complexe personnalisée comme Telerik UI pour Xamarin. Xamarin.Forms intègre désormais la prise en charge de VSM sur tous les contrôles, et les développeurs peuvent étendre les fonctionnalités en définissant des états visuels personnalisés selon les besoins. La définition et le comportement de l'interface utilisateur peuvent maintenant cohabiter, ce qui conduit à un code moins détaillé et facilement compréhensible. Alléluia à cela!