Réplication d’une interface utilisateur de Noël dans .NET MAUI

Créons une interface utilisateur amusante pour l’application .NET MAUI sur le thème de Noël !

Joyeuses fêtes ! 🎄✨

La période de Noël est une période privilégiée à vivre avec nos proches, pleine de santé, d’amour et de joie. Alors que nous célébrons, c’est aussi l’occasion de maintenir nos compétences à jour et de continuer à apprendre des pratiques qui nous seront bénéfiques à tous au cours de la nouvelle année.

Dans cet article, nous allons relever un défi amusant : Réplication d’une interface utilisateur de Noël inspiré par un Conception de dribbles. 🎨 Nous explorerons les contrôles natifs .NET MAUI et en intégrerons même certains de l’interface utilisateur Progress Telerik pour Bibliothèque .NET MAUI d’une manière super simple et rapide ! 🚀

Avant de plonger dans le code, voici un conseil que je donne toujours : prenez un moment pour analyser la tâche à accomplir. Une compréhension approfondie du défi vous aidera à identifier les meilleures approches, économisant ainsi du temps et des efforts pendant le développement.

Maintenant, commençons !

Décomposer la conception originale en blocs

Notre première étape sera d’analyser l’interface utilisateur que nous allons répliquer. La conception se compose de trois écrans, chacun divisé en une ou plusieurs étapes numérotées et mises en évidence avec des couleurs différentes pour les rendre plus faciles à identifier.

Nous expliquerons chacune de ces étapes ainsi que les extraits de code correspondants. Examinons maintenant la division structurelle dans l’image suivante :

Maintenant que nous connaissons l’ordre dans lequel commencer à coder, plongeons-nous dans le vif du sujet ! 😎

Étape 1 : Introduction

La première étape comprend tous les éléments qui complètent la page d’introduction, il s’agit essentiellement d’une image, avec un bouton arrondi et deux textes. Tout le code que nous ajouterons ici sera placé dans un fichier appelé IntroPage.xaml.cs.

Commencez par la mise en page principale

Pour commencer, il est nécessaire de sélectionner une mise en page principale, qui contiendra tous les composants de l’interface utilisateur. Dans ce cas, en raison de la flexibilité qu’elle offre pour répliquer cette interface utilisateur, ainsi que de ses performances, nous sélectionnerons la disposition Grille.

Réglez le BackgroundColor de la ContentPage à #275653. (C’est la couleur verdâtre que vous voyez sur la première page.) Pour la mise en page principale, nous utiliserons une grille divisée en trois lignes, avec un RowSpacing de 40 pour assurer une meilleure séparation entre elles.

<Grid RowDefinitions="*,Auto,*" VerticalOptions="Center" Padding="25" RowSpacing="40">
  
</Grid>

Image et étiquettes du Père Noël

Ensuite, nous ajouterons une image du Père Noël ainsi que deux étiquettes de texte supplémentaires.

<Image Grid.Row="0" Source="santa" Aspect="AspectFit" HeightRequest="400"/> 
    <Label Grid.Row="1" FontSize="40" Margin="0,20,0,0"> 
	    <Label.FormattedText> 
		    <FormattedString> 
			    <Span Text="Gift from &#10;" TextColor="White"/> 
			    <Span Text="Santa" FontAttributes="Bold" TextColor="White"/> 
		    </FormattedString> 
		    </Label.FormattedText> 
	    </Label> 
    <Label Grid.Row="2" FontSize="20" Text="Buy a gift with delivery by&#10;Santa himself." TextColor="White"/>

<-- Add the next code block here -→

⚠️ Notez que pour le texte « Cadeau du Père Noël », nous avons utilisé FormattedText. J’ai choisi cette approche pour vous montrer une manière optimale et différente de créer la même étiquette avec plusieurs styles ! J’ai aussi utilisé 
 qui est une autre astuce qui vous permet d’insérer un saut de ligne dans votre texte.

Bouton Cercle

Pour terminer cette première étape, nous ajouterons un bouton circulaire positionné sur le côté droit, dont seulement une partie est visible. Il y a deux points clés à considérer ici :

1. Réalisation de la forme circulaire : Réglez simplement les deux HeightRequest et WidthRequest propriétés à la même valeur, puis définissez le CornerRadius propriété à la moitié de cette valeur. (Par exemple, définissez le HeightRequest et WidthRequest à 100, et le CornerRadius à 50.) Cela vous donnera un bouton parfaitement circulaire !

