Fermer

avril 9, 2021

Faites attention à votre propre occupation avec Telerik BusyIndicator pour WinUI


Familiarisez-vous avec les indicateurs chargés, en particulier le RadBusyIndicator, un membre crucial de l'interface utilisateur Telerik pour WinUI Suite. De plus, apprenez à créer des AnimationStyles personnalisés pour cela.

Je viens de terminer la lecture d'un article de blog sur les raisons pour lesquelles vous devriez arrêter d'utiliser les fileurs de chargement. J'ai même assisté à de telles conférences dirigées par des gourous de l'UI et de l'UX. La vérité est qu'un spinner de chargement est toujours l'un des indicateurs les plus utilisés dans la conception de l'interface utilisateur indiquant que votre application n'est pas en veille mais qu'elle fonctionne toujours. Sinon, pourquoi la dernière (et la plus moderne!) Plate-forme d'interface utilisateur native de Windows (c'est-à-dire WinUI) contiendrait-elle un tel contrôle?

Même le billet de blog que j'ai mentionné contenait un exemple d'alternative recommandée contenant un spinner lui-même! Je vous le dis – j'étais prêt à juger à partir de la seconde où j'ai vu cela, mais la phrase suivante après l'échantillon m'a fait réfléchir… et en profondeur. Oui, les meilleures pratiques d'aujourd'hui suggèrent d'utiliser une interface utilisateur squelette, mais tout comme l'exemple mentionné, elles sont également combinées avec un indicateur occupé ou un autre effet qui lui ressemble.

Depuis que nous avons clarifié qu'un indicateur occupé / chargement / progression est encore une chose de nos jours et la plate-forme d'interface utilisateur qui suscite le plus grand intérêt est WinUI, auriez-vous deviné de quoi nous allons parler dans ce blog? Si vous n'avez pas lu le titre, bien sûr. 😂

Aujourd'hui, nous allons parler des avantages d'un indicateur occupé – un type spécial appelé RadBusyIndicator (pour WinUI) – ainsi que des bonnes pratiques et animations .

Pourquoi utiliser un indicateur occupé à

Un article de Jakob Nielsen en 1993 cite les trois principales raisons pour lesquelles des indicateurs de chargement sont fournis aux utilisateurs. Premièrement, ils rassurent l'utilisateur sur le fait que le programme ou le produit ne s'est pas écrasé mais travaille simplement sur quelque chose – chargement de données, résolution d'un problème, etc. Deuxièmement, des indicateurs de chargement couplés à un type de barre de progression indiquent approximativement la durée d'attente prévue est. Et enfin, ils fournissent quelque chose que l'utilisateur peut regarder, autre qu'un écran vide.

Il y a des moments où une application n'est tout simplement pas en mesure de se conformer aux directives de vitesse. Bien sûr, une réponse instantanée est la meilleure. Mais parfois, pour les bonnes choses (ou fonctionnalités) de la vie (ou de l'application), vous devez simplement attendre.

Pourtant, il y a une chose importante qui est intentionnellement commencée à une nouvelle ligne de mon blog: vous devriez toujours essayer de rendre l'attente plus agréable si vous ne pouvez pas raccourcir la ligne.

Dans le cadre des solutions logicielles, le la visibilité de l'état du système est l'une des règles les plus importantes de la conception UI / UX. L'objectif derrière cela est évident: minimiser la tension de l'utilisateur. Par conséquent, des commentaires en temps opportun doivent être fournis sur ce qui se passe avec l'application. Les utilisateurs n'ont pas besoin de deviner ce qui se passe. Quelle est l'une des formes les plus courantes de ce type de rétroaction? Droite – un indicateur de chargement.

Quel indicateur d'occupation utiliser pour mon application WinUI?

Comme je l'ai mentionné plus tôt, les bonnes choses de la vie et des applications valent la peine d'attendre. Dans ce train de réflexion – avez-vous entendu parler de notre interface utilisateur Telerik pour WinUI RadBusyIndicator? Si la réponse est oui mais que vous étiez occupé ces derniers temps et que vous ne l'avez pas encore essayé, honte à vous! Je plaisante, bien sûr – nous sommes sur le point de l'essayer ensemble.

