XAML Fest de janvier pour .NET MAUI – interface utilisateur de la carte X (Twitter)

Notre prochain article XAML Fest explique comment créer une interface utilisateur comme la célèbre carte X (Twitter).

Bienvenue dans le prochain article du XAML Fest de janvier ! Aujourd’hui, nous nous plongeons dans la conception et la création d’une interface utilisateur familière et appréciée par beaucoup : la carte Twitter. Étape par étape, vous découvrirez comment répliquer cette carte pour votre propre application .NET MAUI.

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 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 la carte
• Configurer d’abord la structure du code principal
• Préparation avec des données fictives
• 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 Twitter :

• Référence visuelle de l’interface utilisateur d’origine : Pour commencer, nous afficherons une image de la carte Twitter originale, segmentée en sections. Chaque section correspond à un aspect différent de la conception que nous aborderons.

• Analyse de conception : Chaque section 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 qui dit : «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 la carte Twitter. 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. Lançons-nous dans cette aventure agréable : bon codage ! 🚀🎨🌟

Comprendre la structure de la carte

Dans cette section, nous approfondirons la structure de la carte Twitter que nous sommes sur le point de créer. Pour cet article nous conserverons une simple fiche, qui ne comprend qu’une description et une image. L’objectif est que vous appreniez à structurer correctement les éléments.

Nous diviserons la carte en segments, que nous appellerons « étapes ». Chaque étape sera distinguée par une couleur unique et soulignée par des lignes en forme de points. Regardons de plus près.

Configurer d’abord la structure principale du code

Avant de plonger dans chaque étape, commençons par définir la structure de code principale de la carte : considérez-la comme une esquisse du contour dans le code. Cela servira de base sur laquelle résidera le contenu de nos prochaines étapes. Commençons!

Ajout d’une vue Collection

N’oubliez pas que nous construisons une liste ! Tout comme les tweets sont répertoriés, nous préparerons une scène pour accueillir les éléments, quelle que soit la longueur de leur contenu. Pour y parvenir, nous utiliserons un CollectionView. Si vous ne le connaissez pas, un CollectionView est un élément visuel polyvalent conçu pour afficher des listes de données avec diverses configurations de mise en page.

<CollectionView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Never"
       ItemsSource="{Binding twitterCardDataList}">

	    <CollectionView.ItemTemplate> 
		    <DataTemplate> 
			    <!-- Here goes the code explained in the next explanation -- > 
		    </DataTemplate> 
	    </CollectionView.ItemTemplate>

</CollectionView>

Disposition principale

La grille organise ses enfants en lignes et en colonnes, permettant un dimensionnement proportionnel et absolu. Au-delà de ses performances impressionnantes, il est également convivial. Nous utiliserons la grille pour structurer les éléments visuels de notre carte.

Pour commencer, recherchez le commentaire dans l’extrait de code précédent intitulé «<!-- Here goes the code explained in the next explanation --> » et insérez-y le code suivant :

<!-- Main structure--> 
<Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto" RowSpacing="10" Margin="20" Padding="20">

    <!--Insert the code corresponding to Step 1's explanation here.-- > 
    <!--Insert the code corresponding to Step 2's explanation here.-- > 
    <!--Insert the code corresponding to Step 3's explanation here.-- >

</Grid>

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 pourrez voir votre liste en action une fois que vous aurez terminé ce guide.

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

public class TwitterCard
{ 
    public string UserName { get; set; } 
    public string UserHandle { get; set; } 
    public string PublicationTime { get; set; } 
    public string TweetDescription { get; set; } 
    public string TweetImageSource { get; set; } 
    public int CommentsCount { get; set; } 
    public int ReTweetCount { get; set; } 
    public int LikesCount { get; set; } 
    public int StatsCount { get; set; } 
}

Remplissage de données fictives : Commencez par créer le Classe TwitterCardViewModel. 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 TwitterCardViewModel 
{

    public ObservableCollection<Models.TwitterCard> twitterCardDataList { get; set;}
     
    public TwitterCardViewModel() 
    { 
	    twitterCardDataList = new ObservableCollection<Models.TwitterCard> 
	    { 
		    new Models.TwitterCard 
		    { 
			    UserName = "Karol Bass", 
			    UserHandle = "@KarolBass", 
			    PublicationTime = "2s", 
			    TweetDescription = "Take a look at the latest article in the Progress blog. It covers the exciting new features in .NET MAUI and how they can benefit your mobile app development. Don't miss out!", 
			    TweetImageSource = "karolbass", 
			    CommentsCount = 10, 
			    ReTweetCount = 20, 
			    LikesCount = 30, 
			    StatsCount = 40 
		    }, 
		    new Models.TwitterCard 
		    { 
			    UserName = "Jessy Rose", 
			    UserHandle = "@JessyRose8194", 
			    PublicationTime = "10s", 
			    TweetDescription = "This is the fourth tweet. It's a great day to explore the world of .NET MAUI development. Stay motivated and keep coding!", 
			    TweetImageSource = "jessy", 
			    CommentsCount = 8, 
			    ReTweetCount = 18, 
			    LikesCount = 28, 
			    StatsCount = 38 
		    }, 
		    new Models.TwitterCard 
		    { 
			    UserName = "Katthy White", 
			    UserHandle = "@KatthyWhite", 
			    PublicationTime = "5m", 
			    TweetDescription = "This is the third tweet. Let's dive deep into the world of cross-platform app development with .NET MAUI. Join me on this exciting journey!", 
			    TweetImageSource = "katty", 
			    CommentsCount = 5, 
			    ReTweetCount = 15, 
			    LikesCount = 25, 
			    StatsCount = 35 
			    }
	    
		    };
    
	    } 
}

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 : Image et nom du profil

