[Universal App] Deviens un Keyboard Master !

Lorsque l’on gère des Textbox dans une application, et à plus forte raison des devices mobiles, on se retrouve très souvent avec une taille d’écran limitée car le clavier virtuel prend une bonne partie de la place disponible.

Bing

En général XAML s’en tire en proposant un scrolling de l’ensemble de l’écran.
Cela peut s’avérer pratique dans le cas de formulaire comportant plusieurs Textbox par exemple, le scrolling permettant une navigation facile entre les différents contrôles de saisie.

En revanche, il existe plusieurs cas ou ce n’est clairement pas optimal. A savoir :

– Lorsque le Textbox sert à ajouter une entrée dans un ListView (application de type Chat). Le scrolling de l’écran induit par la TextBox associé à celui de la ListView ne fait pas bon ménage.
– Quand on veut afficher ou non certains éléments afin de créer une vue spécifique à la taille réduite de l’écran
– pour Améliorer le clavier Virtuel (Afficher un bandeau de saisie custom au dessus du clavier).

Nous verrons dans cet article comment mettre en place très simplement ces cas un peu particuliers.

Chacun cherche son Chat

Nous prendrons comme exemple la mise en place d’un chat.
Que nous faut-il pour mettre en place ce cas particulier ?

– Annuler le scrolling de l’écran afin que le ListView du chat ne soit plus affecter.
– Obtenir la taille du clavier virtuel pour donner au ListView la taille de l’écran disponible .
– Détecter l’ouverture du clavier pour cacher des éléments non essentielles (le nom de l’application).

Pour rendre les choses plus visuelles, l’objectif est de partir d’un écran sans clavier :

wp_ss_20150617_0001

A un écran restreint, concentré sur la ListView, c’est à dire sans titre avec une ListView et TextBox plein écran :

wp_ss_20150617_0002

De nouveaux événements pour le clavier

Généralement dans les applications Silverlight pour Windows Phone on utilise deux événements pour détecter que le clavier apparaît à l’écran: GotFocus et LostFocus.
Le fait de donner ou non le focus à la textbox lance l’un ou l’autre des événements.
Mais la gestion de la souris ou du clavier physique sur les applications Windows fait que le GotFocus n’est plus nécessairement synonyme d’affichage du clavier virtuel en Universal App.

Heureusement une nouvelle API est arrivée pour venir à notre secours !
InputPane est une classe permettant de détecter les événements d’affichage et de retrait du clavier virtuel !

InputPane inputPane = InputPane.GetForCurrentView();
// Affichage
inputPane.Showing += inputPane_Showing;
// Retrait
inputPane.Hiding += inputPane_Hiding;

Les arguments des événements contiennent des informations intéressantes comme la taille du clavier et la désactivation du scrolling de l’écran (et de son animation).

void inputPane_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
    // Taille du clavier
    double heightKeyboard = args.OccludedRect.Height;
    // Désactivation du scrolling écran
    args.EnsuredFocusedElementInView = true;
}

void inputPane_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
    // Activation du scrolling écran
    args.EnsuredFocusedElementInView = false;
}

Une fois le scrolling désactivé c’est au développeur de prendre en compte la taille du clavier car la page XAML passe désormais sous le clavier !

Attention tout de même à ces deux bugs :
– L’événement Showing peut-être appelé une nouvelle fois lorsque l’on quitte la TextBox (mais heureusement l’événement Hiding ne sera appelé qu’une seule fois).
– La taille du clavier renvoyé par args.OccludedRect.Height n’est pas toujours valide. Seul la valeur obtenue lors du premier appel de l’événement Showing peut être considérée comme correcte. Il faut donc la stocker pour une utilisation ultérieure.

Ca devient compliqué ? Voici qui devrait simplifier les choses !

Keyboard pour XAML

Vu que nous souhaitons que le clavier virtuelle affecte les éléments de XAML, autant qu’il soit traité directement dans le XAML.
J’ai donc concocté pour vous un contrôle et un behavior afin de vous aider dans la gestion du clavier virtuel.

Le premier s’appelle KeyboardGhost. C’est un contrôle qui prend la taille du clavier virtuelle lorsque celui ci est affiché.

Vous devez tout d’abord rajouter le namespace suivant dans votre page :

xmlns:sb="using:SamuelBlanchard.Helpers"

Le contrôle s’utilise comme suit :

<Page
...
>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <!-- Pour le KeyboardGhost --> 
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        
        <!-- Ecran adaptif-->
        <Grid x:Name="Ecran">
            <!-- Le reste de la page est ici-->
            <TextBox FontSize="40" Margin="30" VerticalAlignment="Bottom"></TextBox>
        </Grid>
        
        <!-- Taille du Keyboard -->
        <sb:KeyboardGhost Grid.Row="1" />        
    </Grid>
</Page>

Ainsi vous êtes assuré que le Grid « Ecran » fera la taille de l’écran disponible.
Dans le cadre de notre Chat, le ListView fera la taille de l’écran et pourra scroller en plein écran.

Le second contrôle est un Behavior c’est à dire une capacité qui se rajoute à n’importe quel controle XAML de la page.
Ce behavior permet de cacher ou non un element de la page selon que le clavier soit affiché ou non.
Pour le faire fonctionner il faut d’abord rajouter dans les références de l’application le Behavior SDK (XAML).

BehaviorXaml

Ensuite dans la page rajouter les namespaces suivant :

    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:sb="using:SamuelBlanchard.Helpers"

Il ne reste plus qu’à ajouter le behavior :

<Grid>
    <TextBlock Text="Titre de la page" Margin="16" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="40">
        <i:Interaction.Behaviors>
            <sb:KeyboardBehavior KeyboardShowingAction="SetVisibilityCollapse"></sb:KeyboardBehavior>
        </i:Interaction.Behaviors>
    </TextBlock>
    <TextBox FontSize="40" Margin="100" VerticalAlignment="Bottom" Text="Bas"></TextBox>
</Grid>

Le TextBlock chargé d’afficher le titre de l’app disparaîtra lorsque le clavier s’affichera laissant plus de place aux informations essentielles.
Dans le cadre de notre chat, Le ListView permet d’afficher un item de plus à l’écran, le titre ayant disparu. C’est toujours bon à prendre !

Vous pouvez également cacher des éléments lorsque le clavier n’est pas présent avec la propriété KeyboardShowingAction à SetVisibilityVisible.
La taille du clavier peut être fixée via la valeur SetHeight ce qui revient à utiliser le contrôle KeyboarGhost.

Conclusion

La prise en compte de la taille réduite de l’écrans lorsque le clavier virtuel est affiché peut être un vrai plus dans une application.
L’utilisateur ayant une meilleur vision des éléments important à l’écran tout en conservant un scrolling lorsque c’est nécessaire.
Les contrôles KeyboardGhost et KeyboardBehavior rend la mise en place simple et rapide en privilégiant le coté XAML à celui du code-behind.

Vous trouverez le code source complet des contrôles ici

leave your comment