Permettez-moi de vous le présenter en morceaux. Voici tout ce que vous devez savoir:

Le RadBusyIndicator est affiché sur le thread de l'interface utilisateur. Si ce thread est bloqué, le contrôle ne sera pas affiché. Il est destiné à indiquer à l'utilisateur qu'il existe une tâche / processus d'arrière-plan de longue durée en vous permettant d'afficher une animation pendant que l'opération asynchrone est terminée.

Le contrôle est livré avec un ensemble d'animations prédéfinies qui peuvent être facilement définies . Pour affiner son comportement, vous pouvez utiliser l'une des propriétés suivantes, qui, à mon avis, sont explicites: Content ContentTemplate ContentPosition IsActive AnimationStyle ( neuf types intégrés ici), IndicatorAnimationStyle .

Démonstration des neuf types intégrés BusyIndicator AnimationStyles dans une grille

Oh, vous pouvez accéder au contrôle RadBusyIndicator via un alias pointant vers l'espace de noms Telerik.UI.Xaml.Controls.Primitives:

xmlns: primitives = "en utilisant: Telerik. UI.Xaml.Controls.Primitives "

< primitives: RadBusyIndicator IsActive = " True " AnimationStyle = " AnimationStyle1 " / >

Qu'est-ce qui fait qu'un indicateur de chargement est bon?

De bons indicateurs de chargement donnent toujours une sorte de rétroaction immédiate. Ils informent les utilisateurs que l'application a besoin de plus de temps pour traiter l'action de l'utilisateur et, si possible, prédisent (approximativement) combien de temps cela prendra. Ils présentent deux avantages principaux:

  • Réduire l'incertitude des utilisateurs (l'application rassure les utilisateurs sur le fait qu'elle fonctionne toujours)
  • Offrir une raison d'attendre et réduire la perception du temps par les utilisateurs (l'application fait en sorte que les utilisateurs accordent moins d'attention à l'attente elle-même en les distrayant – dans le bon sens, bien sûr)

Dernier point, mais non le moindre, et pas accidentellement hors de cette liste, un bon indicateur devrait toujours être accompagné d'une bonne animation. Pour vous assurer que vos utilisateurs ne s'ennuient pas en attendant que quelque chose se passe, vous devez leur donner une certaine distraction et leur donner le droit (ou ne pas leur donner du tout 🎶).

De belles animations peuvent distraire vos visiteurs et faites-leur ignorer les longs temps de chargement. C'est là que commence la vraie affaire du billet de blog. Passons à la section suivante où nous allons apprendre à créer une animation personnalisée pour le RadBusyIndicator.

Comment faire une animation personnalisée pour le RadBusyIndicator pour WinUI?

Outre les animations prêtes à l'emploi, notre indicateur occupé pour WinUI prend en charge la création de vos propres animations et leur intégration. Pour ce faire, vous devez créer un style qui cible le type BusyIndicatorAnimation et définir un ControlTemplate qui contient l'animation. Vous pouvez ensuite définir le style déjà défini sur la propriété IndicatorAnimationStyle exposée par RadBusyIndicator.

Après avoir recherché sur Google certaines conceptions d'indicateurs de chargement, j'ai fait de celle qui apparaissait le plus souvent l'objet de la démo suivante. Je vais garder ça une surprise pour l'instant. Prêt?

Ma feuille de triche dans le processus sera l'article Animations personnalisées du contrôle. 🤫

Comme indiqué ici, le RadBusyIndicator héberge son animation dans un contrôle qui fait partie de son ControlTemplate. Ainsi, pour appliquer une animation personnalisée, nous devrons définir un style pour ce contrôle et définir un nouveau ControlTemplate contenant les visuels personnalisés qui seront animés. Deux conditions que nous devrons remplir: donner à l'élément racine du nouveau modèle un nom spécial – « PART_LayoutRoot »; et définissez le storyboard qui s'occupera de l'animation et nommez-le « PART_Animation ».

Je commencerai par créer les éléments de l'animation personnalisée en dessinant les chemins de mon indicateur, le RotateTransform associé à il et le Storyboard qui contrôlera les angles pendant l'animation de cette transformation de rotation.

