Quick Links
Child rendering behaviour mismatched after upgrading Xamarin.Forms (>4.0) in FlexLayout
USMember ✭✭
Hi All,
I have a simple sample with the layout structure of FlexLayout which has more number of Grid. Each Grid has two children that are
- Grid with Label as a child
Custom View (TouchView) which is inherited from View.
<FlexLayout HorizontalOptions="Start" VerticalOptions="Center" Direction="Row" Wrap="Wrap" BindableLayout.ItemsSource="{Binding ChildItems}" JustifyContent="Start" AlignContent="Start" AlignItems="Start"> <FlexLayout.BindableLayout.ItemTemplate> <DataTemplate> <Grid> <Grid BackgroundColor="Aqua"> <Label TextColor="Black" Text="{Binding}"/> </Grid> <local:TouchView/> </Grid> </DataTemplate> </FlexLayout.BindableLayout.ItemTemplate> </FlexLayout>
Here TouchView represents like
public class TouchView:View
{
}
This FlexLayout wrap its child element correctly up to the Xamarin.Forms version of 3.6.0.539721
But after 4.0.0.425677 , it rendered be like in below
Note : Issue only with Android platform.
@Xamariners please check this and update us with possible solution. Actually it blocks our development cycle. Taking this a high priority and provide a solution ASAP.
I have attached the sample in both lower and higher version of Xamarin.Forms.
Regards,
Hemalatha M.
Best Answer
-
LeonLu
Xamurai
If you want to achieve the result like 3.6.0.539721 in xamarin forms 4.0.0.425677 , you should set a specific value of
RowDefinition HeightandColumnDefinition Width, I do not what is your achievement of TouchView, to achieve same result like the 3.6.0.539721, I set the value ofColumnSpacing, let it disappear, but you can adjust it.Here is running screenshot.
Here is code.
<FlexLayout HorizontalOptions="Start" VerticalOptions="Start" Direction="Row" Wrap="Wrap" BindableLayout.ItemsSource="{Binding ChildItems}" JustifyContent="Start" AlignContent="Start" AlignItems="Start"> <BindableLayout.ItemTemplate> <DataTemplate > <Grid ColumnSpacing="-62" RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="62" /> <ColumnDefinition Width="62" /> </Grid.ColumnDefinitions> <Grid BackgroundColor="Aqua" Grid.Column="0" Grid.Row="0"> <Label TextColor="Black" Text="{Binding}"/> </Grid> <local:TouchView Grid.Column="0" Grid.Row="1" /> </Grid> </DataTemplate> </BindableLayout.ItemTemplate> </FlexLayout>5
Answers
If you want to achieve the result like 3.6.0.539721 in xamarin forms 4.0.0.425677 , you should set a specific value of
RowDefinition HeightandColumnDefinition Width, I do not what is your achievement of TouchView, to achieve same result like the 3.6.0.539721, I set the value ofColumnSpacing, let it disappear, but you can adjust it.Here is running screenshot.
Here is code.
@LeonLu Thanks for your update. I will check and let you know
Ok, waitting for you update, if the reply is helpful, please mark it as answer, it will help other who have similar issue.
@HemalathaMarikumar Are there any updates for this issue? If the reply is helpful, please try to mark it as an answer, it will help others who have similar issue.
@LeonLu Yes. I have checked the provided solution. But in my cases, I have to arrange all children of the main grid in the same column. It really appreciated based on your solution only we have got an idea to find, that issue is because of having the problem with measured width value to the custom view (TouchView). Hence we have fixed the same in our custom control.
Without considered our cases, it will be worked fine. Even though it should consider this as a bug.
https://github.com/xamarin/Xamarin.Forms/issues/6745