New news Xamarin Forms, Xamarin

Getting started with FlexLayout Properties Behavior

In Xamarin Forms we have some layouts that define the distribution scheme to the components in the screen.  Handling with this, the views for the user.

In this case I am going to explain about FlexLayout.

What is?

FlexLayout provides different ways for allocating components in the screen, making alignment, design and spaces organization way easier. This layout have the power to give a better proportional size for the components inside, because it arrange elements in a ratio based in screen dimensions and among elements in the screen. Keeping your view cleaner and more organized.

To use it, you just have to get Nightly version from Xamarin Forms.

Let’s Start!

FlexLayout have some properties to define the behavior of the components, let’s see:

JustifyContent:

This property define how will be organize the content.

Supported values. Organize your elements as follows:

  • Start:                    At begin of the container. (Default value).
  • Center:                Center of the container.
  • End:                     End of the container.
  • SpaceAround:   Begins with one unit of space for the borders and two units respect to others elements in the container.
  • SpaceBetween: Gets same space between them.
  • SpaceEvenly:    Gets same spaces between borders and the other elements in the container.


AlignItems:

Defines elements behavior alignment in the container.

Supported values. Organize your elements as follows:

  • Start:           Your elements at begin of the container just getting a line space.
  • Center:        Puts elements in the center of the container.
  • End:             Elements at the end of the container.
  • Stretch:       Your elements at begin of the container in a horizontal stretched. (Default value)


Direction:

Indicates the direction of the elements in the screen and you can use the values that I show below.

Supported values. Organize your elements as follows:

  • Row:                            Left to Right in a  vertical way (Default value)
  • RowReverse:            Right to Left in a  vertical way.
  • Column:                     Top to Bottom in a horizontal way.
  • ColumnReverse:      Bottom to Top in a horizontal way. 


Wrap: 

Organizes location of the components. By default, FlexLayout elements put them all in just one line. With this property we can change this behavior.

Supported values. Organize your elements as follows:

  • NoWrap:    All your Elements in the same line. (Default value)
  • Wrap:         Elements in multiple lines from Top to Bottom.
  • Reverse:    Elements in multiple lines from Bottom to Top.

Good Luck with your implementation!!! Let’s Start!!! 😎

Spanish post:

https://xamarinlatino.com/i-wrote-this-article-about-flexlayout-properties-behavior-in-xamarin-forms-c1b20d7001f1

References:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://javiersuarezruiz.wordpress.com/2018/03/28/xamarin-forms-primer-vistazo-a-flexlayout/

 

Tagged , ,

Leave a Reply

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