< Page.Resources >

< Style x: Key = "CustomBusyIndicatorAnimation" TargetType = "indicateur: BusyIndicatorAnimation" >

< Setter Property = "Template" >

< Setter.Value >

< ControlTemplate >

< Grid VerticalAlignment = "Center" x: Name = "PART_LayoutRoot" [19659022]>

< Grid.Resources >

< Storyboard x: Name = "PART_Animation"

BeginTime = "00: 00:00 "

RepeatBehavior = " Forever "

] Storyboard.TargetName = "LoadingVisualAngleTransform"

Storyboard.TargetProperty = "Angle" >

< DoubleAnimationUsingKeyFrames Durée = "0: 0: 0.4" >

< DiscreteDoubleKeyFrame KeyTime = " 0: 0: 0,000 " Valeur = " 0 " />

< DiscreteDoubleKeyFrame ] KeyTime = "0: 0: 0.050" Value = "45" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.100" Value = "90" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0,150" Value = "135 " />

< DiscreteDoubleKeyFrame KeyTime = " 0: 0: 0.200 " Valeur = "180" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.250" Valeur = "225" />

< DiscreteDoubleKeyFrame [19659021] KeyTime = "0: 0: 0.300" Value = "270" />

[19659113] < DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.350" Value = "315" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.400" Value = "360" [19659121] />

</ DoubleAnimationUsingKeyFrames >

</ Storyboard >

</ Grid.Resources >

< Grid.RowDefinitions >

< RowDefinition [19659121] />

</ Grid.RowDefinitions >

[19659079] < Grid Grid.Row = "0" x: Name = "LoadingVisual" RenderTransformOrigin = " 0.5,0.5 " HorizontalAlignment = " Center ">

< Grid.RenderTransform >

< TransformGroup >

< RotateTransform x: Name = "LoadingVisualAngleTransform" Angle = "0" CenterX = "0.5" CenterY [19659022] = "0,5" />

</ TransformGroup > [19659002] </ Grid.RenderTransform >

< Canvas Hauteur = "100" Largeur = "100" >

< Chemin Opacité = " 0.0625 " Fill = " {ThemeResource SystemAccentColor} " Data = " M 50 0 C 47.21875 0 44.960938 2.257812 44.960938 5.039062 L 44.960938 22.59375 C 44.960938 22.59375 C 44.960938 22.59375 C 44.960938 47.21875 C 44.960938 22.59375 25 27.632812 C 52.785156 27.632812 55.039062 25.375 55.039062 22.59375 L 55.039062 5.039062 C 55.039062 2.257812 52.78125 0 50 0 ZM 50 0 " />

< Chemin Opacity = "0.875" Fill = "{ThemeResource SystemAccentColor}" Données = "M 22.59375 44.960938 L 5.039062 44.960938 C 2.257812 44.960938 0 47.21875 0 50 C 0 52.785156 2.257812 55.039062 5.039062 55.039062 L 22.59375 55.039062 C 25.39062 44.960938 C 2.257812 44.960938 0 47.21875 0 50 C 0 52.785156 2.257812 55.039062 5.039062 55.039062 L 22.59375 55.039062 C 25.3756.0385 52.85 329.65 52.89.65 52.85 28.59 22.59375 44.960938 " />

< Path Opacity = " 0.75 " Fill [19659022] = "{ThemeResource SystemAccentColor}" Données = "M 34.183594 65.816406 C 32.214844 63.847656 29.023438 63.847656 27.058594 65.816406 L 14.644531 78.230469.65.816406 L 14.644531 78.230469.69 C 12.644531 78.230469,68 12,644531 78,230469,68 12,644531 87,3469,68 C 12,644531 78,230469,68 9.804688 87.324219 21.773438 85.355469 L 34.183594 72.941406 C 36.152344 70.976562 36.152344 67.785156 34.183594 65.816406 ZM 34.183594 65.816406 " /> [194590173] [19659002]20 [194590173]

20 [194590173]

20 [194590173]

