Festival XAML de janvier pour .NET MAUI – Carte de suggestions Instagram

Apprenez à créer les cartes d’amis suggérées comme vous l’avez vu sur Instagram. Nous utiliserons XAML dans une application .NET MAUI.

Bienvenue au XAML Fest de janvier ! Cet article vous expliquera comment créer une carte de suggestion Instagram. Si vous n’êtes pas familier, il s’agit de la carte qui apparaît dans une liste horizontale lorsqu’Instagram suggère de nouveaux amis.

Nous aborderons divers sujets complets, vous apprenant comment les appliquer de manière simple. Cela inclut l’utilisation de bordures, l’arrondi d’une image, etc. Alors, commençons! 💪

Le XAML Fest de janvier est une initiative d’un mois au cours de laquelle nous présentons diverses réplications d’interfaces utilisateur emblématiques. Si vous souhaitez en savoir plus sur ce voyage passionnant, je vous encourage à consulter l’article «Bienvenue au XAML Fest de janvier pour .NET MAUI.»

Pour une compréhension globale, voici un aperçu des sujets qui structureront l’explication de notre article :

• Conseils pour maximiser l’expérience d’apprentissage
• Comprendre la structure de l’interface utilisateur
• Préparation avec des données fictives
• Configuration de la structure principale du code
• Développer chaque étape en détail

✍️ Conseils pour maximiser l’expérience d’apprentissage

Avant de nous lancer dans l’aventure du codage et de la conception, il est essentiel de vous assurer que vous êtes parfaitement préparé à tirer le meilleur parti de cet article. Voici quelques conseils utiles pour améliorer votre expérience et augmenter votre productivité lorsque vous recréez la carte de suggestion Instagram :

• Référence visuelle de l’interface utilisateur d’origine : Pour commencer, nous afficherons une image de l’interface utilisateur d’origine, segmentée en étapes. Chacun correspond à un aspect différent du design que nous allons aborder.

• Analyse approfondie de la conception : Chaque étape comprendra une image mettant en évidence l’élément de conception spécifique sur lequel nous nous concentrons. Cette approche offre un examen clair et ciblé de chaque composant de conception.

• Sections de codage guidées : Dans chaque section de codage, gardez un œil sur un commentaire indiquant : « Insérez ici le code décrit dans la section suivante. » Ce commentaire vous invite à insérer l’explication du code à venir juste à ce stade, garantissant ainsi une expérience de codage fluide et organisée.

Avec tous ces outils à votre disposition, vous êtes désormais entièrement équipé pour vous plonger dans le code de l’interface utilisateur. Préparez-vous pour un voyage passionnant qui offre une expérience pratique et une connaissance approfondie de .NET MAUI, en se concentrant particulièrement sur XAML pour l’interface graphique. Commençons cette agréable aventure : bon codage ! 🚀🎨🌟

Comprendre la structure de la carte

Avant de commencer à coder, prenez le temps de comprendre la portée et les implications de votre projet. Cette étape initiale consiste à décomposer la conception en parties plus petites et gérables, chacune étant appelée « étape ». Chaque étape doit avoir un numéro de commande, une description et une couleur unique pour une identification facile. Cela facilite non seulement le processus de développement, mais rend également ce guide plus facile à suivre. Commençons!

Configuration de la structure principale du code

Commençons par développer la structure principale du code. Celui-ci contiendra le code de toutes les étapes décrites dans cet article. Considérez cela comme la création du squelette de votre carte, servant de base à nos prochaines étapes. Commençons!

Ajout d’une vue Collection

Notre objectif est de transformer une conception de carte unique en une liste horizontale à l’aide d’un CollectionView. Cela nous permettra d’ajouter des cartes au CollectionView correspondant au nombre d’enregistrements dans notre source de données.

<CollectionView HorizontalScrollBarVisibility="Never"
		        ItemsSource="{Binding suggestions}"
			    ItemsLayout="HorizontalList"
			    HorizontalOptions="Fill">
    <CollectionView.ItemTemplate>
	    <DataTemplate> 
		    <!-- Here goes the code explained in the next explanation -- > 
	    </DataTemplate> 
    </CollectionView.ItemTemplate> 
</CollectionView>

Préparation avec des données simulées

À des fins de démonstration, nous présenterons quelques données fictives. De cette façon, vous pouvez voir votre liste en action.

➖ Créez votre modèle : Commencez par créer la classe Suggestions.cs, qui vous servira de modèle.

public class Suggestions
{
    public string Picture { get; set; } 
    public string Name { get; set; } 
    public string Handle { get; set; } 
}

➖ Remplissage de données fictives : Commencez par créer le Classe SuggestionViewModel. Ci-dessous, j’ai fourni des données pour trois cartes, mais n’hésitez pas à en ajouter autant que nécessaire pour votre exemple.

public class SuggestionViewModel
{
public ObservableCollection<Suggestions> suggestions { get; set; } 
    public SuggestionViewModel() { 
    suggestions = new ObservableCollection<Suggestions>
	    { 
		    new Suggestions { Picture = "brillante", Name="Mujer Brillante RD", Handle="mujerbrillanterd"}, 
		    new Suggestions { Picture = "jose", Name="Jose Perez", Handle="joseperez"}, 
		    new Suggestions { Picture = "marie", Name="Marie White", Handle="mariawhite"} 
	    }; 
    } 
}