Placez le code détaillé dans cette étape à l’endroit désigné dans le bloc précédent, marqué comme «<! -- Insert here the code corresponding to the explanation of Step 1.-->»

Cette étape est composée de différents éléments :

➖ Image de profil arrondie :

Pour utiliser l’image, nous utiliserons l’AvatarView du Boîte à outils de la communauté .NET MAUI.

1 – Installation: Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2 – Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UtiliserMauiApp()ajouter :

.UseMauiCommunityToolkit()

3 – Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolkit](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)"

4 – Utilisation d’AvatarView : Maintenant, vous pouvez incorporer AvatarView dans votre XAML :

<toolkit:AvatarView Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" 
		    ImageSource="{Binding TweetImageSource}" 
		    BorderColor="Transparent" 
		    VerticalOptions="Start" 
		    Margin="0,0,10,0" 
		    HeightRequest="50" 
		    WidthRequest="50" 
		    CornerRadius="25”/>

➖ Nom d’utilisateur, identifiant et heure de publication

Cette section comprend trois détails distincts : le nom d’utilisateur, le pseudo et l’horodatage de publication.

Bien que nous puissions utiliser trois étiquettes distinctes pour cela, l’optimisation du code et des performances est toujours bénéfique. Une autre alternative consiste à utiliser Texte formaté.

Cela nous permet d’appliquer des styles variés au sein d’une seule étiquette, rationalisant ainsi le processus comme illustré ci-dessous :

<Label Grid.Column="1" Grid.Row="0"> 
    <Label.FormattedText> 
	    <FormattedString> 
		    <Span Text="{Binding UserName, StringFormat="{0} "}" FontAttributes="Bold" /> 
		    <Span Text="{Binding UserHandle, StringFormat=" {0} "}" TextColor="#576169" /> 
		    <Span Text="{Binding PublicationTime, StringFormat=" {0}"}" TextColor="#576169" /> 
	    </FormattedString> 
    </Label.FormattedText> 
</Label>
<!-- Insert the code being described in the following section here -->

✍️ J’ai utilisé Texte formaté pour formater les segments de texte susmentionnés. Il fournit un moyen pratique de structurer les chaînes. Pour approfondir ce sujet, visitez la documentation.

A la fin de cette étape, vous obtiendrez un résultat comme l’image suivante :

Étape 2 : Contenu

Dans la deuxième étape, nous ajouterons une brève description et une photo. C’est simple, comme le démontre l’extrait de code ci-dessous.

<!-- Tweet description --> 
<Label Grid.Column="1" Grid.Row="1" Text="{Binding TweetDescription}"/> 

<!-- Tweet image--> 
<Frame Grid.Column="1" Grid.Row="2" BorderColor="Transparent" HeightRequest="200" HasShadow="False" CornerRadius="12" Padding="0" IsClippedToBounds="True"> 
    <Image Source="{Binding TweetImageSource}" Aspect="AspectFill"/> 
</Frame>

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

Pour obtenir des coins arrondis pour l’image, j’ai utilisé un cadre. Alternativement, vous pouvez utiliser Bordures .NET MAUI.

Finalement, vous obtiendrez un résultat semblable à l’image suivante :

Étape 3 : Interactions

🎉 Nous sommes arrivés à la dernière étape ! Dans cette phase, nous incorporerons diverses icônes 🖼️ qui symbolisent les interactions, ainsi que leurs comptes respectifs. 🔢

Nous exploiterons la puissance de FlexLayout, en nous concentrant sur la propriété JustifyContent, qui vous permettra de déterminer la répartition spatiale des éléments enfants le long de l’axe principal.

Pour ceux qui ne connaissent pas FlexLayout, considérez-le comme un StackLayout avancé. Il aligne non seulement les éléments enfants dans des piles horizontales ou verticales, mais les enveloppe également en cas de débordement dans une seule ligne ou colonne. Cela permet un meilleur contrôle sur les nuances de mise en page, du dimensionnement à l’alignement. Pour une analyse plus approfondie, consultez l’article «Explorer les options de mise en page dans .NET MAUI.»

Voyons comment faire cela dans le code :

<!-- Interactions--> 
<FlexLayout Grid.Row="3" Grid.Column="1" 
            JustifyContent="SpaceBetween" 
            AlignItems="Center" >

    <!-- Comments --> 
    <Image Source="comment" WidthRequest="15" HeightRequest="15"/> 
    <Label Text="{Binding CommentsCount}" />
     
    <!--Re-Tweet--> 
    <Image Source="retweet" WidthRequest="15" HeightRequest="15"/> 
    <Label Text="{Binding ReTweetCount}" />
    
    <!--Likes--> 
    <Image Source="heart" WidthRequest="15" HeightRequest="15"/> 
    <Label Text="{Binding LikesCount}" />
     
    <!--Stats--> 
    <Image Source="stats" WidthRequest="15" HeightRequest="15"/> 
    <Label Text="{Binding StatsCount}" />
     
    <!--Downloads--> 
    <Image Source="share" WidthRequest="15" HeightRequest="15"/> 

</FlexLayout>

Finalement, vous obtiendrez un résultat semblable à l’image suivante :

Mais il y a plus :

Rappelez-vous qu’au début de cet article, nous avons tout configuré, avec des données simulées (simulées) pour afficher une liste de Tweets. Maintenant, voici le résultat final !

Et notre X (Twitter) Card est terminée !

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