[194590] = "0.625" Fill = "{ThemeResource SystemAccentColor}" Data = "M 50 72.367188 C 47.21875 72.367188 44.960938 74.625 44.960938 77.40960938 74.625 44.960938 44.960938 94.960938 C 44.960938 97.742188 47.21875 100 50 100 C 52.785156 100 55.039062 97.742188 55.039062 94.960938 L 55.039062 77.40625 C 55.039062 74.625 52.78125 72.367188 50 72.367188 ZM 50 72.367182] [194529] < Chemin Opacity = "0.375" Fill = "{ThemeResource SystemAccentColor}" Données = "M 85.355469 78.230469 L 72.941406 65.816406 C 70.976562 63.847656 67.785156 63.847656 65.816406 65.816406 C 63.847656 67.785156 63.847656 70.976562 65.816406 72.941406 L 78.230469 85.355469 C 80.195312 87.324219 83.386719 87.324219 85.355469 85.355469 C 87.324219 83.386719 87.324219 80.195312 85.355469 78.230469 ZM 85.355469 78.230469 « /> [19659002] < Chemin Opacity = "0.25" Fill = "{ThemeResource SystemAccentColor}" Les données = « M 94,960938 44,960938 L 77,40625 44,960938 C 74,625 44,960938 72,367188 47,214844 72,367188 50 C 72,367188 52,785156 74,625 55,039062 77,40625 55,039062 L 94,960938 55,039062 C 97,742188 55,039062 100 52,785156 100 50 C 100 47,21875 97,742188 44,960938 94,960938 44,960938 ZM 94,960938 44,960938 » />

<[19659020] Chemin Opacity = "0.125" Fill = "{ThemeResource SystemAccentColor}" Données = "M 85.355469 14.644531 C 83.386719 12.675781 80.195312 12.675781 78.230469 14.644531 L 65.816406 27.058594 C 63.847656 29.023438 63.847656 32.214844 65.816406 34.183594 C 67.785156 36.152344 70.976562 36.152344 72.941406 34.183594 L 85.355469 21.769531 C 87.324219 19.804688 87.324219 16.613281 85.355469 14.644531 ZM 85.355469 14.644531 « /> [19659002] < Chemin Opacity = "1" Fill = "{ThemeResource SystemAccentColor}" Données = "M 34.183594 27.058594 L 21.773438 14.644531 C 19.804688 12.675781 16.613281 12.675781 14.644531 14.644531 C 12.675781 16.613281 12.675781 19.804688 14.64454431 C 19.804688 12.675781 16.613281 12.675781 14.644531 14.644531 C 12.675781 16.613281 12.675781 19.804688 14.64454431 21.7695431 C12.675781 16.613281 12.675781 19.804688 14.64454431 21.7695831 C.19.704688 14.64454431 21.7695812 36.185234.1982 34.159.36.38.23 44 34.183594 34.183594 C 36.152344 32.214844 36.152344 29.023438 34.183594 27.058594 ZM 34.183594 27.058594 " />

[1965910620] Toile </

</ Viewbox >

</ Grid [19659022]>

</ Grille >

< / ControlTemplate >

</ Setter.Value >

</ Setter >

</ Style >

</ Page.Resources >

Comme vous pouvez le voir, j'ai extrait le style des ressources de la page – il est meilleur et plus ordonné à mon avis. Vous pouvez également le faire dans les ressources de l’application ou dans le cadre de l’instance de RadBusyIndicator.

Bonne nouvelle! Le plus dur est déjà fait. Et maintenant le plus simple: définir notre indicateur de chargement et y intégrer l'animation. Devinez quoi – il s'agit d'une seule ligne de code:

< primitives: RadBusyIndicator x: Name = "busyIndicator" IsActive = "True " ContentPosition = " Bottom " IndicatorAnimationStyle = " {StaticResource CustomBusyIndicatorAnimation} " />

Oh, mon Dieu! Où sont les bonnes pratiques dont j'ai parlé ci-dessus? Je devrais mettre du contenu à mon indicateur de chargement, et pourquoi pas quelque chose de plus qu'une simple chaîne:

< primitives: RadBusyIndicator x: Name = "busyIndicator" IsActive = "True" ContentPosition = "Bottom" IndicatorAnimationStyle = "{StaticResource CustomBusyIndicatorAnimation}" > [19659002] < primitives: RadBusyIndicator.ContentTemplate >

