Using
Flex Layout, you can stack and wrap child views. It works very similar to the
concept you might know from CSS as the Flexible Box Layout (or flex layout or
flex box).
The FlexLayout is related to the StackLayout you might already know from
working with Xamarin.Forms. The big advantage of the FlexLayout is that it will wrap its
children where needed. When there is no more space in the row or column where
the children are defined, it will move the rest of the items to the next
row/column.
A FlexLayout is very easy to define, as you
can see in the code block underneath.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple
Stack">
<FlexLayout Direction="Column" AlignItems="Center"
JustifyContent="SpaceEvenly">
<!—Your
controls here -->
</FlexLayout>
</ContentPage>
|
Define it
as any other regular layout element you are used to. With the properties you
set on the FlexLayout , you can determine how to layout the children and
how they should align and wrap.
If we
want to place children horizontally or vertically then we can use FlexLayout.
It is similar to StackLayout.
example :
Place items horizontally
<FlexLayout Direction="Row"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout
Demo" FontSize="Large" />
<Button Text="My
Button" />
<Label Text="Hello
World" />
</FlexLayout>
Place
items vertically
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout Demo" FontSize="Large"
/>
<Button Text="My Button" />
<Label Text="Hello World" />
</FlexLayout>
No comments:
Post a Comment