Xamarin

Quiz: Let’s practice some simple UI skills!😍

Howdy! ?‍♀️I have to confess that I really love UI practices and that’s why I decided to create this post a little differently! I have noticed that the topic of creating graphical interfaces in XAML is one of the “Most feared” that’s why I usually develop a lot of posts about UI Replication in order to show you that it’s actually really easy and that little by little you’ll end up loving it. ? For this post, I decided to do a different theme than usual, this time we are going to practice some UI skills which once we are clear, our work in XAML is made much easier!

It’s a post that I have done with all the inspiration and love so I am super excited about it because I had the idea of doing this little practice in XAML I hope you like it and it will be very useful and learning for you! ?


Start with the instructions

The post consists of a set of simple quizzes through which we will be testing our knowledge. We will have four blocks which will have a set of three tests each. In the end you will see the correct and failed answers accompanied by the correct answer with the explanation.


Let’s start! 🤓

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-08-18-at-6.01.12-PM-1024x83.pngIn the following four exercises you will be presented with a replicated image on which you must indicate how many columns and rows you need to add to the grid structure to replicate it.

Created on By Leomaris Reyes

1 / 3

01 - Identifying the number of rows and columns in a Grid

Question Image

2 / 3

02 - Identifying the number of rows and columns in a Grid

Question Image

3 / 3

Identifying the number of rows and columns in a Grid

Question Image

Your score is

0%

⭐  In my perception one of the most delicate issues when starting with the Grid is to be able to identify the number of rows and columns, let’s look at this as “A mini-information gathering from our UI”, the correct identification depends on whether we can perform a correct replica of a UI.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-08-18-at-7.51.55-PM-1024x81.pngIdentify the correct action for each scenario.

Created on By Leomaris Reyes

1 / 2

04 - To make the last button look like the image, how do we do it?

Question Image

2 / 2

03 - To achieve the structure of the attached image, what do you think is missing?

<Grid RowDefinitions="*,*,*" ColumnDefinitions="*,*">
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="#ffd965" />
<Button Grid.Row="0" Grid.Column="1" BackgroundColor="#debcd9" />
<Button Grid.Row="1" Grid.Column="1" BackgroundColor="#b5d8a7" />
<Button Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#cee2f3"/>
</Grid>

Question Image

Your score is

0%

⭐ It’s very important to be able to correctly identify the details when analyzing a code, performing this type of practice will allow us to quickly detect errors in terms of any missing detail in our UIs.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-08-18-at-8.54.21-PM-1024x80.png

Finally we are going to practice some Spacing topics.

Created on By Leomaris Reyes

1 / 1

05 - How do I remove the space between the columns?

Question Image

Your score is

0%

⭐ The Spacing not only works with the Grid but with all the other layouts, this is a very important issue, however, it is sometimes forgotten. ?


? I hope you liked these little tests and have been very helpful for your professional development! ?

Thank for reading! ??

Tagged ,

Leave a Reply

Your email address will not be published. Required fields are marked *