Telerik blogs

For our first .NET MAUI Challenge, let’s see if you understand how to create a grid structure.

Howdy! πŸ™‹‍♀️ Welcome to #NetMauiChallenges! Thank you very much for accepting this challenge! 😎 These posts will be launched periodically and will be exploring topics that will help you continue to grow in .NET MAUI!

You will see that the challenges focus on simple and very specific but important topics. The goal here is that you can take the time to delve into each one. We want learning to be fun for you, so regardless of the day and the time you are viewing this article, it will only take a few minutes!

How Our Challenges Work

Each challenge has a structure that is easy to understand and that complies with three important points to be of real help for your professional development:

  • πŸ—’ Statement of the challenge: You will always see an image which gives you a description of what the challenge expects from you. After this, you will see three possible answers from which you can only select one.

  • πŸ” Solution: In each challenge, you will receive the option that solves the question. It will be hidden so that you first analyze it and then click to see the correct answer with its respective explanation.

  • πŸ“” Study resources: Once you see the correct answer, each challenge’s solution will have study resources so you can delve deeper into it.

Prefer to Learn via Video?

You can watch a video version of this post here:

Simple Grid Challenge in .NET MAUI

In today’s challenge, we want to focus on the correct declaration of the number of rows and columns. Be careful with this! Let’s see the challenge!

If you have to use a Grid to achieve this structure, what would be a possible way to do it?

A sample layout with two equal-height elements on the first row, one element across from three elements on the second row, and one long element across the entire third row.

Option A:

<Grid RowDefinitions  ="*,*"       
    <!-- Your code here--> 

Option B:

<Grid RowDefinitions   ="*,*,*,*,*"       
        ColumnDefinitions ="*,*" >
  <!-- Your code here--> 

Option C:

<Grid RowDefinitions    ="*,*,*"       
        ColumnDefinitions  ="*,*" >
  <!-- Your code here--> 

Do you already have the answer? Perfect! Please click below to see the solution—here you can see the correct answer and its explanation with supporting materials.

The correct answer is option B! πŸ’₯

<Grid RowDefinitions   ="*,*,*,*,*"       
        ColumnDefinitions ="*,*" >
  <!-- Your code here--> 

The correct answer is B due to the following points:

As mentioned above, the learning goal here was to learn how to declare the correct number of rows and columns for the example structure.

In this case the correct answer to declare is the following:

  • Five (5) rows.
  • Two (2) columns.

Once you manage to do this basic structure with the Grid, you can start locating all the controls on your page—in this case, the example contains little boxes of green colors as design simulation.

Answer is B

πŸ“’ Study Resources

Finally, remember that all your knowledge of Xamarin Forms is fully valid in .NET MAUI!


We invite you to share this challenge on your networks using the hashtag #NetMauiChallenges.

See you next time! πŸ™‹‍♀️ I hope you liked it and it was useful!

Thanks for reading! πŸ’šπŸ’•

About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! πŸ’šπŸ’• You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts


Comments are disabled in preview mode.