January XAML Fest for .NET MAUI—Microsoft’s LinkedIn Header Design

Ever wanted to recreate the LinkedIn profile header? Let’s take a look at the steps involved in this user interface.

Welcome to the January XAML Fest! This article will guide you on how to create a LinkedIn profile header, using the Microsoft profile as an example.

We’ll explore various tips and techniques, such as overlapping controls, using borders, leveraging the .NET MAUI Community Toolkit, and more. Open up Visual Studio or Visual Studio Code and join us on this creative journey to bring this UI to life! 💪

The January XAML Fest is a month-long initiative where we showcase various replications of iconic user interfaces. If you’re keen to learn more about this exciting journey, I encourage you to check out the article “Welcome to the January XAML Fest for .NET MAUI.”

For a comprehensive understanding, here’s an outline of the topics that will structure our article’s explanation:

• Tips for maximizing the learning experience
• Understanding the UI structure
• Setting the main layout
• Developing each step in detail

✍️ Tips for Maximizing the Learning Experience

Before we embark on the coding and design journey, it’s essential to make sure you’re fully prepared to make the most of this post. Here are some helpful tips to enhance your experience and increase your productivity as you recreate the LinkedIn profile header UI:

• Visual reference of the original UI: To begin, we’ll display an image of the original UI, segmented into steps. Each one corresponds to a different aspect of the design we’ll be addressing.

• In-depth design analysis: Each step will include an image highlighting the specific design element we’re concentrating on. This approach offers a clear and focused examination of each design component.

• Guided coding sections: In every coding section, keep an eye out for a comment that says, “Insert the code being described in the following section here.” This comment serves as your prompt to insert the forthcoming code explanation right at that point, ensuring a smooth and organized coding experience.

With all these tools at your disposal, you’re now fully equipped to dive into the UI code. Get ready for an exciting journey that offers hands-on experience and in-depth knowledge of .NET MAUI, particularly focusing on XAML for the graphical interface. Let’s start this enjoyable adventure—happy coding! 🚀🎨🌟

Understanding the Card Structure

Before beginning to code, spend some time understanding the scope and implications of your project. This initial stage involves breaking down the design into smaller, manageable parts, each referred to as a “step.” Each step must have an order number, description and unique color for easy identification. This not only aids the development process but also makes this guide easier to follow. Let’s get started!

Setting up the Main Layout

Layouts are essential for organizing information on the screen. In our design, we’re dealing with various elements arranged across multiple rows and columns. To effectively manage this, we’ll utilize the Grid layout. The Grid is particularly useful for simplifying the control positioning process and enhancing overall performance.

⚠ If you want to know more information about the grid, I invite you to read this grid article.

<!-- 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>  

✍️ If you observe, we have three comments similar to this: “<!--Insert the code corresponding to the explanation of Step 1 here.-- >” This implies that as you progress through each step, you should insert the corresponding code at the indicated location.

Developing Each Step in Detail 🕵️‍♂️

Our structure is now in place! 💃 Let’s start crafting the visual elements for each step.

Step 1: Timeline

This step involves adding three different images. Let’s discuss how to include each one of them:

➖ Timeline: This background image extends across the width of the screen.

<!-- 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 -->

➖ Profile image: In creating this image, we will delve into three topics:

🔹 Borders: The image features a colored border, so we will encase it within a Border.

🔹 Color control by appearance mode: The border color is determined by whether your device is in light or dark mode—white and black, respectively. To achieve this, we utilize AppThemeBinding markup extension.

🔹 Overlapping: In this case, the profile image slightly overlaps the timeline, creating a overlapping effect. To address this, we can use the Margin property. We only need to assign a negative value to the upper part, as shown below:

<!--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 -->

✍️ To understand more about how to handle appearance mode, I invite you to explore the article "Handling Light and Dark Mode With .NET MAUI.”

Bell icon: Then, let’s add the bell icon! 🔔

<!-- 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 -->

Finally, you will get a result like the following image:

Step 2: Description

In this second block, we present the following information:

• Profile name
• Role
• Location
• Rounded photo of a mutual friend
• Mutual friend description

Let’s begin by adding the first three:

<!-- 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 -->

Let’s continue with the rounded image:

We will use the AvatarView from the .NET MAUI Community Toolkit to display the image. For its implementation you must apply the following steps:

1. Installation: Add the Community.Toolkit.Maui NuGet package.

2. Setup in MauiProgram.cs: After adding the NuGet package, go to the MauiProgram.cs. Right below UseMauiApp<App>(), append:

.UseMauiCommunityToolkit() 

3. Namespace Addition: Include the toolkit namespace in your page:

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

4. Using AvatarView: Now, you can incorporate the AvatarView into your 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 --> 

Next, let’s add the mutual friend description:

<!-- 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 -->

Finally, you will get a result like the following image:

Step 3: Action Buttons

We’re at the final step! Our UI is nearly complete. In this one, we’ll add three buttons. 🎉 Instead of directly adding them to the main Grid, we’ll create another grid to place them inside. But why? 🤔 This approach enables better management of the buttons’ height. 😎

<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>

Finally, you will get a result like the following image:

🎉 That’s it! We’ve successfully created this beautiful UI! 🖥️ Our journey doesn’t stop here, though. We’ve made an extra effort to ensure our design looks great in both light and dark modes (that’s why the AppThemeBinding markup extension in the different steps). 🌞🌚

Below, you’ll see how our UI gracefully adapts to these different settings, demonstrating our dedication to versatility and user experience. Take a look and see yourself! 🌟👀

And our Microsoft’s LinkedIn Header Design is done!

Thanks for reading! 👋 See you next time! 💚💕