Vous avez toujours voulu recréer l’en-tête du profil LinkedIn ? Jetons un coup d’œil aux étapes impliquées dans cette interface utilisateur.
Bienvenue au XAML Fest de janvier ! Cet article vous expliquera comment créer un en-tête de profil LinkedIn, en utilisant le profil Microsoft comme exemple.
Nous explorerons divers conseils et techniques, tels que le chevauchement des contrôles, l’utilisation de bordures, l’exploitation de la boîte à outils communautaire .NET MAUI, et bien plus encore. Ouvrez Visual Studio ou Visual Studio Code et rejoignez-nous dans ce voyage créatif pour donner vie à cette interface utilisateur ! 💪
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
- Définition de la mise en page principale
- 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 l’interface utilisateur de l’en-tête du profil LinkedIn :
-
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 mise en page principale
Les mises en page sont essentielles pour organiser les informations à l’écran. Dans notre conception, nous traitons de divers éléments disposés sur plusieurs lignes et colonnes. Pour gérer cela efficacement, nous utiliserons la disposition Grille. La grille est particulièrement utile pour simplifier le processus de positionnement des commandes et améliorer les performances globales.
⚠ Si vous souhaitez en savoir plus sur la grille, je vous invite à lire cet article de grille.
<!-- Main layout-->
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto"
ColumnDefinitions="*,Auto">
<!--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>
✍️ Si vous observez, nous avons trois commentaires similaires à celui-ci : «<!--Insert the code corresponding to the explanation of Step 1 here.-- >» Cela implique qu’au fur et à mesure que vous progressez dans chaque étape, vous devez insérer le code correspondant à l’emplacement indiqué.
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 : Chronologie
Cette étape consiste à ajouter trois images différentes. Voyons comment inclure chacun d’eux :
➖ Chronologie: Cette image d’arrière-plan s’étend sur toute la largeur de l’écran.
<!-- Timeline-->
<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" HeightRequest="90" Source="timeline" VerticalOptions="Start" />
<!-- Insert the code being described in the following section here -->
➖ Image de profil : En créant cette image, nous aborderons trois sujets :
🔹 Les frontières: L’image comporte une bordure colorée, nous allons donc l’entourer d’une bordure.
🔹 Contrôle des couleurs par mode d’apparence : La couleur de la bordure est déterminée selon que votre appareil est en mode clair ou sombre : blanc et noir, respectivement. Pour y parvenir, nous utilisons l’extension de balisage AppThemeBinding.
🔹 Chevauchement : Dans ce cas, l’image de profil chevauche légèrement la chronologie, créant un effet de chevauchement. Pour résoudre ce problème, nous pouvons utiliser la propriété Margin. Il suffit d’attribuer une valeur négative à la partie supérieure, comme indiqué ci-dessous :
<!--Profile image-->
<Border Grid.Row="1" Grid.Column="0" BackgroundColor="{AppThemeBinding Light=White,Dark=Black}" WidthRequest="80" HeightRequest="80" HorizontalOptions="Start" Margin="20,-40,0,0">
<Image Source="microsoftlogo.jpeg" Margin="2" />
</Border>
<!-- Insert the code being described in the following section here -->
✍️ Pour mieux comprendre comment gérer le mode apparence, je vous invite à explorer l’article « Gestion des modes clair et sombre avec .NET MAUI.»
Icône de cloche : Ensuite, ajoutons l’icône en forme de cloche ! 🔔
<!-- Bell icon-->
<Image Grid.Row="1" Grid.Column="1" Source="bell" HorizontalOptions="End" HeightRequest="20" Margin="0,0,10,0"/>
<!-- Insert the code being described in the following section here -->
Finalement, vous obtiendrez un résultat semblable à l’image suivante :
Étape 2 : Description
Dans ce deuxième bloc, nous présentons les informations suivantes :
- Nom de profil
- Rôle
- Emplacement
- Photo arrondie d’un ami commun
- Description d’un ami commun
Commençons par ajouter les trois premiers :
<!-- Profile Name -->
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="Microsoft" Margin="20,15,20,0" FontSize="17"/>
<!-- Description-->
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Text="Desarrollo de Software" Margin="20,0" FontSize="14" TextColor="{StaticResource GrayPrimary}"/>
<!-- Location-->
<Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Text="Redmond, Washington · 20.903.588 seguidores" Margin="20,0,20,10" FontSize="14" TextColor="{StaticResource GrayPrimary}"/>
<!-- Insert the code being described in the following section here -->
Continuons avec l’image arrondie :
Nous utiliserons AvatarView de la boîte à outils communautaire .NET MAUI pour afficher l’image. Pour sa mise en œuvre, vous devez appliquer les étapes suivantes :
1. Installation: Ajoutez 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 UseMauiApp<App>()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 :
<!--Avatar & description-->
<toolkit:AvatarView Grid.Row="5" Grid.Column="0"
ImageSource="cristina"
BorderColor="Transparent"
HorizontalOptions="Start"
Margin="20,0,10,0"
HeightRequest="30"
WidthRequest="30" />
<!-- Insert the code being described in the following section here -->
Ensuite, ajoutons la description de l’ami commun :
<!-- Mutual Friend description-->
<Label Grid.Row="5" Grid.Column="0" Margin="60,0,0,0" VerticalTextAlignment="Center" Grid.ColumnSpan="2" HorizontalTextAlignment="Start" Text="Cristina y 75 contactos más trabajan aquí"/>
<!-- Insert the code being described in the following section here -->
Finalement, vous obtiendrez un résultat semblable à l’image suivante :
Étape 3 : boutons d’action
Nous sommes à la dernière étape ! Notre interface utilisateur est presque terminée. Dans celui-ci, nous ajouterons trois boutons. 🎉 Au lieu de les ajouter directement à la grille principale, nous allons créer une autre grille pour les placer à l’intérieur. Mais pourquoi? 🤔 Cette approche permet une meilleure gestion de la hauteur des boutons. 😎
<Grid ColumnDefinitions="*,*,Auto"
HeightRequest="50"
Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2">
<Button Grid.Column="0" Margin="20,15,0,0" Text="Más información" CornerRadius="15" TextColor="{AppThemeBinding Light=White, Dark=Black}" BackgroundColor="{StaticResource BluePrimary}" Padding="10,-50"/>
<Button Grid.Column="1" Margin="10,15,0,0" Text="Siguiendo" ImageSource="check" TextColor="{StaticResource BluePrimary}" CornerRadius="15" BackgroundColor="Transparent" BorderWidth="2" BorderColor="{StaticResource BluePrimary}" />
<Button Grid.Column="2" Margin="10,15,20,0" Text="..." TextColor="Silver" BorderColor="Silver" BorderWidth="2" BackgroundColor="Transparent" CornerRadius="16" />
</Grid>
Finalement, vous obtiendrez un résultat semblable à l’image suivante :
🎉 Ça y est ! Nous avons créé avec succès cette magnifique interface utilisateur ! 🖥️ Mais notre voyage ne s’arrête pas là. Nous avons fait un effort supplémentaire pour garantir que notre conception soit superbe en mode clair et sombre (c’est pourquoi l’extension de balisage AppThemeBinding dans les différentes étapes). 🌞🌚
Ci-dessous, vous verrez comment notre interface utilisateur s’adapte gracieusement à ces différents paramètres, démontrant notre engagement envers la polyvalence et l’expérience utilisateur. Jetez un œil et voyez par vous-même ! 🌟👀
Et la conception de notre en-tête LinkedIn de Microsoft est terminée !
Merci d’avoir lu! 👋 À la prochaine fois ! 💚💕
Source link