Connexion des données à la page XAML

Pour lier ces données au XAML, nous utiliserons la page par défaut nommée MainPage.xaml. Nous ajusterons le code associé derrière (MainPage.xaml.cs) et ajouterons le BindingContext comme suit :

public MainPage() 
{ 
    InitializeComponent(); 
    BindingContext = new SuggestionViewModel(); 
}

Définition de la mise en page principale

Nous avons presque la structure principale prête à se développer étape par étape ! Il suffit d’ajouter la mise en page principale. Nous utiliserons un Disposition de la pile verticalequi sera situé dans CollectionView et contiendra les blocs de code des étapes un et deux.

<VerticalStackLayout Padding="5,10" WidthRequest="170"> 
    <!-- Here goes the code explained in the next explanation -- > 
</VerticalStackLayout>

✍️ Pour plus d’informations sur les mises en page en .NET MAUI, je vous invite à lire l’article «Explorer les options de mise en page dans .NET MAUI.»

Développer chaque étape en détail 🕵️‍♂️

Notre structure est désormais en place ! 💃 Commençons par créer les éléments visuels pour chaque étape.

Étape 1 : Cadre

Dans la session précédente, vous verrez un code indiquant «<!-- Here goes the code explained in the next explanation -->.» Vous devez ajouter le code que vous apprendrez à créer exactement ici.

Cette étape sert de conteneur principal. Elle ne nécessite qu’un seul élément : un cadre aux bords arrondis qui englobe tout le contenu de la carte. Explorons ce processus :

➖ Boîte aux bords arrondis : Nous utiliserons le Frontière contrôle pour l’ajouter. Une propriété clé est Forme de traitce qui nous permet de spécifier un rectangle aux bords arrondis, ayant une valeur de rondeur de 10, comme démontré ci-dessous :

<Border BackgroundColor="{AppThemeBinding Light=White,Dark=#222327}" 
	    HeightRequest="220" 
	    StrokeShape="RoundRectangle 10"> 
    <!-- Add a layout of the following step here -- > 
</Border>

Dans le Couleur de l’arrière plan propriété, j’ai ajouté le Extension de balisage AppThemeBinding. Cela nous permet d’attribuer des valeurs en fonction du mode d’apparence actif sur l’appareil de l’utilisateur. Dans ce cas, la couleur de fond sera blanche en mode clair et grise en mode sombre.

✍️ Ce sujet est très intéressant. Je vous invite à explorer davantage en lisant l’article «Gestion des modes clair et sombre avec .NET MAUI.»

Maintenant, vous verrez comment votre résultat devrait apparaître après la première étape. Deux captures d’écran sont fournies pour montrer les résultats en modes clair et sombre.

⚠ N’oubliez pas qu’il y a trois cartes car nous avons initialement ajouté trois enregistrements aux données fictives ci-dessus.

Étape 2 : Contenu

Puisque le contrôle aux frontières n’autorise qu’un seul élément à l’intérieur et qu’il contient diverses informations, incluons tout dans un disposition de la grille. J’ai choisi la grille car elle offre une plus grande flexibilité dans l’organisation des éléments nécessaires.

<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto" RowSpacing="7" HorizontalOptions="Fill"  VerticalOptions="Center" Padding="5,10"> 

    <!-- Add the close icon code here --> 
    <!-- Add the rounded image here --> 
    <!-- Add the names & handle here --> 
    <!-- Add the follow button here -->

</Grid>

Maintenant, nous allons ajouter chacun des éléments de la carte. Ce sont les suivants :

➖ Icône Fermer : Commençons par ajouter l’icône Fermer (X) située en haut à droite.

<Image Grid.Row="0" HorizontalOptions="End" VerticalOptions="Start" Source="close" HeightRequest="11" WidthRequest="11" Margin="0,0,5,0"/>

<!-- Insert the code being described in the following section here -->

➖ Image arrondie : Dans les articles précédents, j’ai utilisé AvatarView du Boîte à outils de la communauté .NET MAUI pour créer une image arrondie. Je vais maintenant vous démontrer une méthode alternative en vous montrant comment obtenir le même effet manuellement à l’aide d’un cadre.

<Frame Grid.Row="0" IsClippedToBounds="True" CornerRadius="40" HeightRequest="80" WidthRequest="80" HasShadow="False" Padding="0"> 
    <Image Source="{Binding Picture}" Aspect="AspectFill" /> 
</Frame> 

<!-- Insert the code being described in the following section here -->

➖ Nom et pseudo :

<Label Grid.Row="2" HorizontalTextAlignment="Center" Text="{Binding Name}" FontSize="14" FontAttributes="Bold"/>

<Label Grid.Row="3" HorizontalTextAlignment="Center" Text="{Binding Handle}" FontSize="14" TextColor="Silver"/>

<!-- Insert the code being described in the following section here -->

➖ Bouton Suivre :

<Button Grid.Row="4" CornerRadius="10" TextColor="White" HorizontalOptions="Fill" HeightRequest="10" Text="Seguir" BackgroundColor="DodgerBlue"/>

Notre dernière partie est maintenant prête ! 😎 Votre résultat devrait ressembler à l’image suivante en mode clair et sombre :

Et notre carte de suggestions Instagram est terminée !

Merci d’avoir lu! 👋 À la prochaine fois ! 💚💕