< DataTemplate >

< StackPanel Orientation = "Horizontal" Margin = "0 10 0 0 ">

< TextBlock Text = " L'été 2021 est en cours de chargement, s'il vous plaît wai t ... " />

< TextBlock Text = " {Binding} "[19659021] Marge = "5 0 0 0" />

< FontIcon Glyph [19659022] = "" FontFamily = "{ThemeResource SymbolThemeFontFamily}" Margin = "5 0 0 0" />

</ StackPanel >

</ DataTemplate [19659022]>

</ primitives: RadBusyIndicator.ContentTemplate >

</ primitives: RadBusyIndicator >

Et puisque je chéris votre volonté de gagner du temps et de d mon blog, je veux donner à cet échantillon un peu plus de moi. Je vais ajouter un bouton qui change le thème afin que nous puissions voir notre animation avec le thème sombre également. Voici le XAML complet et le résultat de notre petite expérience:

< Page

x: Class = "TelerikUIForWinUIIsAwesome.MainPage "

xmlns: primitives = " en utilisant: Telerik.UI.Xaml.Controls.Primitives "

xmlns: indicateur = "en utilisant: Telerik.UI.Xaml.Controls.Primitives.BusyIndicator"

Background = " {ThemeResource ApplicationPageBackgroundThemeBrush} ">

< Page.Resources >

< Style x: Key = "CustomBusyIndicatorAnimation" TargetType = "indicateur: BusyIndicatorAnimation" [19659022]>

< Setter Property = "Template" >

< Setter.Value >

< ControlTemplate > [19659002] < Grid VerticalAlignment = "Center" x: Name = "PART_LayoutRoot" >

< Grid.Resources >

<[19659020] Storyboard x: Nom = "PART_Animation"

BeginTime = " 00:00:00 "

RepeatBehavior = " Forever "

Storyboard.TargetName = "LoadingVisualAngleTransform"

Storyboard.TargetProperty = "Angle" >

< DoubleAnimationUsingKeyFrames Duration = "0: 0: 0.4" >

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0,000" Value = "0 " />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.050" Value = "45" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.100" Value = "90" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0,150" Value = "135" />

< DiscreteDoubleKeyFrame KeyTime = " 0: 0: 0,200 " Valeur = " 180 " />

< DiscreteDoubleKeyFrame ]Clé Heure = "0: 0: 0,250" Valeur = "225" />

