Gestion du ScrollViewer UWP

Sur certains projets, on a besoin de gérer des animations ou des interactions sur un ScrollView. Par exemple sur Android, on trouve un élément, le floatingactionbutton , un bouton qui apparaît et disparaît en fonction du scroll de la page. C’est un contrôle qu’on ne retrouve pas en UWP et qui peut être sympa à ajouter si vous avez des actions à réaliser.  Voici une implémentation d’un simple floatingactionbutton  pour vos projets UWP.

Dans un premier temps, on doit récupérer le scrollviewer de la page. On va retrouver en général deux cas (voir trois pour les plus courageux 🙂 )

Le premier cas, et le plus simple, c’est que dans votre page XAML, vous avez directement le scrollviewer.

Comme ceci :

Pour le deuxième cas, vous avez un contrôle comme une ListView où le scrollviewer  n’est pas facilement trouvable.

Nous allons créé un nouveau « Templated Control » dans votre projet, nommé floatingactionbutton .

On se retrouve avec deux nouveaux éléments dans votre projet, le code .cs et un fichier « Generic.xaml » dans le dossier « Themes », où se trouvera le design de votre contrôle.

On rajoute une dependency property pour avoir la référence de notre scrollviewer et gérer l’élément passé en source dans le OnApplyTemplate du contrôle.

Pour l’extension FindDescendant , il faut rajouter le package nuget « Microsoft.Toolkit.Uwp.UI » et ajouter le namespace « Microsoft.Toolkit.Uwp.UI.Extensions ».  Vous trouverez également la méthode FindAscendant si vous souhaitez gérer aussi ces cas.

En récupérant le scroll, vous pourrez du coup vous abonner aux événements SizeChanged  et ViewChanging pour gérer l’affichage de votre bouton. Pourquoi je conseille d’utiliser l’événement SizeChanged ? Car l’utilisateur a la possibilité de resizer l’application et cela modifie la position du scroll de votre élément sans que celui-ci notifie l’événement ViewChanging . Donc si vous souhaitez que votre bouton n’apparaisse que si le scroll est en bas, il vous faudra vous abonner à cette événement.

Egalement, dans ce cas, je vous conseille de vous abonner au changement de la propriété ExtentHeightProperty . Car si votre interface est dynamique et que des éléments se rajoutent après le chargement, le ViewChanging ne sera pas levé, mais néanmoins la propriété ExtentHeight sera modifiée. Cette propriété correspond à la hauteur de votre contenu dans votre scrollviewer, doc ici.

Il ne vous reste plus qu’à rajouter une animation pour faire apparaître / disparaître le bouton quand l’utilisateur scrolle. Pour cela, je fais un petit timer qui sera reset à chaque fois que le ViewChanging est appelé.

Puis je rajoute l’animation dans mon événement avec le nuget « Microsoft.Toolkit.Uwp.UI.Animations ».

Voici donc le code cs du contrôle

Xaml du « General »

Il ne vous reste plus qu’à personnaliser le design de votre bouton ainsi que l’animation et vous avez un FloatingActionButton comme sur Android.