2. Créer l’illusion que le bouton est divisé en deux : Cela se fait facilement en ajustant les marges. Ensemble Margin="0,50,-50,0" où le -50 La marge sur le côté droit masque une partie du bouton, donnant l’impression qu’il n’est visible qu’à moitié.

Dans le code, cela ressemblera à ceci :

<Button Grid.Row="2" HorizontalOptions="End" BackgroundColor="White" HeightRequest="100" WidthRequest="100" CornerRadius="50" Padding="0" ImageSource="arrow" Margin="0,50,-50,0" />

Le résultat de notre première étape ressemblera à ceci :

✍️ Pour les étapes 2 et 3, créons un fichier nommé GiftListPage.xaml.cs.

Texte et icônes centrés

Pour le bloc d’en-tête, nous commencerons par ajouter les composants requis par notre interface utilisateur : l’icône du menu hamburger à gauche, le texte principal au centre et l’icône du panier à droite.

<Grid ColumnDefinitions="*,auto,*" RowDefinitions="Auto,Auto">
    <Image Grid.Column="0" Grid.Row="0" Source="hamburger" HorizontalOptions="Start"/>
    <Label Grid.Column="1" Grid.Row="0" Text="Gifts" FontAttributes="Bold"/>
    <Image Grid.Column="2" Grid.Row="0" Source="shoppingcart" HorizontalOptions="End"/>  
      
    <!-- Add the code that will be explained in the following paragraph here. –>
</Grid>

Bloc à bords arrondis et sapin de Noël

Pour compléter l’en-tête, il suffit d’ajouter un conteneur arrondi avec les éléments suivants :

• Une étiquette de texte et un bouton : Pour le composant bouton, nous utiliserons le Contrôle des boutons Telerik .NET MAUI
• Une image d’arbre qui chevauche légèrement les autres composants

Préparation du projet pour intégrer l’interface utilisateur Telerik pour la bibliothèque .NET MAUI

Puisque nous utiliserons le bouton Telerik, il est important de préparer le projet pour utiliser ce contrôle. Le même processus d’installation fonctionnera également pour d’autres contrôles Telerik pour .NET MAUI.

Gardez à l’esprit que les étapes d’installation ne doivent être effectuées qu’une seule fois, vous n’avez donc pas besoin de les répéter pour chaque contrôle. Pour commencer, veuillez suivre ces étapes :

• Créez un compte Telerik : Pour accéder aux packages d’interface utilisateur Telerik pour .FILETvous aurez besoin d’un Compte Telerik sur le site Progress Telerik.
• Téléchargez le programme d’installation d’essai Progress: Pendant le processus de téléchargement, sélectionnez le Interface utilisateur Telerik pour .NET MAUI option et suivez les instructions fournies. Une fois installé, vous pouvez profiter d’un essai gratuit pendant 30 jours.

• Ouvrez Visual Studio : Accédez à Outils ➡ Gestionnaire de packages NuGet ➡ Paramètres du gestionnaire de packages. Une fenêtre contextuelle apparaîtra. Dans la fenêtre contextuelle, accédez au Sources des packages et ajoutez une nouvelle source avec les détails suivants :

• Accédez au gestionnaire de packages NuGet : Connectez-vous en utilisant les informations d’identification de votre compte Telerik. Réglez le Source du paquet au telerik.com source que nous avons créée plus tôt. Pour déterminer quel package NuGet installer :
• Si vous utilisez une licence d’essai, sélectionnez l’option Telerik.UI.pour.Maui.Trial emballer.
• Si vous utilisez une licence commerciale, sélectionnez l’option Telerik.UI.pour.Maui emballer.

• Accédez à MauiProgram.cs : Ajouter .UseTelerik() juste après .UseMauiApp<App>()comme ça:

.UseMauiApp<App>()
.UseTelerik();

• Dans votre XAML, ajoutez l’espace de noms suivant :

⚠️ For a more detailed installation guide, I recommend checking out the official documentation: First Steps with Telerik UI for .NET MAUI in Visual Studio.

We are now ready to add both the Telerik Button and the other controls:

<Border Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" BackgroundColor="#e6efef" 
    Stroke="Transparent" 
    StrokeShape="RoundRectangle 20,20,20,20" 
    HeightRequest="150" 
    Margin="0,20,0,0" 
    Padding="20"> 
    <VerticalStackLayout Spacing="8"> 
    <Label Text="Do you need to use" /> 
    <Label Text="Elves help?" FontAttributes="Bold" /> 
    <telerik:RadButton x:Name="button" Text="Try it now" TextColor="White" BackgroundColor="#c42f21" FontAttributes="Bold" CornerRadius="15" HorizontalOptions="Start" WidthRequest="80" HeightRequest="35" Padding="0" FontSize="11" Margin="0,15,0,0"/> 
</VerticalStackLayout> 
</Border>

✍️ Pour les bords arrondis, j'ai utilisé le Border élément visuel. C'est incroyablement utile et vous permet de personnaliser chaque bord individuellement ! Si vous souhaitez en savoir plus sur le Borderje recommande de vérifier ce matériel.

Le résultat visuel de notre étape ressemblera à ceci :

Étape 3 : Catégories

Pour développer cela, nous le diviserons en deux parties :

1. La structure du composant liste utilisant Telerik CollectionView
2. La conception des éléments de la liste

Liste des catégories

Commençons par ajouter le titre de la liste et un Vue de la collection .NET MAUIce qui nous permettra d'afficher une liste d'éléments, dans ce cas, les catégories de Noël. Au sein du VueCollectionj'inclurai également la mise en page qui contiendra tous les éléments de la liste.

⚠️ Il est important de noter que Progress Telerik étant déjà installé dans notre projet, il n'est pas nécessaire de répéter le processus. Vous pouvez maintenant simplement ajouter les contrôles dont vous avez besoin.

Ajoutons le RadCollectionView :

<Label Text="Categories" FontAttributes="Bold" FontSize="16" Margin="0,20"/> 
    <telerik:RadCollectionView x:Name="collectionView" 
    ItemsSource="{Binding categories}" 
    DisplayMemberPath="Categories"> 
    <telerik:RadCollectionView.ItemTemplate> 
    <DataTemplate> 
    <Border Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f5f7f7" 
	    Stroke="Transparent" 
	    StrokeShape="RoundRectangle 20,20,20,20" 
	    HeightRequest="100" 
	    Margin="0,5" 
	    Padding="10"> 
    <Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" RowSpacing="5" Padding="10" VerticalOptions="Center"> 
	    <!-- Add all the code here for the elements of this step –> 
</Grid> 
</Border> 
</DataTemplate> 
</telerik:RadCollectionView.ItemTemplate> 
</telerik:RadCollectionView>

CollectionVoir l'élément

La carte que nous allons créer aura des bords arrondis, une image, deux éléments de texte et une icône en forme de flèche.

<Image Grid.Column="0" Grid.Row="0" Source="{Binding Picture}" HeightRequest="70" WidthRequest="70" Grid.RowSpan="2" Margin="0,0,10,0"/>

<Label Grid.Column="1" Grid.Row="0" Text="{Binding Description}" FontAttributes="Bold" VerticalTextAlignment="End"/>

<Label Grid.Column="1" Grid.Row="1" Text="{Binding Count}" TextColor="Silver" VerticalTextAlignment="Start"/>

<Image Grid.Column="2" Grid.Row="0" Source="smallarrow" HeightRequest="15" WidthRequest="15" Grid.RowSpan="2" />

Le résultat visuel de notre étape ressemblera à ceci :

Disposition principale

Ensuite, nous créerons la troisième page, que nous nommerons GiftDetailsPage.xaml.cs. Cette page comprendra les étapes 4 et 5, avec un effet de bouton « flottant », où les boutons de l'étape 5 restent fixes au-dessus du contenu et restent stationnaires même lors du défilement. Bien que l’effet commence à l’étape 5, à partir de ce moment-là, nous devons mettre en place la structure qui nous permettra de tout construire.

Nous obtiendrons cet effet « flottant » en ajoutant les éléments suivants :

• Une grille principale avec une seule rangée.
• A l'intérieur de cette grille, nous ajouterons un ScrollView pour activer le défilement. Dans ce ScrollView, nous placerons un grille qui sera chargée de contenir les éléments dans la zone de défilement (c'est-à-dire l'image d'en-tête, le nom et la description).
• En dehors du ScrollView, mais toujours dans la grille principale, nous ajouterons le deux boutons cela aura le effet « flottant ».

Le code ressemblera à ceci :