[19659614] < DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.300" Value = "270" />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.350" Value = "315" [[19659121] />

< DiscreteDoubleKeyFrame KeyTime = "0: 0: 0.400" Value [19659022] = "360" />

</ DoubleAnimationUsingKeyFrames > [19659002] </ Storyboard >

</ Grid.Resources > [19659002] < Grid.RowDefinitions >

< RowDefinition />

</ Grid.RowDefinitions >

<[19659020] Grid Grid.Row = "0" x: Name = "LoadingVisual" RenderTransformOrigin = "0.5,0.5 " HorizontalAlignment = " Center ">

<[19659020] Grid.RenderTransform >

< TransformGroup >

< RotateTransform x: Name = "LoadingVisualAngleTransform" Angle = "0" CenterX = "0.5" CenterY="0.5" />

                                    </TransformGroup>

                                </Grid.RenderTransform>

                                    <Canvas Height=[19659023]"100" Width="100">

                                        <Path Opacity="0.0625" Fill="{ThemeResource SystemAccentColor}" Data="M 50 0 C 47.21875 0 44.960938 2.257812 44.960938 5.039062 L 44.960938 22.59375 C 44.960938 25.375 47.21875 27.632812 50 27.632812 C 52.785156 27.632812 55.039062 25.375 55.039062 22.59375 L 55.039062 5.039062 C 55.039062 2.257812 52.78125 0 50 0 Z M 50 0 " />

                                        <Path Opacity="0.875" Fill="{ThemeResource SystemAccentColor}" Data="M 22.59375 44.960938 L 5.039062 44.960938 C 2.257812 44.960938 0 47.21875 0 50 C 0 52.785156 2.257812 55.039062 5.039062 55.039062 L 22.59375 55.039062 C 25.375 55.039062 27.632812 52.785156 27.632812 50 C 27.632812 47.21875 25.375 44.960938 22.59375 44.960938 Z M 22.59375 44.960938 " />

                                        <Path Opacity="0.75" Fill="{ThemeResource SystemAccentColor}" Data="M 34.183594 65.816406 C 32.214844 63.847656 29.023438 63.847656 27.058594 65.816406 L 14.644531 78.230469 C 12.675781 80.195312 12.675781 83.386719 14.644531 85.355469 C 16.613281 87.324219 19.804688 87.324219 21.773438 85.355469 L 34.183594 72.941406 C 36.152344 70.976562 36.152344 67.785156 34.183594 65.816406 Z M 34.183594 65.816406 " />

                                        <Path Opacity="0.625" Fill="{ThemeResource SystemAccentColor}" Data="M 50 72.367188 C 47.21875 72.367188 44.960938 74.625 44.960938 77.40625 L 44.960938 94.960938 C 44.960938 97.742188 47.21875 100 50 100 C 52.785156 100 55.039062 97.742188 55.039062 94.960938 L 55.039062 77.40625 C 55.039062 74.625 52.78125 72.367188 50 72.367188 Z M 50 72.367188 " />

                                        <Path Opacity="0.375" Fill="{ThemeResource SystemAccentColor}" Data="M 85.355469 78.230469 L 72.941406 65.816406 C 70.976562 63.847656 67.785156 63.847656 65.816406 65.816406 C 63.847656 67.785156 63.847656 70.976562 65.816406 72.941406 L 78.230469 85.355469 C 80.195312 87.324219 83.386719 87.324219 85.355469 85.355469 C 87.324219 83.386719 87.324219 80.195312 85.355469 78.230469 Z M 85.355469 78.230469 " />

                                        <Path Opacity="0.25" Fill ="{ThemeResource SystemAccentColor}" Data="M 94.960938 44.960938 L 77.40625 44.960938 C 74.625 44.960938 72.367188 47.214844 72.367188 50 C 72.367188 52.785156 74.625 55.039062 77.40625 55.039062 L 94.960938 55.039062 C 97.742188 55.039062 100 52.785156 100 50 C 100 47.21875 97.742188 44.960938 94.960938 44.960938 Z M 94.960938 44.960938 " />

                                        <Path Opacity="0.125" Fill="{ThemeResource SystemAccentColor}" Data="M 85.355469 14.644531 C 83.386719 12.675781 80.195312 12.675781 78.230469 14.644531 L 65.816406 27.058594 C 63.847656 29.023438 63.847656 32.214844 65.816406 34.183594 C 67.785156 36.152344 70.976562 36.152344 72.941406 34.183594 L 85.355469 21.769531 C 87.324219 19.804688 87.324219 16.613281 85.355469 14.644531 Z M 85.355469 14.6 44531 " />

                                        <Path Opacity="1" Fill="{ThemeResource SystemAccentColor}" Data="M 34.183594 27.058594 L 21.773438 14.644531 C 19.804688 12.675781 16.613281 12.675781 14.644531 14.644531 C 12.675781 16.613281 12.675781 19.804688 14.644531 21.769531 L 27.058594 34.183594 C 29.023438 36.152344 32.214844 36.152344 34.183594 34.183594 C 36.152344 32.214844 36.152344 29.023438 34.183594 27.058594 Z M 34.183594 27.058594 " />

                                    </Canvas>

                                </Viewbox>

                            </Grid>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Page.Resources>

 

    <Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <primitives:RadBusyIndicator x:Name="busyIndicator" IsActive="True" ContentPosition="Bottom" IndicatorAnimationStyle="{StaticResource CustomBusyIndicatorAnimation}">

            <primitives:RadBusyIndicator.ContentTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal" Margin="0 10 0 0">

                        <TextBlock Text="Summer 2021 is loading, please wait..."/>

                        <T extBlock Text="{Binding}" Margin="5 0 0 0"/>

                        <FontIcon Glyph="" FontFamily="{ThemeResource SymbolThemeFontFamily}" Margin="5 0 0 0"/>

                    </StackPanel>

                </DataTemplate>

            </primitives:RadBusyIndicator.ContentTemplate>

        </primitives:RadBusyIndicator>

        <ToggleButton FontFamily=[19659023]"{ThemeResource SymbolThemeFontFamily}"

                      Content="" Padding="5" Margin="5"

                      VerticalAlignment="Top" HorizontalAlignment="Right"

                      ToolTipService.ToolTip="Change theme"

                      Click="ChangeAppTheme"/>

    </Grid>

</Page>

Custom BusyIndicator AnimationStyle. 'Summer 2021 is loading, please wait...' with a percentage number growing from 0% to 100%. And the indicator is a radial display of short lines, reminiscent of a sun, which alternate in shades of yellow to give a clockwise rotation feel. It's also shown in shades of blue, with a color selector, and in dark mode.

Why is it spinning so fast? Because I made it to, and because I can’t wait for the summer to come. 😎 And how did I manage to make the spinning sun yellow while the app is still running—through the system’s theme-related settings.

Bonus Section—Loading Indicator General Good Practices

If you are wondering when, how and what type of a loading indicator you should use, read on. If not, head out to the next section.

A busy indicator should be used for any action that takes longer than about 1.0 second. After a few seconds, the user’s attention begins to wander, and they may eventually wander away from your app.

There are two main types of indicators: indeterminate, offering looped animation, and determinate, which often use a percent-done animation. The one you choose depends primarily on how long the process will take. Of course, there could be combinations of both types of indicators.

Looped Animation

Looped animation indicators should be used only for fast actions—this type does not give any information about how long the user will have to wait. They are recommended for actions that take between 2-10 seconds. For anything that takes less than 1 second to load, it is distracting to use a looped animation, because users cannot keep up with what happened and might feel anxious about whatever flashed on the screen.

For this type, it can also be helpful to add additional clarity for the user by including text that explains why the user is waiting (e.g., “Loading comments…”).

From a development perspective, it can be tempting to use looped-animation progress indicators for all types of delays, including long ones, exactly because it does not require estimating the duration of the action.

However, for actions that take longer than 10 seconds, a Percent-done animation should be used.

Percent-done Animation

Percent-done loading indicators are the most informative type of wait-animation feedback. They show the current progress, how much has already been accomplished and how much is left. They deliver important information about (approximately) how long the wait time is. This information gives users control (that is, they can decide whether to wait or not); it decreases uncertainty about the length of the process and may reduce the perceived wait time.

A percent-done indicator may be used for actions that take less than 10 seconds if the action involves processing a series of documents or registries, because the user understands that the system is working with a set number of records. As with looped-animation indicators, it is good to include a text explanation of the process—for example, “Updating document 3 of 50.”

A percent-done indicator makes users develop an expectation for how fast the action is being processed. As a result, changes in speed will be noticed and will impact user satisfaction: If the progress moves quickly only to hang on the last percentage remaining, the user will become frustrated and the benefits of showing progress will be negated.

All Together

David Allen once said, “You can do anything, but you cannot do everything.” 😵 Therefore, it is recommended to always aim to set your efforts on what is most important and not let yourself feel discouraged about not take the chances, e.g., to:

Try out Telerik UI for WinUI

Another thing that is crucial is the understanding of mutuality. When an effort is mutual—in our case, from both our side and yours—it is always guaranteed to lead to the best possible results for both sides. You know we will not tire from encouraging you to share your feedback and help us shape the future of Telerik UI for WinUI together, right? Suggest or recommend anything that is important to you—your input will be a great factor in the future components and APIs of the roadmap.

You are more than welcome to:

  • Get in touch by email – Drop us a line, for anything related to product or just to say hi at TelerikWinUI@progress.com
  • Visit the Feedback Portal – Share any feature request (or bug report) that you might have
  • Head to Telerik Forums – Receive any technical help with the product

In case you missed it, here are some of the updates from the R1 2021 release. Aaand last, but not least, stay strong and healthy and mind your own busyness (and business of course! 🤓).

Le meilleur outil 2023 pour ta croissance Instagram !



Source link