<Grid RowDefinitions="*"> 
    <ScrollView Grid.Row="0"> 
	    <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto" Margin="10" RowSpacing="5"> 
	    <!--Add the step number 4 here--> 
	    <!--Add the step number 5 here--> 
	    </Grid> 
    </ScrollView> 
    
    <!--Add Floating Buttons form the step number 5 here --> 
</Grid>

Ensuite, ajoutez l'image avec les bordures arrondies de l'étape 4. Pour arrondir les bords, nous utiliserons le contrôle Bordures, comme dans les étapes précédentes.

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#f5f7f7" 
Stroke="Transparent" 
Margin="0,0,0,20" 
StrokeShape="RoundRectangle 20,20,20,20" 
HeightRequest="380"> 
<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Source="cake" HorizontalOptions="Fill" Aspect="Fill"/> 
</Border>

Le résultat visuel de notre étape ressemblera à ceci :

Étape 5 : Descriptions détaillées

Continuons en ajoutant les éléments du titre « Nouveau », le nom du produit et le prix, structurés comme suit :

<!-- New title--> 
<Label Grid.Row="1" Grid.Column="0" TextColor="#275653" FontSize="15" Text="New" Padding="15,0" FontAttributes="Bold"/>

<!-- Product name--> 
<Label Grid.Row="1" Grid.Column="1" TextColor="#872017" FontSize="20" Text="$2.99" FontAttributes="Bold" HorizontalTextAlignment="End" Padding="15,0"/>

<!-- Price--> 
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" FontSize="25" Padding="15,0"> 
<Label.FormattedText> 
    <FormattedString> 
	    <Span Text="Christmas#10;" /> 
	    <Span Text="chocolate muffins" FontAttributes="Bold"/> 
    </FormattedString> 
</Label.FormattedText> 
</Label>

Description et texte

<Label Grid.Row="3" Grid.Column="0" TextColor="#275653" FontSize="15" Text="Description" Padding="15,0" FontAttributes="Bold" Margin="0,20,0,0"/> 

<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" TextColor="#99a5a5" Padding="15,0" Text="Chocolate muffins are an ideal gift for someone close to you, especially for chocolate lovers. These delightful treats are beautifully wrapped and adorned with gingerbread cookies, adding a festive touch to their presentation. Their rich chocolatey flavor and soft, moist texture make them perfect for any special moment, whether it's a holiday celebration, a cozy family gathering, or simply to show someone you care.&#10;&#10;Not only do they make a thoughtful gift, but they also pair wonderfully with a warm cup of coffee, hot cocoa, or tea, making them the perfect companion for those quiet, indulgent moments. Each muffin is crafted with care to bring a smile to the faces of your loved ones, reminding them of the joy and comfort that the holiday season brings..&#10;&#10;Ingredients:Made with the finest baking powder, sugar, butter milk, water, chocolate chips, and natural unsweetened cocoa powder."/>

Boutons flottants

Enfin, nous avons atteint les boutons flottants ! Maintenant que nous avons une structure bien conçue en place, accédez à la section de la grille où il est indiqué : <!-- Add Floating Buttons from Step 5 here -> et insérez le code suivant :

<!--Floating Buttons-->

<Grid ColumnDefinitions="Auto,*" Grid.Row="0" HorizontalOptions="Fill" BackgroundColor="White" VerticalOptions="End" Padding="20,5,20,10" >

    <Button Grid.Column="0" FontAttributes="Bold" ImageSource="heart" BackgroundColor="#e6efef" WidthRequest="60" CornerRadius="20" VerticalOptions="End" HeightRequest="45" />
    
    <Button Grid.Column="1" Text="Buy now" FontAttributes="Bold" BackgroundColor="#c42f21" CornerRadius="20" TextColor="White" HeightRequest="45" Margin="15,0,0,0"/>

</Grid>

✨ Et voilà ! 🎉 Votre écran devrait maintenant ressembler à celui ci-dessous :

Conclusion

C'est ça! 🤩 En quelques étapes simples et rapides, vous disposez désormais de trois écrans complets pour une application en .NET MAUI, utilisant un mélange d'éléments natifs et de contrôles Telerik ! J'espère que cet article a été incroyablement utile et ajoute de la valeur à votre parcours de développement. 🚀

Premiers pas avec l'interface utilisateur pour .NET MAUI

Merci d'avoir lu cet article! 💚💕 À la prochaine fois ! 🙋‍♀️